分享程序员开发的那些事...
更新时间：2022-10-21 19:05:28
你需要一个FIFTH属性animation：，它指定动画的重复次数。默认为1.阅读动画此处 [ ^ ]
从上面的链接引用，
动画属性是八个动画属性的速记属性：
动画名称
动画 - 持续时间
动画定时功能
动画延迟
动画迭代计数
动画方向
动画填充模式
动画播放状态
迭代计数是第五属性。
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:
<!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>
You need a FIFTH property toanimation: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.