animation

The 'animation' property allows you to animate elements. While the 'transition' property requires a trigger such as CSS pseudo-classes or JavaScript-driven style changes, the 'animation' property can automatically animate elements without such triggers.

When specifying the 'animation' property, you must also define the animation behavior in '@keyframes' separately from settings like duration.

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: hogeanime1 3s;
	-webkit-animation: hogeanime1 3s;
	-moz-animation: hogeanime1 3s;
	-ms-animation: hogeanime1 3s;
}

@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;}
}

Available Properties

Property	Default	Description
animation-name	none	Specifies the animation name.
animation-duration	0s	Specifies the duration of one animation cycle.
animation-timing-function	ease	Specifies the timing and rate of change for the animation.
animation-delay	0s	Specifies the delay before the animation starts.
animation-iteration-count	1	Specifies the number of animation iterations.
animation-direction	normal	Specifies whether to play the animation in reverse or alternate.
animation-fill-mode	none	Specifies the state before and after playback.

The properties above can be specified together using the 'animation' shorthand, separated by spaces. The order is:

'animation name' (animation-name)
'duration' (animation-duration)
'timing function' (animation-timing-function)
'delay' (animation-delay)
'iteration count' (animation-iteration-count)
'direction' (animation-direction)
'fill mode' (animation-fill-mode)

When a value is omitted, the default value is used.

Since no official documentation was found regarding the exact order for the shorthand, it is recommended to specify all values explicitly in the order listed above.

div {
	animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode;
	-webkit-animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode;
	-moz-animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode;
	-ms-animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode;
}

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;
}
@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+ ○

2 △

Requires '-webkit-' prefix

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 .

Overview

You can create animations. 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;}
}

Here is a sample.

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

The iteration count property repeats the animation for the specified number of times. The available values are a 'number' and 'infinite'. A 'number' repeats the specified number of times, while 'infinite' repeats indefinitely.

animation-iteration-count Property Values

Value	Description
number	Specifies the number of times the animation repeats. (Default is 1)
infinite	Repeats the animation indefinitely.

div.hoge1 {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 3;
	-webkit-animation: hogeanime1 3s 3;
	-moz-animation: hogeanime1 3s 3;
	-ms-animation: hogeanime1 3s 3;
}

div.hoge2 {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
}

@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;}
}

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

animation-direction Property 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.

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite normal;
	-webkit-animation: hogeanime1 3s infinite normal;
	-moz-animation: hogeanime1 3s infinite normal;
	-ms-animation: hogeanime1 3s infinite 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 alternate;
	-webkit-animation: hogeanime1 3s infinite alternate;
	-moz-animation: hogeanime1 3s infinite alternate;
	-ms-animation: hogeanime1 3s infinite 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 reverse;
	-webkit-animation: hogeanime1 3s infinite reverse;
	-moz-animation: hogeanime1 3s infinite reverse;
	-ms-animation: hogeanime1 3s infinite 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 alternate-reverse;
	-webkit-animation: hogeanime1 3s infinite alternate-reverse;
	-moz-animation: hogeanime1 3s infinite alternate-reverse;
	-ms-animation: hogeanime1 3s infinite 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;}
}

The 'animation-delay' property specifies the wait time before the animation starts.

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 2s infinite alternate;
	-webkit-animation: hogeanime1 3s 2s infinite alternate;
	-moz-animation: hogeanime1 3s 2s infinite alternate;
	-ms-animation: hogeanime1 3s 2s infinite 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;}
}

By specifying the 'animation-timing-function' property value, you can change the timing and rate of change for the animation.

animation-timing-function Property Values

Value	Description
ease	Smooths the motion near the start and end. If 'animation-timing-function' is omitted, 'ease' is used as the default.
linear	Changes at a constant speed.
ease-in	Eases the motion near the start.
ease-out	Eases the motion near the end.
ease-in-out	Eases the motion near both the start and end.

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s ease infinite alternate;
	-webkit-animation: hogeanime1 3s ease infinite alternate;
	-moz-animation: hogeanime1 3s ease infinite alternate;
	-ms-animation: hogeanime1 3s ease infinite 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 linear infinite alternate;
	-webkit-animation: hogeanime1 3s linear infinite alternate;
	-moz-animation: hogeanime1 3s linear infinite alternate;
	-ms-animation: hogeanime1 3s linear infinite 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 ease-in infinite alternate;
	-webkit-animation: hogeanime1 3s ease-in infinite alternate;
	-moz-animation: hogeanime1 3s ease-in infinite alternate;
	-ms-animation: hogeanime1 3s ease-in infinite 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 ease-out infinite alternate;
	-webkit-animation: hogeanime1 3s ease-out infinite alternate;
	-moz-animation: hogeanime1 3s ease-out infinite alternate;
	-ms-animation: hogeanime1 3s ease-out infinite 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 ease-in-out infinite alternate;
	-webkit-animation: hogeanime1 3s ease-in-out infinite alternate;
	-moz-animation: hogeanime1 3s ease-in-out infinite alternate;
	-ms-animation: hogeanime1 3s ease-in-out infinite 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;}
}

The 'animation-fill-mode' property specifies the state of the element before and after the animation plays. Note that "before the animation starts" refers to the period during which the animation is delayed by 'animation-delay'.

animation-fill-mode Property Values

Value	Description
none	Does not apply the animation styles before or after the animation plays. This is the default value.
forwards	The state at the end of the animation is maintained. Normally, this is the style specified at '100%' or 'to'. * If reverse playback is set with 'animation-direction', the style at '0%' or 'from' is applied.
backwards	Before the animation plays, the element takes on the first value specified in the animation. Normally, this is the style specified at '0%' or 'from'. * If reverse playback is set with 'animation-direction', the style at '100%' or 'to' is applied.
both	Applies both 'forwards' and 'backwards' behaviors.

Here are the samples. The 'animation-fill-mode' samples set the iteration count to 3, so refresh your browser to see them again.

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 3 none;
	-webkit-animation: hogeanime1 3s 3 none;
	-moz-animation: hogeanime1 3s 3 none;
	-ms-animation: hogeanime1 3s 3 none;
}
@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 3 forwards;
	-webkit-animation: hogeanime1 3s 3 forwards;
	-moz-animation: hogeanime1 3s 3 forwards;
	-ms-animation: hogeanime1 3s 3 forwards;
}
@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: 300px;
	animation: hogeanime1 3s 2s 3 backwards;
	-webkit-animation: hogeanime1 3s 2s 3 backwards;
	-moz-animation: hogeanime1 3s 2s 3 backwards;
	-ms-animation: hogeanime1 3s 2s 3 backwards;
}
@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: 300px;
	animation: hogeanime1 3s 2s 3 both;
	-webkit-animation: hogeanime1 3s 2s 3 both;
	-moz-animation: hogeanime1 3s 2s 3 both;
	-ms-animation: hogeanime1 3s 2s 3 both;
}
@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;}
}

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

Home

CSS Dictionary

animation

Sample Code

Available Properties

Browser Result

Browser Support

Overview

animation-iteration-count Property Values

animation-direction Property Values

animation-timing-function Property Values

animation-fill-mode Property Values