animation-direction

< css‎ | properties
Jump to: navigation, search

animation-direction

This article is Almost Ready.


W3C Working Draft

Summary

Defines whether an animation should run in reverse on some or all cycles.

Overview table

Initial value normal
Applies to All elements, ::before and ::after pseudo-elements.
Inherited No
Media visual
Computed value As specified.
Animatable No
CSS Object Model Property
Percentages N/A

Syntax

  • animation-direction: alternate
  • animation-direction: alternate-reverse
  • animation-direction: normal
  • animation-direction: reverse


Values

normal
All iterations of the animation are played as specified.
reverse
All iterations of the animation are played in the reverse direction from the way they were specified. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.
alternate
The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction, thus reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd).
alternate-reverse
The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction, again reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd).

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
prefix
?
Unknown
10
Yes
12
prefix
12.10
Yes
4.0
prefix
reverse
19
Yes
?
Unknown
10
Yes
?
none
?
none
alternate-reverse
19
Yes
?
Unknown
10
Yes
?
none
?
none

Mobile

FeaturesAndroidChrome for AndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
?
prefix
5.0
prefix
16.0
Yes
?
Unknown
?
Unknown
?
Unknown
reverse
?
none
?
prefix
16.0
Yes
?
Unknown
?
Unknown
?
none
alternate-reverse
?
Unknown
?
prefix
16.0
Yes
?
Unknown
?
Unknown
?
Unknown


Examples

View live exampleA repeating pulse animation that shrinks and dims an element, then restores it. Change the animation-direction from normal to a different keyword value to see the effect.

CSS

div.selected {
    animation-name: pulse;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    from {
        transform : scale(1) translateX(0);
        opacity : 1;
    }
    to {
        transform : scale(0.75) translateX(0);
        opacity : 0.25;
    }
}

Usage

Can also be a comma-separated list of directions, e.g., reverse, normal, alternate, where each direction is applied to the corresponding ordinal position value of the animation-name property.


Related specifications

Specification Status Related Changes
CSS Animations W3C Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Firefox < 15.0 Supports only normal and alternate
Opera 12.0 Supports only normal and alternate
Safari < 6.0 Supports only normal and alternate
Internet Explorer 10.0 The -ms- prefixed property is deprecated and should not be used.

See also

Other articles

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article