CSS animation-delay Property

The animation-delay property delays the animation before it starts.

Its value is defined in seconds (s) or milliseconds (ms).

Example

#

This animation starts after a 5-second animation-delay.

<style> 
  .animate {
    width: 80px;
    height: 80px;
    background: steelblue;
    position: relative;
    animation: translateAnimation 2s infinite;
    animation-delay: 5s;
  }

  @keyframes translateAnimation {
    from { transform: none; }
    to { transform: translateX(250%); }
  }
</style>

<div class="animate"></div>

Syntax

animation-delay: time | initial | inherit;

Values

#

Value Description
time Number of seconds (with 's' suffix) or milliseconds (with 'ms' suffix) to wait before animation starts. It also accepts a negative value which is treated as if the animation has been playing for n seconds or milliseconds already.
initial Sets to the default value.
inherit Inherit value from the parent element.

Browser support

This table shows when animation-delay support started for each browser.

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like

Guides