给定步骤的CSS3或jQuery动画

我有一个CSS，使淡出效果。

#mainframe.normal { opacity: 1.0; } #mainframe.faded { opacity: 0.0; } #mainframe { /* Firefox */ -moz-transition-property: opacity; -moz-transition-duration: 3s; /* WebKit */ -webkit-transition-property: opacity; -webkit-transition-duration: 3s; /* Standard */ transition-property: opacity; transition-duration: 3s; } 

它由以下脚本控制：

 document.getElementById('mainframe').className = "faded"; 

不幸的是，CSS中没有参数，它设置了应该使用的步骤，只有整个动画和Bezier函数的总时间（慢，快……）。 我在jQuery中寻找它，但jQuery似乎也没有这样的参数。

有没有办法设置单帧超时（或者，相同，应该使用多少帧）？

我需要它来尝试提高iPhone的平滑度（我认为较小的步骤==更高的性能）。

问候，

Answer 1

看起来您正在寻找css3关键帧动画提供的function。

有关更多信息，请访问以下链接：

https://developer.mozilla.org/en/CSS/CSS_animations

https://developer.mozilla.org/en/CSS/@keyframes

在webkit浏览器（safari，chrome）和FF5 +中受支持。

Answer 2

您可能想要检查一下： Animate.css 。