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

【问题标题】：jQuery Easing and Animation with CSS3 Styles使用 CSS3 样式的 jQuery 缓动和动画
【发布时间】：2013-11-28 23:03:35
【问题描述】：

我有一个从“-1deg”到“1deg”的循环旋转动画，它非常不稳定，因为我只是更改 css，而不是动画。因为如果我正确，你目前无法动画旋转？

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

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

谢谢

【问题讨论】：

您可以在 CSS 中设置旋转动画

标签： jquery css animation rotation

【解决方案1】：

如果可以使用@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

还有更多关于@keyframeshttp://css-tricks.com/snippets/css/keyframe-animation-syntax/的提示

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用两个类。之前和之后。将之后添加到之前，然后使用过渡，例如

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

或者类似的东西。

【讨论】：

【解决方案4】：

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

语法与动画相同，例如：

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

【讨论】：