JQuery continuous back and forth rotation animation

Question

I need help with this.

I made a nice web set animation for one of the elements of my site. It should rotate 7 degrees forward and backward. Unfortunately, it only works in Chrome. Here is the code:

#brk { background: url("../images/brk.png"); width: 118px; height: 54px; display: block; position: relative; top: 65px; left: 93px; -webkit-animation: brk-spin 3s infinite linear; -moz-animation: brk-spin 3s infinite linear; -o-animation: brk-spin 3s infinite linear; -ms-animation: brk-spin 3s infinite linear; } @-webkit-keyframes brk-spin { 0% { -webkit-transform: rotate(0deg);} 25% { -webkit-transform: rotate(-7deg);} 50% { -webkit-transform: rotate(0deg);} 75% { -webkit-transform: rotate(7deg);} 100% { -webkit-transform: rotate(0deg);} } @-moz-keyframes brk-spin { 0% { -webkit-transform: rotate(0deg);} 25% { -webkit-transform: rotate(-7deg);} 50% { -webkit-transform: rotate(0deg);} 75% { -webkit-transform: rotate(7deg);} 100% { -webkit-transform: rotate(0deg);} } @-o-keyframes brk-spin { 0% { -webkit-transform: rotate(0deg);} 25% { -webkit-transform: rotate(-7deg);} 50% { -webkit-transform: rotate(0deg);} 75% { -webkit-transform: rotate(7deg);} 100% { -webkit-transform: rotate(0deg);} } @-ms-keyframes brk-spin { 0% { -webkit-transform: rotate(0deg);} 25% { -webkit-transform: rotate(-7deg);} 50% { -webkit-transform: rotate(0deg);} 75% { -webkit-transform: rotate(7deg);} 100% { -webkit-transform: rotate(0deg);} } 

Therefore, it seemed to me that I am using jQuery for browsers that do not support webkit animation. I tried many options, but nothing worked.

I downloaded the jQuery rotate plugin ( https://code.google.com/p/jqueryrotate/ )

I tried something like this:

 <script> if(!Modernizr.cssanimation) { $(function() { $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: function() { $('#brk').stop().rotate({ animateTo: -7, duration:600}); } }); (function roty() { setTimeout(function() { roty() },1200); })(); }); } </script> 

But at the same time, the image (div with background) sways only once there and back, and it stops.

Any idea how to make a loop?

Help would be greatly appreciated. Thanks!

Answer 1

Why not just call a method call? So the one that animates 7 causes another, and vice versa. Something like that:

 function rotateSeven() { $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: function() { rotateNegative(); } }); } function rotateNegative() { $('#brk').stop().rotate({ angle:0, animateTo: -7, duration:600, callback: function() { rotateSeven(); } }); } 

Then, when you call one of them, they will continue to call each other. I am not sure if this is the best way to do this, although I have not tried to liven up the way you are here.

EDIT

Perhaps you have a bug in the code? I did something simpler, but it works for me continuously:

 function fadeIn() { jQuery("#test").fadeIn(); fadeOut(); } function fadeOut() { jQuery("#test").fadeOut(); fadeIn(); } fadeOut(); 

This is a simple example, but it works for me in Js Fiddle

EDIT 2

Here's a working example ... To make sure the documentation says to use the IMG tag - your #brk is an IMG tag, right? Otherwise, try to see what you think, compared to mine on this violin