animation property
Specifies shorthand values that define animation properties for object properties identified in the @keyframes at-rule of the animations-name property.
This property is read/write.
  |
Syntax
animation: [ animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction ] [ , [ animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction ] ] *
Property values
One or more sets of any of the following animation properties. Within each set, properties are space-delimited. Each set is separated by a comma.
- animation-name
-
Value of the animation-name property.
- animation-duration
-
Value of the animation-duration property.
- animation-timing-function
-
Value of the animation-timing-function property.
- animation-delay
-
Value of the animation-delay property.
- animation-iteration-count
-
Value of the animation-iteration-count property.
- animation-direction
-
Value of the animation-direction property.
CSS information
| Applies To | block-level and inline-level elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | (see individual properties) |
Standards information
- CSS Animations Module Level 3, Section 3.9
Remarks
The animation property specifies one or more shorthand values that define all animation properties for a set of corresponding object properties identified in the Cascading Style Sheets (CSS) @keyframes at-rule specified by the animations-name property. However, the animation property does not specify values for the animation-play-state property.
To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.
Do not use the Microsoft vendor prefix ("-ms-") before the CSS animations properties. They are supported unprefixed in Internet Explorer 10 and later.
As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-animation" as an alias for this property.
See also
- a
- abbr
- acronym
- address
- b
- bdo
- big
- blockQuote
- br
- button
- cite
- code
- CSSStyleDeclaration
- currentStyle
- dd
- del
- dfn
- div
- dl
- dt
- em
- fieldSet
- form
- i
- img
- input
- ins
- kbd
- label
- li
- map
- noFrames
- noScript
- object
- ol
- p
- pre
- q
- samp
- script
- select
- small
- span
- strong
- style
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- tr
- tt
- ul
- var
- How to bring your webpage to life with CSS transforms, transitions, and animations
- Internet Explorer 10 Guide for Developers: CSS Animations