如何在动画循环中连续制作三个div框 [英] How to make the three div boxes in animation loop continuously
本文介绍了如何在动画循环中连续制作三个div框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作三个div（一个在另一个之上），每个包含不同的信息。
然后使用动画我想在短时间内显示每个div的信息（可能是5秒） 。
但是在我的代码中，动画只运行一次并卡在最后一个div（蓝色）。
如何连续循环动画
我尝试了什么：
< ！DOCTYPE html >
< title > 动画
@keyframes ani1 {
从{opacity：1;}
到{opacity：1;}
}
@keyframes ani2 {
from {opacity ：1;}
到{不透明度：1;}
}
@keyframes ani3 {
从{不透明度：1;}
到{不透明度：1;}
}
#mis {
position：absolute;
宽度：200px;
身高：200px;
不透明度：0;
动画：ani1 5s线性0s无限;
background-color：red;
}
#vis {
position：absolute;
宽度：200px;
身高：200px;
不透明度：0;
动画：ani2 5s线性5s无限;
background-color：green;
}
#alum {
position：absolute;
宽度：200px;
身高：200px;
不透明度：0;
动画：ani3 5s线性10s无限;
background-color：blue;
}
< div id = mis > red < / div >
< div id = vis > green < / div >
< div id = alum > blue < / div >
解决方案
你需要一个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.
这篇关于如何在动画循环中连续制作三个div框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
