动画完成后隐藏动画文本答案

【问题标题】：Animated text gets hidden after completion of the animation动画完成后隐藏动画文本
【发布时间】：2015-06-18 12:36:41
【问题描述】：

我尝试了一个简单的动画。见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 是透明的，则动画后所有文本都将被隐藏。看看我的小提琴。
如果我删除这个color 属性，所有文本最初都是可见的。然后动画也运行。见this fiddle。

我希望文本仅在我给出的延迟时间之后才可见。我无法理解这个问题。问题是什么？我该如何解决这个问题？

【问题讨论】：

标签： css css-animations keyframe

【解决方案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>

【讨论】：