CSS3 or jQuery animation with given step

问题

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,

回答1:

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

Supported in webkit browsers (safari, chrome) and FF5+.

回答2:

You might want to check this out: Animate.css.

来源：https://stackoverflow.com/questions/7806362/css3-or-jquery-animation-with-given-step