Question

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

我有什么方法可以使用缓动，或者我对动画css旋转有误？

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

感谢

Answer 1

使用两个班级。之前和之后。将after添加到之前，然后使用转换，例如

.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/

的更多提示

Answer 4

尝试使用CSS animation：

@-webkit-keyframes sway {
    0% {
        -webkit-transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(1deg);
    }
}

.foo {
    -webkit-animation: sway 500ms ease-in-out infinite alternate;
}

以下是一个有效的例子：http://jsfiddle.net/SMPKd/1/

使用CSS3样式的jQuery缓动和动画

4 个答案: