Solutions with CSS properties
In the following example, there is a <div> element with a class of “animation”.
First of all, we add @keyframes (we use -webkit- and -moz- prefixes with @keyframes). For our @keyframes, we use percentages and specify the top, left, and background properties at 0%, 40%, and 100%.
Then, we style the “animation” class by setting its width and height and adding the position property with its “relative” value. We specify the delay (5s) through the animation property and set the animation-fill-mode property to its “none” value.
Example of delaying an animation with the animation and animation-fill-mode properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@-webkit-keyframes background {
0% {
top: 0;
left: 0;
background: #5bd97d;
}
40% {
top: 100px;
left: 50px;
background: pink;
}
100% {
top: 50px;
left: 50px;
background: purple;
}
}
@-moz-keyframes background {
0% {
top: 0;
left: 0;
background: #5bd97d;
}
40% {
top: 100px;
left: 150px;
background: pink;
}
100% {
top: 50px;
left: 50px;
background: purple;
}
}
@keyframes background {
0% {
top: 0;
left: 0;
background: #5bd97d;
}
40% {
top: 100px;
left: 150px;
background: pink;
}
100% {
top: 50px;
left: 100px;
background: purple;
}
}
.animation {
height: 100px;
width: 100px;
position: relative;
-webkit-animation: background 5s infinite;
-moz-animation: background 5s infinite;
animation: background 5s infinite;
animation-fill-mode: none;
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>In the next type of example, we use the “from” and “to” keywords with @keyframes instead of percentages and specify the opacity at the starting and ending points of the animation. Here, we set the animation-fill-mode property to its “forwards” value.
Example of creating an animation with a delay:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#animation1 {
height: 120px;
width: 120px;
background: #5bd97d;
opacity: 0;
-webkit-animation: fadein 1s ease-in alternate;
-moz-animation: fadein 1s ease-in alternate;
animation: fadein 1s ease-in alternate;
animation-delay: 1s;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div id="animation1"></div>
</body>
</html>The animation-fill-mode property is used to set a style for an element when the animation is not playing. Its “forwards” value here is used to specify that the element must keep the style values that are set by the last keyframe.