jquery - 给定步骤的 CSS3 或 jQuery 动画

Question

我有一个可以实现淡出效果的 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 中没有参数来设置应该使用哪个步骤，只有整个动画的总时间和贝塞尔函数(慢、快......)。我在jQuery中寻找它，但jQuery似乎也没有这样的参数。

有没有办法设置单帧超时(或者，同样的，应该使用多少帧)？

我需要它来尝试提高 iPhone 上的流畅度(我认为更少的步骤 == 更高的性能)。

问候，

Answer 1

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

更多信息请访问以下链接:

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

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

支持 webkit 浏览器(safari、chrome)和 FF5+。