CSS animation-delay Property
To make an animation wait before it begins, give animation-delay a time value.
A negative value works too, and it has the opposite feel: the animation begins as though that much of it had already played.
Example
Here the animation waits 2 seconds before it starts to play:
Prompt
Create a page showing a red 100x100px div that uses CSS animation to move from left to right. Set animation-delay to 2 seconds so the animation starts after a 2 second pause. Use @keyframes to move the div from left:0px to left:250px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Delay</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-delay Property</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>
<div class="box"></div>
</body>
</html>
Negative delay
Playback begins partway in, as though 2 seconds of it had already gone by:
Prompt
Create a page showing a red 100x100px div that uses CSS animation to move from left to right. Set animation-delay to -2s so the animation starts as if it had already been playing for 2 seconds. Use a 4 second animation-duration and @keyframes to move from left:0px to left:250px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Negative Animation Delay</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: -2s;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>Using Negative Delay</h1>
<p>The animation will start as if it had already been playing for 2 seconds:</p>
<div class="box"></div>
</body>
</html>
CSS animation-iteration-count Property
How many times an animation runs is controlled by animation-iteration-count.
Example
Here the animation plays through three times, and then it stops:
Prompt
Create a page showing a red 100x100px div that uses CSS animation to move from left to right. Set animation-iteration-count to 3 so the animation runs 3 times. Use @keyframes to move the div from left:0px to left:250px with a 4 second duration.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Iteration Count</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-iteration-count Property</h1>
<p>The animation will run 3 times before it stops:</p>
<div class="box"></div>
</body>
</html>
Infinite iteration
Setting the value to infinite keeps the animation going forever:
Prompt
Create a page showing a red 100x100px div that uses CSS animation to move from left to right forever. Set animation-iteration-count to infinite. Use @keyframes to move the div from left:0px to left:250px with a 4 second duration.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Animation</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>Infinite Animation</h1>
<p>The animation will run forever:</p>
<div class="box"></div>
</body>
</html>
CSS animation-timing-function Property
An animation's speed curve comes from animation-timing-function, which accepts these values:
ease- the default: a slow start, then fast, then a slow finishlinear- runs at one constant speed throughoutease-in- begins slowlyease-out- finishes slowlyease-in-out- begins and finishes slowlycubic-bezier(n,n,n,n)- your own values, supplied in a cubic-bezier function
Example
A few of the available speed curves appear below:
Prompt
Create a page with five red 100x100px divs stacked vertically, each showing a different animation-timing-function value: linear, ease, ease-in, ease-out, and ease-in-out. All divs animate from left:0px to left:250px with a 4 second duration and infinite iteration count. Label each div with its timing function name.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Timing Function</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-timing-function Property</h1>
<p>The animation-timing-function property specifies the speed curve of the animation:</p>
<p>linear:</p>
<div class="box" id="div1"></div>
<p>ease:</p>
<div class="box" id="div2"></div>
<p>ease-in:</p>
<div class="box" id="div3"></div>
<p>ease-out:</p>
<div class="box" id="div4"></div>
<p>ease-in-out:</p>
<div class="box" id="div5"></div>
</body>
</html>