The animation property

The animation property is a shorthand property for an animation, allowing you to set all properties for animation at once: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

The order does not matter, animation-duration must come before animation-delay. Only animation-name and animation-duration properties are mandatory.

The property can also take the none value, which disables animation completely. This value is the default.

Syntax

selector {
	animation: value;
}

Example

In this example, there will be a delay of 3 seconds before the animation (before each new play), and then the animation will play for 6 seconds:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Example . Possible problems

An animation written in short form may not work due to its name. Let's look at the following animation:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Notice that I use the animation name reverse. At first glance, everything looks fine, but the animation does not work because reverse is a valid keyword for the animation-direction.

Also animation will not work when using short form in the title of other keywords. But everything works fine when using "full" form of description.

The keywords-values of animation-direction that break animations should also include keywords related to anti-aliasing functions, as well as infinite, alternate, running, paused and so on.

The animation property

Syntax

Example

Example . Possible problems

See also