CSS文字动画，替换文字 [英] CSS Text Animation, replace text

问题描述

我在要重建的网站上找到了一个很酷，非常简单的文字动画。这是链接（动画在页面的页脚中）： http：//www.motherbird .com.au / process /
我还不熟悉CSS动画，但是到目前为止，我已经做到了：

I found a cool, very simple text animation on a website that I would like to rebuild. Here is the link (the animation is in the footer of the page): http://www.motherbird.com.au/process/ I'm not familiar with CSS animations yet, but I've managed that so far:

.animated{
  display: inline;
  text-indent: 8px;
}

.animated span{
  animation: topToBottom 5s  infinite 0s;
  -ms-animation: topToBottom 5s  infinite 0s;
  -webkit-animation: topToBottom 5s  infinite 0s;
  color: red;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.animated span:nth-child(2){
  animation-delay: 1s;
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.animated span:nth-child(3){
  animation-delay: 2s;
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.animated span:nth-child(4){
  animation-delay: 3s;
  -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.animated span:nth-child(5){
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

@-webkit-keyframes topToBottom{
  0% { opacity: 0; }
  25% { opacity: 0;  }
  50% { opacity: 0;  }
  75% { opacity: 0;  }
  100% { opacity: 1; }
}

<h2>CSS Animations are
  <div class="animated">
    <span>cool.</span>
    <span>neat.</span>
    <span>awesome.</span>
    <span>groovy.</span>
    <span>magic.</span>
  </div>
</h2>

我该如何使过渡不褪色？

How do I make the transition without fade?

感谢您的帮助！

推荐答案

由于 animation-duration 花费 5s ，占整个持续时间 100％ >，并且您有五个 spans 或单词，因此每个时间跨度在1秒或 20％的时间内可见，然后一直隐藏到结束。基于此，您需要调整 @keyframes 内的％以符合标准并获得所需的结果：

Since the animation-duration takes 5s, which represents 100% of the whole duration, and you have five spans or words, therefore each span will be visible for 1s or 20% of the time, then hidden until the end. Based on that you need to adjust the %'s inside the @keyframes to met the criteria and achieve the desired result:

.animated {
  text-indent: 8px;
}

.animated span {
  color: red;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  -ms-animation: topToBottom 5s infinite;
  -webkit-animation: topToBottom 5s infinite;
  animation: topToBottom 5s infinite;
}

.animated span:nth-child(2){
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated span:nth-child(3){
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated span:nth-child(4){
  -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated span:nth-child(5){
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}


@-webkit-keyframes topToBottom {
  0%, 20% {opacity: 1} /* visible for 1s */
  20.01%, 100% {opacity: 0} /* hidden for 4s */
}

<h2 class="animated">
  CSS Animations are
  <span>cool.</span>
  <span>neat.</span>
  <span>awesome.</span>
  <span>groovy.</span>
  <span>magic.</span>
</h2>

关键帧之间的差异只有 .01％可以确保没有褪色效果。

Just .01% of a difference between the keyframes makes sure there is no fading effect.

这篇关于CSS文字动画，替换文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！