Specifies one or more shorthand values that define all animation properties (except animation-play-state) for a set of corresponding object properties identified in the Cascading Style Sheets (CSS) @keyframes at-rule specified by 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
Do not use the Microsoft vendor prefix ("-ms-") before the CSS animations properties. They are supported unprefixed in Internet Explorer 10 and later.
To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.
See also
- CSSStyleDeclaration
- currentStyle
- style
- a
- abbr
- acronym
- b
- bdo
- big
- br
- cite
- code
- dfn
- em
- i
- img
- input
- kbd
- label
- q
- samp
- select
- small
- span
- strong
- sub
- sup
- textArea
- tt
- var
- address
- blockQuote
- div
- dl
- fieldSet
- form
- noFrames
- noScript
- ol
- p
- pre
- table
- ul
- dd
- dt
- li
- tBody
- td
- tFoot
- th
- tHead
- tr
- button
- del
- ins
- map
- object
- script
- How to bring your webpage to life with CSS transforms, transitions, and animations
- Internet Explorer 10 Guide for Developers: CSS Animations
Send comments about this topic to Microsoft
Build date: 11/29/2012

