# 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.

## See also

- the `@keyframes` at-rule
  that set keyframes for an animation
- a smooth `transition`, representing an animation when hovering over an element

← →
↑
en ru