CSS - animation-iteration-count
animation-iteration-count
animation-iteration-count controls how many times the animation is played
Property Variable Name
animation-iteration-countAvailable Values for animation-iteration-count
1|3|5|infinite|initial|inheritExamples Using animation-iteration-count values
Example using animation-iteration-count 1
Example using animation-iteration-count 1
Here is an example using different animation-iteration-count values
Demo Box 1 Content 1
Code
<style>
.demo-box-1 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-1 .dbs-1 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-1 {
transition: all 0.3s;
position:absolute;
animation: my-animation-1;
animation-duration: 5s;
/*
animation-name: my-animation-1;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:1;
}
</style>
<style>
@keyframes my-animation-1 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count 1</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-1'>
<div class='dbs-1'>Demo Box 1 Content 1</div>
</div>Example using animation-iteration-count 3
Example using animation-iteration-count 3
Here is an example using different animation-iteration-count values
Demo Box 2 Content 1
Code
<style>
.demo-box-2 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-2 .dbs-2 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-2 {
transition: all 0.3s;
position:absolute;
animation: my-animation-2;
animation-duration: 5s;
/*
animation-name: my-animation-2;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:3;
}
</style>
<style>
@keyframes my-animation-2 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count 3</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-2'>
<div class='dbs-2'>Demo Box 2 Content 1</div>
</div>Example using animation-iteration-count 5
Example using animation-iteration-count 5
Here is an example using different animation-iteration-count values
Demo Box 3 Content 1
Code
<style>
.demo-box-3 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-3 .dbs-3 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-3 {
transition: all 0.3s;
position:absolute;
animation: my-animation-3;
animation-duration: 5s;
/*
animation-name: my-animation-3;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:5;
}
</style>
<style>
@keyframes my-animation-3 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count 5</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-3'>
<div class='dbs-3'>Demo Box 3 Content 1</div>
</div>Example using animation-iteration-count infinite
Example using animation-iteration-count infinite
Here is an example using different animation-iteration-count values
Demo Box 4 Content 1
Code
<style>
.demo-box-4 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-4 .dbs-4 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-4 {
transition: all 0.3s;
position:absolute;
animation: my-animation-4;
animation-duration: 5s;
/*
animation-name: my-animation-4;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:infinite;
}
</style>
<style>
@keyframes my-animation-4 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count infinite</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-4'>
<div class='dbs-4'>Demo Box 4 Content 1</div>
</div>Example using animation-iteration-count initial
Example using animation-iteration-count initial
Here is an example using different animation-iteration-count values
Demo Box 5 Content 1
Code
<style>
.demo-box-5 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-5 .dbs-5 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-5 {
transition: all 0.3s;
position:absolute;
animation: my-animation-5;
animation-duration: 5s;
/*
animation-name: my-animation-5;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:initial;
}
</style>
<style>
@keyframes my-animation-5 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count initial</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-5'>
<div class='dbs-5'>Demo Box 5 Content 1</div>
</div>Example using animation-iteration-count inherit
Example using animation-iteration-count inherit
Here is an example using different animation-iteration-count values
Demo Box 6 Content 1
Code
<style>
.demo-box-6 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-6 .dbs-6 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-6 {
transition: all 0.3s;
position:absolute;
animation: my-animation-6;
animation-duration: 5s;
/*
animation-name: my-animation-6;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:inherit;
}
</style>
<style>
@keyframes my-animation-6 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count inherit</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-6'>
<div class='dbs-6'>Demo Box 6 Content 1</div>
</div>replied to animation-iteration-count
Hi! I'd gladly buy your traffic on popunder and push format for a +15% top-up to your CPM. Details below: I am Stepan, Publisher Team Lead at AdBison.com ad-network. Yes, deal is simple. For example if you are earning $100 daily - we guarantee you a minimum of $115 daily. 1. We are looking to buy all geo traffic. 2. We can pay daily. You get your payment by request without hold and KYC. We prefer crypto but pay anywhere. 3. Fast and straightforward statistics (updates every 10 min) in your cabinet. Access to limited ads with high CPM/CPA payouts. We grow performance wise. Important detail. We favor YOUR stat. If your stat, like GA, shows more traffic than you see in our cabinet - it's not your problem. We take the risk on us, so you can feel comfy. Are you interested? Then sign up at: https://platform.adbison.com/link/join Or write me directly: Skype - stepan@adbison.com Telegram - @petrov_sn000
2:49 pm, February 16, 2023 animation