OldMan Posted December 1, 2014 Share Posted December 1, 2014 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 More sharing options...
danishwebindia Posted December 2, 2014 Share Posted December 2, 2014 <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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now