cssanimation

CSS3 Property animation-fill-mode: What's the difference with "both" and "forwards"


What's the difference with "animation-fill-mode: both" and "animation-fill-mode: forwards"?? In my opinion ,They all retain the computed values set by the last keyframe.Can anybody give me an example?


Solution

  • animation-fill-mode: both combines animation-fill-mode: forwards, and animation-fill-mode: backwards. When animation-fill-mode: backwards is specified, values from the first keyframe in the animation are applied immediately when the animation begins even if there is an animation-delay. If fill-mode: backwards, or both is not specified, then the first keyframe is not applied until after the animation-delay. You can read more in the spec.