We Keep Coding

Trigger keyframes with click function in JS

So I'm trying to create a rock paper scissors game with UI using html, css and JS and I got stuck on a problem, whenever the user chooses the rock by clicking the rock button, the rock div that contains the image with a fist should start to move on the screen but in my case it doesn't do anything.
The html:
<div class="game-screen-elements">
<h2 class="choice">Make your choice</h2>
<div class="fist-container">
<div class="fist-left"></div>
<div class="fist-right"></div>
</div>
<div class="pick">
<button class="rock" onclick="click()">rock</button>
<button class="paper">paper</button>
<button class="scissor">scissors</button>
</div>
</div>
</div>
The css:
.fist-container{
display: flex;
width: 100%;
justify-content: space-around;
}
.fist-right, .fist-left{
background-image: url(assets/rock.png);
width: 300px;
height: 300px;
background-size: cover;
}
.fist-left{
transform: rotateY(180deg);
}
#keyframes fistLeft {
0% {
transform: rotateY(180deg) translateY(0px);
}
15% {
transform: rotateY(180deg) translateY(-50px);
}
/*25% {
transform: rotateY(180deg) translateY(0px);
} */
35% {
transform: rotateY(180deg) translateY(-50px);
}
50% {
transform: rotateY(180deg) translateY(0px);
}
65% {
transform: rotateY(180deg) translateY(-50px);
}
75% {
transform: rotateY(180deg) translateY(0px);
}
85% {
transform: rotateY(180deg) translateY(-50px);
}
100% {
transform: rotateY(180deg) translateY(0px);
}
}
#keyframes fistRight {
0% {
transform: translateY(0px);
}
15% {
transform: translateY(-50px);
}
/*25% {
transform: translateY(0px);
} */
35% {
transform: translateY(-50px);
}
50% {
transform: translateY(0px);
}
65% {
transform: translateY(-50px);
}
75% {
transform: translateY(0px);
}
85% {
transform: translateY(-50px);
}
100% {
transform: translateY(0px);
}
}
The JS:
const playerHand = document.querySelector('.fist-left');
const rockChoice = document.querySelector('rock');
click = function(){
rockChoice.addEventListener('click', function(){
playerHand.style.animation = 'fistLeft 2s ease';
});
};

Here is your working Javascript code:
const playerHand = document.querySelector('.fist-left');
const rockChoice = document.querySelector('.rock');
rockChoice.addEventListener('click', click);
function click(){
playerHand.style.animation = 'fistLeft 2s ease';
}
Explanation: What your click function does is simply registering the event-listener and not necessarily executing the animation code, hence the event is not triggered. The separated click function now actually runs the code responsible for animation since it has been registered for any click events on your element with .rock class. Also make sure you are placing the JS code at the bottom of the body tag(inside closing body tag) if you are using it as external script.

Using jQuery to trigger CSS shake animation, works every OTHER time ... why?

I have a rather simple fiddle here: http://jsfiddle.net/7aotzqmL/2/ that is supposed to shake a div with CSS animation upon clicking a link. It works, but only every other time (every second time). I'm stumped - can anybody help?
Other answers I've looked at mentioned how when using onmouseover you also need to attach onmouseout... but this is just a click so I'm not sure that's relevant. I just want the div to shake on every click rather than every other.
jsFiddle: https://jsfiddle.net/7aotzqmL/2/
CSS code:
$(function() {
$('a').click(function(ev) {
$('div').toggleClass('shaker');
ev.preventDefault();
});
});
div.shaker {
animation: shake 0.3s;
/* When the animation is finished, start again */
animation-iteration-count: 1; //single shake
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
asd
<div>shake</div>

Try this will work
$(function(){
$('a').click(function(ev){
$('div').addClass('shaker');
setTimeout(function(){
$('div').removeClass('shaker');
},300);
ev.preventDefault();
});
});
Below code is removing class on even time click, and you animation working on adding class
$('div').toggleClass('shaker');
in above solution, div class will be removed after 0.3secs animation, it will add 'shaker' class every time you click and animation will happen

You are toggling the class so the first click adds it and the second removes it. Instead you could add the class on click and set a single use event listener to listen for the animation end and then remove the class.
$(function() {
const div = $('.container')
$('a').click(function(ev) {
div.addClass('shaker')
div.one('animationend', () => {
div.removeClass('shaker')
})
ev.preventDefault();
});
});
.container {
opacity: 1;
width: 100px;
height: 100px;
background: red;
}
.container.shaker {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.3s;
/* When the animation is finished, start again */
animation-iteration-count: 1; //single shake
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
asd
<div class="container"></div>

Well, for one, you're TOGGLING the class. so one click means "add" the next one means "remove". Also, "preventdefault" should appear first in order to prevent the default behavior of the anchor tag before you try to add or remove classes.
$(function(){
$('a').click(function(ev){
ev.preventDefault();
$('div').addClass('shaker');
setTimeout(()=> {
$('div').removeClass('shaker');
},300)
});
});

$(function(){
$('a').click(function(ev){
$('div').addClass('shaker');
setTimeout(()=>{
$('div').removeClass('shaker');
},300)
ev.preventDefault();
});
});
Use the above code. You were removing the shaker class alternatively.

Css3 animation jumps to last keyframe on mobile without animating

I am trying to build a simple animation of a beaker tipping over. Everything is working great on desktop, but both iOS Safari and chrome, when the animation starts it jumps immediately to the last key frame (100%). So this tells me the animation is firing, but for some reason it just doesn't want to well... animate.
Here is my scss code. I have an auto-prefixer, I've checked and double checked, it doesn't seem to be anything to do with -webkit. Any help would be awesome!!
/** Our Process Area Edits **/
&.our-process-title {
#our-process-svg {
width: rem-calc(150);
height: rem-calc(150);
margin: 50px auto;
transform: translateZ(0);
animation-name: beakerShake;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
&.running {
animation-play-state: running;
}
#-webkit-keyframes beakerShake {
0% { -webkit-transform: rotateZ(0deg);}
5% { -webkit-transform: rotateZ(20deg); }
15% { -webkit-transform: rotateZ(-25deg); }
20% { -webkit-transform: rotateZ(0deg);}
40% { -webkit-transform: rotateZ(0deg);}
50% { -webkit-transform: rotateZ(5deg); }
55% { -webkit-transform: rotateZ(-10deg); }
58% { -webkit-transform: rotateZ(15deg); }
60% { -webkit-transform: rotateZ(0deg);}
65% { -webkit-transform: rotateZ(0deg);}
72% { -webkit-transform: rotateZ(30deg); }
78% { -webkit-transform: rotateZ(-35deg); }
85% { -webkit-transform: rotateZ(0deg);}
95% { -webkit-transform: rotateZ(0deg);}
100% { -webkit-transform: rotateZ(105deg);}
}
#keyframes beakerShake {
0% { transform: rotateZ(0deg);}
5% { transform: rotateZ(20deg); }
15% { transform: rotateZ(-25deg); }
20% { transform: rotateZ(0deg);}
40% { transform: rotateZ(0deg);}
50% { transform: rotateZ(5deg); }
55% { transform: rotateZ(-10deg); }
58% { transform: rotateZ(15deg); }
60% { transform: rotateZ(0deg);}
65% { transform: rotateZ(0deg);}
72% { transform: rotateZ(30deg); }
78% { transform: rotateZ(-35deg); }
85% { transform: rotateZ(0deg);}
95% { transform: rotateZ(0deg);}
100% { transform: rotateZ(105deg);}
}
EDIT:
After trying one last thing, of course I found the culprit. I am drawing this particular svg's path, and then when it's done drawing, changing the animation play state to running. Here is my js :
setTimeout(function(){
svg.style.animationPlayState = svg.style.WebkitAnimationPlayState = 'running';
}, 4500);
Once i removed that functionality it all worked fine. I really need this the animation to fire after the svg is drawn (for obvious reasons). Any help would be awesome.

Turns out this is an issue with how iOS and the mobile broswers handle the animation play state... Essentially they don't.
The solution was to add the class
.no-animation {
animation: none !important;
}
to the element, and remove that class with js when the time is right. Feels kind of like a hack, but its the only thing I could find to work on both mobile and desktop. If anyone has better suggestions, I'd love to hear them!

how to rotate image 90 digree on both direction

I am very tried from myself but solving my problem.
My query is:
I have a image I want to rotate this image as flip from start to 90 degree in slow motion and come back from the same way for 90 degree.
please let me know the solution, how will I do?
Thanks in advanced.
i used this code
<style type='text/css'>
.img {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform:speed 5s;
-khtml-transform:speed 5s; /* Safari */
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
/*$('#image').mouseover(function(){
$(this).addClass('img');
}).mouseleave(function(){
$(this).removeClass('img');
});*/
//setTimeout(addclass(),5000)
setTimeout(function(){ addclass(); },5000);
});//]]>
function addclass(){
$("#add_remove").hide();
$("#image").addClass('img');
setTimeout(function(){ removeclass(); },5000);
}
function removeclass(){
$("#add_remove").show();
$("#image").removeClass('img');
setTimeout(function(){ addclass(); },5000);
}
</script>
</head>
<body>
<img id="image" src="robot_upper.png"/>
</body>

You can use CSS3 Transition and Animation
Here is the link and go study.
http://www.w3schools.com/css3/css3_transitions.asp

You can use this for clockwise and anti-clockwise
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
and
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */

I'm not sure if this is exactly what you're after but this does do the rotating.
Edit:
Thought I would post the code here to see if it helps at all.
I have set up the elements as you did and then just used CSS animations to control the transition.
CSS:
/* defines the animation to be used, in this case I have called it 'waving', please note the browser pre-fixes are required for this to work cross browser */
#-webkit-keyframes waving {
0% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(90deg);
}
}
#-moz-keyframes waving {
0% {
-moz-transform: rotate(90deg);
}
50% {
-moz-transform: rotate(-90deg);
}
100% {
-moz-transform: rotate(90deg);
}
}
#-o-keyframes waving {
0% {
-o-transform: rotate(90deg);
}
50% {
-o-transform: rotate(-90deg);
}
100% {
-o-transform: rotate(90deg);
}
}
#keyframes waving {
0% {
transform: rotate(90deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}
#image {
-webkit-animation: waving 5s infinite; /* Safari 4+ */
-moz-animation: waving 5s infinite; /* Fx 5+ */
-o-animation: waving 5s infinite; /* Opera 12+ */
animation: waving 5s infinite; /* IE 10+ */
}
CodePen Link

Show loading spinner before heavy processing in jQuery Mobile 1.1?

I'm going mad trying to get a spinner to appear. I've bound my heavy processing function to a button thus:
$(document).delegate("#clearread", "tap", onClearRead);
So on tap it calls this:
var onClearRead = function() {
setTimeout($.mobile.showPageLoadingMsg, 5);
// Civilised cleaning of saved status
var jStorIndex = $.jStorage.index();
for (var i = 0; i < jStorIndex.length; i++) {
if( jStorIndex[i] != "version" ) {
$.jStorage.deleteKey(jStorIndex[i]);
}
}
// Load articles afresh
loadArticles();
$.mobile.changePage("#choosearticle");
} //onClearRead
I find that the spinner does not appear during the clearing/loading of articles (about 10 secs) but only for a brief period while the #choosearticle page loads (0.5 secs).
What am I doing wrong?
I have the spinner working elsewhere in the app.
Thanks

Try this:
$(document).delegate("#clearread", "tap", onClearRead);
var onClearRead = function() {
$.mobile.showPageLoadingMsg();
setTimeout(function(){
//Your heavy processing
$.mobile.changePage("#choosearticle");
}, 5);
} //onClearRead

jQuery.show( [duration ] [, complete ] )
Putting the heavy processing in the "complete" function slot, ensures the object (with show called on it) is visible before the show happens.
Related SO Answers
https://stackoverflow.com/a/25207120/999943
jQuery whole HTML page load with spinner
Example using a CSS based spinner
CSS
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg); }
100% {
-moz-transform: rotate(359deg); } }
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg); } }
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg); }
100% {
-o-transform: rotate(359deg); } }
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg); }
100% {
-ms-transform: rotate(359deg); } }
#keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear; }
Html using font awesome
<div id="spinner" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #cccccc; z-index: 1; filter: alpha(opacity=30);">
<i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
Javascript
$('#spinner').show(100, function() {
// Once the spinner is visible then run the heavy function.
heavyProcessingFunction();
});