description & Usage
The animation property is a short value for the properties:
- animation-name.
- animation-duration.
- animation-timing-function.
- animation-delay.
- animation-iteration-count.
- animation-direction.
- animation-fill-mode.
- animation-play-state.
is.
Note: Always use the animation-duration property because otherwise the duration will be set to 0 and the animation will not run.
Informations
| # | Description |
|---|---|
| Default Value | none 0 ease 0 1 normal none running |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.animation="pnlmove 3s infinite" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the animation property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animation |
Syntax
Values
| Values | Description |
|---|---|
| animation-name | Specifies the name of an animation. |
| animation-duration | Specifies the running time of an animation machine. |
| animation-timing-function | Determines the speed of an animation. |
| nimation-delay | Specifies the time delay that should be applied before an animation starts playing. |
| animation-iteration-count | Determines the number of times an animation will run. |
| animation-direction | Determines whether the animation will run in reverse in the specified cycles. |
| animation-fill-mode | Determines what values are rendered by the animation without runtime. |
| animation-play-state | Determines whether the animation is running or not moving. |
| initial | Adds this value to its default property. |
| inherit | It inherits this value from its parent tag. |
Related Pages
CSS tutorial: CSS animations
HTML DOM Reference: Animation property
