动画文字时长

时间:2018-07-28 19:33:54

标签: css3 css-animations

但是我尝试了很多事情,但是我无法控制动画的持续时间。基本上,我希望每个动画文字显示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>

2 个答案:

答案 0 :(得分:0)

尝试调整animation-delay更长。

答案 1 :(得分:0)

您可以尝试以下方法:

.first()
main_obj.fk_obj_set.all()