循環功能，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);