CSS3 animation effects

Compared to 3D variants, CSS3 animations have a higher degree of support. The CSS3 animation consists of two parts: the keyframe declaration first, and then the keyframe declaration used in the animation properties.

You can set multiple Keyframe selectors (defined as percentages). You can think of them as points on the timeline.

You can also use keywords: the keyword equivalent to 0% and 100%: Form,to. Only the WebKit kernel browser is not very good for the From and to support. The starting point is typically the state in which this property resides.

The Animation-fill-mode property specifies whether animations are visible before or after the animation is played. None: does not change the default behavior, forwards: When the animation finishes, the last property value is maintained. Backwards: The property value that is applied before the animation begins, within the time specified by Animation-delay. Both: is applied forward and backward.

CSS3 animation effects