animation-direction

You can specify whether to play the animation in reverse or alternate between forward and reverse playback.

If no 'animation-direction' value is specified, the animation repeats from '0%' to '100%' as defined in '@keyframes'. By specifying 'animation-direction', you can reverse the animation direction (100% to 0%) or alternate the direction on odd and even iterations.

Depending on the browser version, vendor prefixes such as 'webkit', 'moz', 'ms', etc. may be required for this property to work. It is recommended to include vendor prefixes when using this property. Also note that animations may stutter on lower-spec PCs.

Sample Code

div {
	animation-direction: normal;
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-ms-animation-direction: normal;
}

animation-direction Values

Value	Description
normal	Animates in the normal direction (0% to 100%). This is the default value.
alternate	Animates in the normal direction (0% to 100%) on odd iterations, and in reverse (100% to 0%) on even iterations.
reverse	Animates in reverse (100% to 0%).
alternate-reverse	Animates in the normal direction (0% to 100%) on even iterations, and in reverse (100% to 0%) on odd iterations.

Browser Result

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: normal;
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-ms-animation-direction: normal;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-ms-animation-direction: alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: reverse;
	-webkit-animation-direction: reverse;
	-moz-animation-direction: reverse;
	-ms-animation-direction: reverse;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: alternate-reverse;
	-webkit-animation-direction: alternate-reverse;
	-moz-animation-direction: alternate-reverse;
	-ms-animation-direction: alternate-reverse;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

Browser Support

Desktop

Chrome

43+ ○

42 △

41 △

40 △

39 △

38 △

37 △

36 △

35 △

Requires '-webkit-' prefix

2 and earlier ×

Firefox

16+ ○

15 △

14 △

13 △

12 △

11 △

10 △

9 △

8 △

Requires '-moz-' prefix

4 and earlier ×

Safari

9+ ○

8 △

7 △

6 △

5 △

4 △

Requires '-webkit-' prefix

3 and earlier ×

Edge

12+ ○

Supported in all versions.

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

30+ ○

29 △

28 △

27 △

26 △

25 △

24 △

23 △

22 △

Requires '-webkit-' prefix

29 △

28 △

27 △

26 △

25 △

24 △

23 △

22 △

Requires '-o-' prefix

11 and earlier ×

Mobile

iOS Safari

9+ ○

8 △

7 △

6 △

5 △

4 △

Requires '-webkit-' prefix

2 and earlier ×

Android Browser

43+ ○

4.4 △

Requires '-webkit-' prefix

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop version.

Firefox Android

Latest ○

Same support as desktop version.

* Version information is based on MDN / Can I Use .

When using the 'animation' property, you must also define '@keyframes' separately. Please note that the animation will not work without '@keyframes'.

To write '@keyframes', write '@keyframes' followed by an arbitrary 'animation name', then enclose the content in '{}'. Inside, define property changes according to the progress state between '0%' and '100%'. '0%' represents the start and '100%' represents the end. You can also use 'from' instead of '0%' and 'to' instead of '100%', but using '%' is more common.

/* Enclose the content in '{}' and define the timing and state of changes inside. */
@keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}

If you find any errors or copyright issues, please contact us.

Home

CSS Dictionary

animation-direction

Sample Code

animation-direction Values

Browser Result

Browser Support