循环功能，动画CSS旋转

本文介绍了循环功能，动画CSS旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图创建一个为过渡设置动画的函数，然后完成该操作，然后将旋转动画设置为起点，并无限循环.

Im trying to create a function that animate a transition and then once it has done this, animates the rotation back to its starting point and loops this infinitely.

我只有以下几点，我无法使动画正常工作或无法恢复默认设置?

I have the following only I cant get the animation working nor the return to default?

http://jsfiddle.net/QfeC2/

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

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

推荐答案

如果要使用CSS制作动画，为什么不使用纯CSS?您可以将animation属性包装在Class中，然后在JS中切换该类.

If you're animating with css why not using pure CSS?You can wrap the animation property in a Class and toggle that class in 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);}
}

更新了小提琴

这篇关于循环功能，动画CSS旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！