Animated text gets hidden after completion of the animation

Question

I had tried a simple animation. See 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;
}

In my CSS (.special_sec span), I have added color: transparent.

My problem is:

1. If color is transparent, after the animation all the text are getting hidden. See my fiddle.
2. If I remove this color property, all the text are initially visible. Then the animation also runs. See this fiddle.

I want the text to be visible only after the delay timings that I have given. I can't understand the problem. What is the issue? How can I fix this?

Answer 1

You need to set the animation-fill-mode as forwards so that the element would hold the state as at the final keyframe of the animation (which is color: #000). Without this setting, the element reverts back to its original state (color: transparent) after the animation is complete.

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>