但是我尝试了很多事情,但是我无法控制动画的持续时间。基本上,我希望每个动画文字显示2-3秒。我的文字动画太快了。我该如何解决?注意:动画文本的位置并不重要。
.wrapper {
position: absolute;
top: 35%;
left: -4%;
padding: 2em 5em;
color: #000;
font-weight: 700;
font-size: 150%;
}
.wrapper p {
height: 60px;
float: left;
margin-right: 0.3em;
}
.wrapper b {
float: left;
overflow: hidden;
position: relative;
height: 30px;
top: 5px;
}
.wrapper .animationText {
display: inline-block;
color: #ac1101;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
animation: move 7s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
@keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
<div class="wrapper">
<p>Some text here</p>
<b>
<div class="animationText">
anime text 1<br>
anime text 2
</div>
</b>
</div>
答案 0 :(得分:0)
尝试调整animation-delay
更长。
答案 1 :(得分:0)
您可以尝试以下方法:
.first()
main_obj.fk_obj_set.all()