# animation-delay property

The `animation-delay` property sets a delay before an animation starts.

## Syntax

`selector { animation-delay: time in s or ms; }`

## Values

Value | Description
--- | ---
`s` | Specifies a time in seconds (e.g. `3s`).
`ms` | Specifies a time in milliseconds (e.g. `3ms`). One second is `1000` milliseconds.

Default value: `0s`.

## Example

In this example, there will be the delay of `3` seconds before an animation starts:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { animation-delay: 3s; animation-duration: 6s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## See also

- the `animation-name` property
  that sets an animation name
- the `animation-duration` property
  that sets an animation duration
- the `animation-timing-function` property
  that sets an animation speed
- the `animation-iteration-count` property
  that specifies a number of animation iterations
- the `animation-direction` property
  that sets an animation direction
- the `animation-fill-mode` property
  that sets the animation mode
- the `animation-play-state` property
  that allows you to pause an animation
- the `animation` property
  that is a shorthand for animation
- the `@keyframes` at-rule
  that set keyframes for an animation
- a smooth `transition`, representing an animation when hovering over an element

← →
↑
en ru