How to make the three div boxes in animation loop continuously

Question

0.00/5 (No votes)

See more:

I am trying to make three divs(one above another), each containing different information.
Then using animation I want to display information of each div for short amount of time(probably 5 seconds).
But in my code, the animation runs only once and gets stuck at the last div(blue colour).
How to loop the animation continuously

What I have tried:

HTML

<!DOCTYPE html>


<title>animation



@keyframes ani1{
from{opacity:1;}
to{opacity:1;}
}

@keyframes ani2{
from{opacity:1;}
to{opacity:1;}
}

@keyframes ani3{
from{opacity:1;}
to{opacity:1;}
}

#mis{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani1 5s linear 0s infinite;
background-color:red;
}

#vis{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani2 5s linear 5s infinite;
background-color:green;
}

#alum{
position:absolute;
width:200px;
height:200px;
opacity:0;
animation:ani3 5s linear 10s infinite;
background-color:blue;
}




<div id="mis">red</div>
<div id="vis">green</div>
<div id="alum">blue</div>

Posted 28-Jul-17 7:49am

anadi sankritya

Updated 30-Jul-17 9:12am

v6

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter_in_2780 · Answer 1 · 2017-07-28T21:27:00

Solution 1

You need a FIFTH property to animation: which specifies a repeat count for the animation. the default is 1. Read up on animation here[^]

Quoting from the link above,
"The animation property is a shorthand property for eight of the animation properties:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
"
Iteration-count is the FIFTH property.

Posted 28-Jul-17 21:27pm

Peter_in_2780

Updated 29-Jul-17 19:16pm

v2

Comments

anadi sankritya 29-Jul-17 10:39am

but I already have set the animation-iteration-count to infinite
shouldn't that work?

Peter_in_2780 30-Jul-17 1:17am

No you didn't! Have a careful look at your code and my updated solution.

anadi sankritya 30-Jul-17 15:13pm

can you please check my code now
it still isn't working?

Peter_in_2780 31-Jul-17 3:23am

For one thing, your keyframes "from" and "to" are the same, so there is no transition.

anadi sankritya 1-Aug-17 1:14am

I tried from opacity:0.5 to opacity:1
the result was still the same.animation ran only once