animation-delay
Quick Summary for animation-delay
The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
Code Usage for animation-delay
/* Single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms;  /* Multiple animations */ animation-delay: 2.1s, 480ms;  /* Global values */ animation-delay: inherit; animation-delay: initial; animation-delay: revert; animation-delay: unset; 
More Details for animation-delay

animation-delay

The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Syntax

/* Single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms;  /* Multiple animations */ animation-delay: 2.1s, 480ms;  /* Global values */ animation-delay: inherit; animation-delay: initial; animation-delay: revert; animation-delay: unset; 

Values

<time>

The time offset, from the moment at which the animation is applied to the element, at which the animation should begin. This may be specified in either seconds (s) or milliseconds (ms). The unit is required.

A positive value indicates that the animation should begin after the specified amount of time has elapsed. A value of 0s, which is the default, indicates that the animation should begin as soon as it's applied.

A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence. If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.

Note: When you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.

Formal definition

Initial value0s
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

<time>#

Examples

The animation has a delay of 2 seconds

HTML
<div class="box"></div> 
CSS
.box {   background-color: rebeccapurple;   border-radius: 10px;   width: 100px;   height: 100px;   animation-name: rotate;   animation-duration: 0.7s;   animation-delay: 2s; }  @keyframes rotate {   0% {     transform: rotate(0);   }   100% {     transform: rotate(360deg);   } } 
Result

See CSS animations for examples.

Specifications

Specification
CSS Animations Level 2 # animation-delay

See also

Using CSS animations JavaScript AnimationEvent API Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
The problem with hoarding is you end up living off your reserves. Eventually, you’ll become stale. If you give away everything you have, you are left with nothing. This forces you to look, to be aware, to replenish. . . . Somehow the more you give away, the more comes back to you.
Paul Arden
Random CSS Property

scroll-snap-type

The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
scroll-snap-type css reference