The approach of this article is to play the animation exactly two times by using the animation-iteration-count property in CSS. It is used to specify the number of times the animation will be repeated. It can specify as infinite to repeat the animation indefinitely.
Syntax:
animation-iteration-count: number | infinite | initial | inherit;
Example: Below code used to change the background color of <h2> element from red to blue.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
font-size: 40px;
text-align:center;
font-weight:bold;
color:#090;
padding-bottom:5px;
font-family:Times New Roman;
}
.geeks1 {
font-size:17px;
font-weight:bold;
text-align:center;
font-family:Times New Roman;
}
#one {
animation-name: example;
animation-duration: 2s;
/* Animation will be repeated twice */
animation-iteration-count: 2;
}
@keyframes example {
from {
background-color: red;
}
to {
background-color: blue
}
}
</style>
</head>
<body>
<div class = "geeks">
GeeksforGeeks
</div>
<div class = "geeks1">
A computer science portal for geeks
</div>
<h2 id="one">
How to play the animation
two times using CSS?
</h2>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Sep, 2020
Like Article
Save Article