CSS3或jQuery动画与给定的步骤 [英] CSS3 or jQuery animation with given step
问题描述
我有一个CSS使淡出效果。
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;
}
它由以下脚本控制:
document.getElementById('mainframe').className = "faded";
不幸的是,CSS中没有参数,设置应该使用哪个步骤,整个动画和Bezier函数(慢,快...)。我在jQuery中寻找它,但jQuery似乎没有这样的参数。
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)?
我需要它来尝试改善iPhone上的平滑度(我假设较小的步长==较高的性能)。
I need it to try to improve smoothness on iPhone (I presume that lesser steps == higher performance).
回答:
推荐答案
看起来您正在寻找css3关键帧动画。
Looks like you're looking for the functionality provided by css3 keyframe animations.
有关详情,请访问以下链接:
More information is available at the following links:
https://developer.mozilla.org/en/CSS/CSS_animations
https://developer.mozilla.org/en/CSS/@keyframes
在webkit浏览器(safari,chrome)和FF5 +中支持。
Supported in webkit browsers (safari, chrome) and FF5+.
这篇关于CSS3或jQuery动画与给定的步骤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!