Good day! I can not figure out how to implement the rotation of the picture at 45 and -45 degrees uninterruptedly, that is, the picture all the time tilts in one way or the other. So far, only when the mouse is moved:

<img id="image" src="4.png"> <script type="text/javascript"> $(document).ready(function(){ jQuery("#image").rotate({ bind:{ mouseover:function(){ $(this).rotate({animateTo:45}) }, mouseout:function(){ $(this).rotate({animateTo:-45}) } }}); }); </script>
  • Read about setTimeout and setInterval. - Dmitriy Kondratiuk
  • Already tried, it does not work at all. callback still used. I can not understand the algorithm itself - www

2 answers 2

I allowed myself to slightly change the Abmin code to fit the condition:

 #me { -webkit-animation: rotation 2s infinite linear; padding: 20px; } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } } 
 <img id="me" src="http://www.clker.com/cliparts/T/G/C/H/K/W/no-sign-th.png">

    Made by CSS

     #me { -webkit-animation: rotation 2s infinite linear; padding: 20px; border-radius: 50%; } @-webkit-keyframes rotation { 0% {-webkit-transform: rotate(0deg);} 25% {-webkit-transform: rotate(45deg);} 50% {-webkit-transform: rotate(0deg);} 75% {-webkit-transform: rotate(-45deg);} 100% {-webkit-transform: rotate(0deg);} } 
     <img id="me" src="http://cliparts.co/thumbnail/5TR/Ka6/5TRKa6dXc.jpg">

    • Thank you very much! But, unfortunately, now I can not adjust cross-browser compatibility. - www
    • @www prefixer will help with this: autoprefixer.imtqy.com/en - Crantisz
    • Thank! now come up) It remains for me to figure out how to add to this jump on css. At JS, I know how to do it, so I did not ask in this question. - www