循环功能，CSS动画旋转

Question

我试着去创建一个动画过渡，然后一旦做到了这一点，动画旋转回它的出发点和无限循环，这样的功能。

我有以下的只有我不能让动画工作，也没有恢复为默认？

http://jsfiddle.net/QfeC2/

function drunk(){ 
    $('div').css({'-webkit-transform':'rotate(1deg)'}); 
    $('div').delay(4000).css({'-webkit-transform':'rotate(0deg)'}); 
} 

setTimeout(function() { drunk(); }, 2000); 

Answer 1

如果你使用的CSS动画，为什么不使用纯CSS？ 你可以将动画属性包装在一个类中，并在JS中切换该类。

div { 
    -webkit-animation:anim 2s ease infinite; 
} 
@-webkit-keyframes anim 
{ 
    0 {-webkit-transform:rotate(0deg);} 
    50% {-webkit-transform:rotate(1deg);} 
    100% {-webkit-transform:rotate(0deg);} 
} 

Updated fiddle

Answer 2

.delay（）只适用于当您使用jQuery的动画，你必须使用的setTimeout

function drunk() { 
    $('div').css({ 
     '-webkit-transform': 'rotate(1deg)' 
    }); 
    setTimeout(function() { 
     $('div').css({ 
      '-webkit-transform': 'rotate(0deg)' 
     }); 
    }, 4000); 
} 

setTimeout(function() { drunk(); }, 2000); 

DEMO

使用的setInterval为连续循环

setInterval(function(){drunk();},8000); 

DEMO

Answer 3

看到更新后的提琴： http://jsfiddle.net/QfeC2/3/

function AnimateRotate(angle) { 
// caching the object for performance reasons 
var $elem = $('div'); 

// we use a pseudo object for the animation 
// (starts from `0` to `angle`), you can name it as you want 
$({deg: 0}).animate({deg: angle}, { 
    duration: 2000, 
    step: function(now) { 
     // in the step-callback (that is fired each step of the animation), 
     // you can use the `now` paramter which contains the current 
     // animation-position (`0` up to `angle`) 
     $elem.css({ 
      transform: 'rotate(' + now + 'deg)' 
     }); 
    }, 
    complete: function(){ 
     AnimateRotate(360); 
    } 
}); 
} 
AnimateRotate(360); 

UPDATE

旋转每个周期后回：

http://jsfiddle.net/QfeC2/9/

var boolDirection = true; 

function AnimateRotate(angle) { 
// caching the object for performance reasons 
var $elem = $('div'); 

// we use a pseudo object for the animation 
// (starts from `0` to `angle`), you can name it as you want 
$({deg: 0}).animate({deg: angle}, { 
    duration: 2000, 
    step: function(now) { 
     // in the step-callback (that is fired each step of the animation), 
     // you can use the `now` paramter which contains the current 
     // animation-position (`0` up to `angle`) 
     $elem.css({ 
      transform: 'rotate(' + now + 'deg)' 
     }); 
    }, 
    complete: function(){ 
     if(boolDirection) 
     { 
     AnimateRotate(-360); 
      boolDirection = false; 
     } 
     else 
     { 
      AnimateRotate(360); 
      boolDirection=true; 
     } 
    } 
}); 
} 
AnimateRotate(360);