Question

我正在尝试编写此文本动画效果（please see video），但我离解决方案还很远！

你能帮帮我吗？使用js可能更好吗？

h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}

@keyframes fadeinone {
  0% {
    opacity: 0;
  }
  33% { /* 3s for fade in */
    opacity: 1;
  }

}

@keyframes fadeintwo {
  0% {
    opacity: 0;
  }

  66% { /* 3s for fade in */
    opacity: 1;
  }
}

@keyframes fadeinthree{
  0% {
    opacity: 0;
  }

  100% { /* 3s for fade in */
    opacity: 1;
  }
}

#claim h1 {

font-size: 40px;
line-height:40px; 
margin:0px;
padding:0px;
color:#FFF;
}

#claim {background-color:red;}

<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>

Answer 1

我认为您正在寻找animation-delay属性。这有点单调乏味，因为你必须将每行的每个字母分成它自己的元素（在这种情况下我使用span），然后你必须手动为每个span分配自己的延迟，但效果与您提供的效果相符。

此外，通过使用此方法，您只需要一组关键帧，因为您将使用延迟来确定动画的开始时间，而不是使用多个动画的百分比。

＆＃13;

div span
{
  opacity: 0;
  animation-name: fadein;
  animation-duration: 3s;
  animation-fill-mode:forwards;
}

div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}

@keyframes fadein
{
  0%{opacity: 0}
  100%{opacity:1}
}

＆＃13;

<div>
  <span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>

＆＃13;

当然，你可以用Javascript做到这一点，解决方案可能更优雅，更容易修改;但是，那么你必须处理兼容性问题。只要有可能，只要坚持使用严格的CSS，你就会变得更好。

@keyframes动画文字褪色和闪耀

1 个答案: