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