jQuery放松与动画与CSS3风格

Question

我有一个循环旋转动画，从'-1deg‘到’1 1deg‘，这是一个非常不稳定的，因为我只是改变css，而不是动画。因为如果我是正确的，你目前不能动画旋转？

有任何方法我可以使用宽松或我错误的动画css旋转？

jQuery('.foo').css('transform','rotate(-1deg)');
jQuery('.foo').css('transform','rotate(1deg)');

谢谢

Answer 1

用两门课。之前和之后。将“后”添加到前面，然后使用“转换”。

.before{
color: blue;
}

.after{
color: red;
-moz-transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}

然后在前面的元素上：

<element class="before"></element>

后面的元素：

<element class="before after"></element>

或者类似的东西。

Answer 2

我不想提供插件解决方案，但这个解决方案非常简洁：http://ricostacruz.com/jquery.transit/

语法与动画相同(如：

$('.box').transition({ rotate: '45deg' }, 1000, 'ease-in');

Answer 3

如果您可以将@keyframes动画与css结合使用：

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

您可以在这里看到一个例子，http://jsfiddle.net/NBS7p/6/。

兼容性http://caniuse.com/css-animation

以及关于@keyframes http://css-tricks.com/snippets/css/keyframe-animation-syntax/的更多提示