Animation-direction - Property CSS

Syntax diagram of animation-direction.

Description of the animation-direction property.

The property animation-direction defines whether the animation is played in the direction specified by the @keyframes directive or in the reverse direction. If the animation is repeated multiple times, animation-direction can also determine whether the animation should 'ping-pong' back and forth or not.

For a general overview of animations, refer to the page animations in CSS.

Values for animation-direction.

• animation-direction: normal;

  Default value. The animation is played in the direction defined by @keyframes. Here, the animation defined by @keyframes goes from pink (from) to sky blue (to), then abruptly returns to pink when the cycle is finished.

  animation-direction:normal;
• animation-direction: reverse;

  The animation is played in the reverse direction of that defined by @keyframes (starting from the end).

  animation-direction:reverse;
• animation-direction: alternate;

  The animation is played first forwards, then backwards. This assumes that the animation-iteration-count property has been set to a value greater than 1, or to infinite.

  animation-direction:alternate;
• animation-direction: alternate-reverse;

  The animation is played first in reverse, then forward, and so on. As with the previous value, this assumes that the animation-iteration-count property has been set to a value greater than 1, or to infinite.

  animation-direction:alternate-reverse;
• animation-direction: alternate, normal, ...;

  A series of values separated by commas. This syntax can be used when multiple animations have been defined by the animation-name property. For more details on multiple animations, refer to the page on multiple animations.

• animation-direction: initial; (normal) animation-direction: inherit; animation-direction: revert; animation-direction: revertLayer; animation-direction: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the animation-direction property.

No animation is possible for the property animation-direction itself.

Manipulating the animation-direction property programmatically.

Change the value of animation-direction in JavaScript.

In JavaScript, here is how to modify the value of animation-direction for an element el. We can see that JavaScript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with camel-case notation (a capital letter to separate words), which is more common in JavaScript.

let el = document.getElementById('id'); el.style['animation-direction'] = 'reverse, normal'; // or let el = document.getElementById('id'); el.style.animationDirection = 'reverse, normal';

Read again in JavaScript the value of animation-direction.

This code example retrieves the value of the style attribute from the HTML. In other words, the property must have been directly assigned to the element itself using the style attribute, rather than through a CSS selector. Therefore, this code is somewhat the opposite of the previous one.

let el = document.getElementById('id'); let value = el.style['animation-direction']; // or let el = document.getElementById('id'); let value = el.style.animationDirection;

Read the computed value of animation-direction in JavaScript.

The computed value is the one resulting from the evaluation of the cascade of inheritances, or the value assigned directly to the element via a CSS selector, or via its style attribute, or, as a last resort, the initial value of the property, normal in the case of animation-direction). In all cases, the computed value is always defined.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-direction');

Modify the value of the property animation-direction with jQuery.


$('#id').css('animation-direction', 'reverse, normal');
// or
$('#id').css('animationDirection', 'reverse, normal');


Read the computed value of the animation-direction property with JQuery.

let value = $('#id').css('animation-direction');

Other code examples.

Other examples of Javascript and JQuery code are provided on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the property animation-direction and then display either the value as it was applied or the calculated value. In the case of animation-direction, there will be no difference between these two values.

Simulator.

The simulator below uses an animation called demo1 that moves an element horizontally across a large portion of the line. This is done by changing the element's left margin.

Note: The difference between alternate and reverse-alternate is not really noticeable because this would require reloading the page, which resets the property to the normal value. You simply see the rectangle change direction.

Browsers compatibility with animation-direction.

No compatibility issues to report regarding the property animation-direction.

1

Animation
support

2

animation-direction
property

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the animation-direction property.

• CSS Animations Level 1

  This specification introduces changes in property values over time. Animations are similar to transitions, but they do not need an external event to run (JavaScript code, user action, etc.). The different stages of the animation are controlled by an @keyframes at-rule.
  Many parameters can be adjusted when applying an animation: number of repetitions, duration, whether the animation reverses its start and end or not, etc. Each of these parameters corresponds to a property.

  Regarding animation-direction. Introduction of animations in CSS and first definition for animation-direction property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  This level 2 of the specification mainly introduces scroll-driven animations. These are described in a separate module, but there are necessarily interactions with the animation module. In particular, the animation-timeline property is introduced.
  Another property is added: animation-composition, which defines how animations combine when they are applied to the same element.

  Regarding animation-direction. No change to the animation-direction property.
  

  March 02, 2023

  Working Draft.

  

  

  

See also, about animations.

All specifications regarding animations are grouped in the CSS Animations module of the CSS standard (W3C).

Properties:

At-rules: