动画完成后隐藏动画文本

Question

我试过一个简单的动画。参见 this fiddle。

HTML:

<div class="special_sec">
  <span class="sub_heading">About Us</span>
  <span class="sub_heading1">Services</span>
  <span class="sub_heading2">Portfolio</span>
  <span class="sub_heading3">Clients</span>
  <span class="sub_heading4">Contact Us</span>
</div>

CSS:

.special_sec span { 
  font-size:30px; 
  list-style:none; 
  text-align:center; 
  padding:10px 0; 
  display:block; 
  animation:subheadinganimation 17s; 
  color: transparent;
}

在我的CSS（.special_sec span）中，我添加了color: transparent。

我的问题是：

如果color是透明的，动画之后所有的文字都会被隐藏。看我的 fiddle.
如果我删除此 color 属性，所有文本最初都是可见的。然后动画也运行。参见 this fiddle。

我希望文本仅在我指定的延迟时间后可见。我不明白这个问题。问题是什么？我该如何解决这个问题？

Answer 1

您需要将 animation-fill-mode 设置为 forwards，以便元素保持动画最后关键帧（即 color: #000）的状态。如果没有此设置，元素将在动画完成后恢复到其原始状态 (color: transparent)。

animation: subheadinganimation 17s forwards;

@keyframes subheadinganimation {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  33%,
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    color: #000;
  }
}
.special_sec span {
  font-size: 30px;
  list-style: none;
  text-align: center;
  padding: 10px 0;
  display: block;
  animation: subheadinganimation 17s forwards;
  color: transparent;
}
span.sub_heading {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
span.sub_heading1 {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
span.sub_heading2 {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
span.sub_heading3 {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
span.sub_heading4 {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="special_sec">
  <span class="sub_heading">About Us</span>
  <span class="sub_heading1">Services</span>
  <span class="sub_heading2">Portfolio</span>
  <span class="sub_heading3">Clients</span>
  <span class="sub_heading4">Contact Us</span>
</div>

动画完成后隐藏动画文本

Animated text gets hidden after completion of the animation

css

keyframe

css-animations