animation

Introduction

The animation property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Examples

Syntax

/* @keyframes name | duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state*/
animation: slidein 3s ease-in 1s 2 reverse both paused;

/* @keyframes name | duration | timing-function | delay */
animation: slidein 3s linear 1s;

/* @keyframes name | duration */
animation: slidein 3s;

/* Multiple animations */
animation:
  slidein 3s ease-in 1s 2 reverse both paused,
  ani_scale 3s linear 1s;

Caution

When writing CSS @keyframes, it is recommended not to omit the values for the 0% (or from) stage and 100% (or to) stage. If the start and end stage values are not specified, we will use the node's current property value. Due to system limitations, the transform property on Android systems may have issues.

Formal definition

Initial value	animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-iteration-count: 1 animation-direction: normal animation-fill-mode: none animation-play-state: running
Applies to	all elements
Inherited	no
Animatable	no

Formal syntax

Animation can specify multiple sets of animations. Properties within each set of animations are separated by spaces, and sets of animations are separated by commas.

animation: <animation-name> || <animation-duration> ||
  <animation-timing-function> || <animation-delay> ||
  <animation-iteration-count> || <animation-direction> || <animation-fill-mode>
  || <animation-play-state>;

Animation events

Animation Event

Compatibility

LCD tables only load in the browser

#animation

#Introduction

#Examples

#Syntax

#Caution

#Formal definition

#Formal syntax

#Animation events

#See also

#Compatibility

animation

Introduction

Examples

Syntax

Caution

Formal definition

Formal syntax

Animation events

See also

Compatibility