Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

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

css-apisrc/animation/App.tsx
Preview

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

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 valueanimation-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 toall elements
Inheritedno
Animatableno

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

See also

Compatibility

Loading...

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.