title: How to rotate multiple words with CSS?
body: <p>I'm trying to animate a single word using CSS and HTML. I want the word to fade in, stay visible and then fade out and after that, I want to continue with the next word.</p>
  
  <p>I followed this tutorial (<a href="http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations" rel="nofollow">http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations</a>), but the problem is that I am unable to understand how to set the percentage of the duration in the @keyframes animation, because in the tutorial it's just written:</p>
  
  <blockquote>
    <p>Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds. We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation for the first words</p>
  </blockquote>
  
  <p>In my case, my whole animation is 16s long (because I have 4 words * 4s), so 4/16 = 0,25, that's why everything needs to happen before 25%. </p>
  
  <p>Here is my animation code: </p>
  
  <pre><code>@keyframes rotateWord {
      0% { opacity: 0; }
      2% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); }
      5% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);}
      17% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); }
      20% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); }
      80% { opacity: 0; }
      100% { opacity: 0; }
  }
  </code></pre>
  
  <p>Here is a full demo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.rw-words-1 span{
   position: absolute;
   opacity: 0;
   overflow: hidden;
   -webkit-animation: rotateWord 16s linear infinite 0s;
   -ms-animation: rotateWord 16s linear infinite 0s;
   animation: rotateWord 16s linear infinite 0s;
  }
  .rw-words-1 span:nth-child(2) { 
      -webkit-animation-delay: 4s; 
   -ms-animation-delay: 4s; 
   animation-delay: 4s; 
  }
  .rw-words-1 span:nth-child(3) { 
      -webkit-animation-delay: 8s; 
   -ms-animation-delay: 8s; 
   animation-delay: 8s; 
  }
  .rw-words-1 span:nth-child(4) { 
      -webkit-animation-delay: 12s; 
   -ms-animation-delay: 12s; 
   animation-delay: 12s; 
  }
  
  @-webkit-keyframes rotateWord {
      0% { opacity: 0; }
      2% { opacity: 0; -webkit-transform: translateX(0px); }
   5% { opacity: 1; -webkit-transform: translateX(0px);}
      17% { opacity: 1; -webkit-transform: translateX(0px); }
   20% { opacity: 0; -webkit-transform: translateX(0px); }
   80% { opacity: 0; }
      100% { opacity: 0; }
  }
  @-ms-keyframes rotateWord {
      0% { opacity: 0; }
      2% { opacity: 0; -ms-transform: translateX(0px); }
   5% { opacity: 1; -ms-transform: translateX(0px);}
      17% { opacity: 1; -ms-transform: translateX(0px); }
   20% { opacity: 0; -ms-transform: translateX(0px); }
   80% { opacity: 0; }
      100% { opacity: 0; }
  }
  @keyframes rotateWord {
      0% { opacity: 0; }
      2% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); }
   5% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);}
      17% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); }
   20% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); }
   80% { opacity: 0; }
      100% { opacity: 0; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rw-words rw-words-1"&gt;
      &lt;span&gt;Word 1&lt;/span&gt;
      &lt;span&gt;Word 2&lt;/span&gt;
      &lt;span&gt;Word 3&lt;/span&gt;
      &lt;span&gt;Word 4&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/wx8r5kj7/" rel="nofollow">https://jsfiddle.net/wx8r5kj7/</a></p>
  
  <p>So my question is <strong>how to set the percentage of the @keyframes animation correctly</strong>. </p>