给定步骤的 CSS3 或 jQuery 动画

发布于 2024-12-10 19:12:09 字数 691 浏览 0 评论 0原文

我有一个 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 上的流畅度（我认为更少的步骤 == 更高的性能）。

问候，

原文

I have a CSS that makes fading out effect.

#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;
}

It is controlled by the following script:

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

Unfortunately, there is no parameter in CSS, that sets what step should be used, only total time of the whole animation and Bezier function (slow, fast...). I was looking for it in jQuery, but jQuery seems to have no such parameter as well.

Is there a way to set a single frame timeout (or, that is the same, how many frames should be used)?

I need it to try to improve smoothness on iPhone (I presume that lesser steps == higher performance).

Regards,

分享到QQ

分享到微博