Specifies the direction of play for an animation cycle.
This property is read/write.
  |
Syntax
animation-direction: [ normal | alternate | reverse | alternate-reverse ] [ , [ normal | alternate | reverse | alternate-reverse ] ] *
Property values
One or more direction keywords, separated by commas.
normal-
Initial value. The animation is played in the forward direction.
reverse-
The animation cycles are played in the reverse direction of the direction in which they were specified.
alternate-
The animation cycles alternate between playing in the forward direction (odd iterations) and the reverse direction (even iterations).
alternate-reverse-
The animation cycles alternate between playing in the reverse direction (odd iterations) and the forward direction (even iterations).
CSS information
| Applies To | block-level and inline-level elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | normal |
Standards information
- CSS Animations Module Level 3, Section 3.6
Remarks
Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (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
