Jump to content

CSS3


OldMan
 Share

Recommended Posts

Hello
I did the code to shake ball, when i do mouse hover.
Is possible when i remove "mouse", the ball continue shake?
Thanks!
<html><head><style>.ball:hover{   animation: animationFrames linear 1s;  animation-iteration-count: 1;  transform-origin: 50% 0%;  -webkit-animation: animationFrames linear 2s;  -webkit-animation-iteration-count: 1;  -webkit-transform-origin: 50% 0%;  -moz-animation: animationFrames linear 2s;  -moz-animation-iteration-count: 1;  -moz-transform-origin: 50% 0%;  -o-animation: animationFrames linear 2s;  -o-animation-iteration-count: 1;  -o-transform-origin: 50% 0%;  -ms-animation: animationFrames linear 2s;  -ms-animation-iteration-count: 1;  -ms-transform-origin: 50% 0%;}@keyframes animationFrames{  0% {    transform:  rotate(0deg) ;  }  20% {    transform:  rotate(15deg) ;  }  40% {    transform:  rotate(-10deg) ;  }  60% {    transform:  rotate(5deg) ;  }  80% {    transform:  rotate(-5deg) ;  }  100% {    transform:  rotate(0deg) ;  }}@-moz-keyframes animationFrames{  0% {    -moz-transform:  rotate(0deg) ;  }  20% {    -moz-transform:  rotate(15deg) ;  }  40% {    -moz-transform:  rotate(-10deg) ;  }  60% {    -moz-transform:  rotate(5deg) ;  }  80% {    -moz-transform:  rotate(-5deg) ;  }  100% {    -moz-transform:  rotate(0deg) ;  }}@-webkit-keyframes animationFrames {  0% {    -webkit-transform:  rotate(0deg) ;  }  20% {    -webkit-transform:  rotate(15deg) ;  }  40% {    -webkit-transform:  rotate(-10deg) ;  }  60% {    -webkit-transform:  rotate(5deg) ;  }  80% {    -webkit-transform:  rotate(-5deg) ;  }  100% {    -webkit-transform:  rotate(0deg) ;  }}@-o-keyframes animationFrames {  0% {    -o-transform:  rotate(0deg) ;  }  20% {    -o-transform:  rotate(15deg) ;  }  40% {    -o-transform:  rotate(-10deg) ;  }  60% {    -o-transform:  rotate(5deg) ;  }  80% {    -o-transform:  rotate(-5deg) ;  }  100% {    -o-transform:  rotate(0deg) ;  }}@-ms-keyframes animationFrames {  0% {    -ms-transform:  rotate(0deg) ;  }  20% {    -ms-transform:  rotate(15deg) ;  }  40% {    -ms-transform:  rotate(-10deg) ;  }  60% {    -ms-transform:  rotate(5deg) ;  }  80% {    -ms-transform:  rotate(-5deg) ;  }  100% {    -ms-transform:  rotate(0deg) ;  }}</style></head><body><img src="http://i.imgur.com/ZHf8dsG.png" class="ball"/></body></html>
Link to comment
Share on other sites

<html><head><style>.move, .ball:hover{   animation: animationFrames linear 1s;  animation-iteration-count: infinite;  transform-origin: 50% 0%;  -webkit-animation: animationFrames linear 2s;  -webkit-animation-iteration-count: infinite;  -webkit-transform-origin: 50% 0%;  -moz-animation: animationFrames linear 2s;  -moz-animation-iteration-count: infinite;  -moz-transform-origin: 50% 0%;  -o-animation: animationFrames linear 2s;  -o-animation-iteration-count: infinite;  -o-transform-origin: 50% 0%;  -ms-animation: animationFrames linear 2s;  -ms-animation-iteration-count: infinite;  -ms-transform-origin: 50% 0%;}@keyframes animationFrames{  0% {    transform:  rotate(0deg) ;  }  20% {    transform:  rotate(15deg) ;  }  40% {    transform:  rotate(-10deg) ;  }  60% {    transform:  rotate(5deg) ;  }  80% {    transform:  rotate(-5deg) ;  }  100% {    transform:  rotate(0deg) ;  }}@-moz-keyframes animationFrames{  0% {    -moz-transform:  rotate(0deg) ;  }  20% {    -moz-transform:  rotate(15deg) ;  }  40% {    -moz-transform:  rotate(-10deg) ;  }  60% {    -moz-transform:  rotate(5deg) ;  }  80% {    -moz-transform:  rotate(-5deg) ;  }  100% {    -moz-transform:  rotate(0deg) ;  }}@-webkit-keyframes animationFrames {  0% {    -webkit-transform:  rotate(0deg) ;  }  20% {    -webkit-transform:  rotate(15deg) ;  }  40% {    -webkit-transform:  rotate(-10deg) ;  }  60% {    -webkit-transform:  rotate(5deg) ;  }  80% {    -webkit-transform:  rotate(-5deg) ;  }  100% {    -webkit-transform:  rotate(0deg) ;  }}@-o-keyframes animationFrames {  0% {    -o-transform:  rotate(0deg) ;  }  20% {    -o-transform:  rotate(15deg) ;  }  40% {    -o-transform:  rotate(-10deg) ;  }  60% {    -o-transform:  rotate(5deg) ;  }  80% {    -o-transform:  rotate(-5deg) ;  }  100% {    -o-transform:  rotate(0deg) ;  }}@-ms-keyframes animationFrames {  0% {    -ms-transform:  rotate(0deg) ;  }  20% {    -ms-transform:  rotate(15deg) ;  }  40% {    -ms-transform:  rotate(-10deg) ;  }  60% {    -ms-transform:  rotate(5deg) ;  }  80% {    -ms-transform:  rotate(-5deg) ;  }  100% {    -ms-transform:  rotate(0deg) ;  }}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>$(document).ready(function(){$('.ball').hover(function(){    $(this).addClass('move');});});</script></head><body><img src="http://i.imgur.com/ZHf8dsG.png" class="ball"/></body></html>

Try this code. It is not possible without js. so I use jquery.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...