Try tapping or petting the dog.
CODE:
@keyframes bounceupdown {
from {
transform: translate(0px,-100px);
-ms-transform: translate(0px,-100px);
-webkit-transform: translate(0px,-100px);
}
to {
transform: translate(0px,0px);
-ms-transform:translate(0px,0px);
-webkit-transform:translate(0px,0px);
}
}
img.cute-dog.jumping,img.cute-dog:hover,img.cute-dog:focus{
animation-duration: .2s;
animation-name: bounceupdown;
animation-iteration-count: 10000;
animation-direction: alternate;
}
Explanation
1) In this code, I named the animation movement as bounceupdown
.
2) Then , defined from
starting point css.
3) After that , defined to
as ending point css .
4) Lastly, tagged its animation for an element css .
img.cute-dog{
animation-duration: .5s;
animation-name: bounceupdown;
animation-iteration-count: 3;
animation-direction: alternate;
}
Cater For Mobile
1) To cater for mobile , we must consider support for hover event.
2) As mobile touch events do not support touch hover event, we will use a javascript to append a class to the element when clicked/ touched.
3) We will give this class name jumping
, and we will attached it to img.cute-dog
element thus rendering the css declaration to img.cute-dog.jumping
.
4) The next consideration is to refresh the css, as the css loaded already on the dom. You won’t see any animation effect. To fix that, we will just use javascript to redraw/refresh/repaint the dom.
5) Below is the updated code for responsive mobile with touch events.
$(document).ready(function(){
$(".cute-dog").click(function(){
//alternate is to use toggleClass function in jquery
$(this).removeClass("jumping").addClass("jumping");
//To repaint redraw the element to reload the css animation
document.getElementById('cute-dog').style.display='none';
document.getElementById('cute-dog').offsetHeight; // no need to store this anywhere, the reference is enough
document.getElementById('cute-dog').style.display='';
});
});
You can find the full source code here:-
https://github.com/seanlon/CssAnimation/tree/master/PetADog
Leave a Reply