title: Changing words animation but position keeps changing
body: <p>I'm trying to animate the second part of the sentence to change words. div box is the non-changing part, and div word is the changing part. Even though in every guide I've read, it says defining position as absolute and hiding overflow will fix the starting position of second part of the sentence, it still keeps changing. Here's my CSS:</p>
  
  <pre><code>body
  {
      margin: 0;
      padding: 0;
      background: #B4B8AB;
  }
  .box
  {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 3em;
      font-family: arial;
      color: #fff;
      margin-left: 150px;
      width: calc(100% - 50px)
      text-shadow: 0 2px 2px rgba(0,0,0,.5);
  }
  .word
  {
      display: inline-block;
      color: #e65c00;
  }
  .word span
  {
      position: aboslute;
      top: 0;
      overflow: hidden;
      animation: animate 12s linear infinite 0s;
      opacity: 0;
  }
  @keyframes animate
  {
      0%
      {
          opacity: 0;
          transform: translateY(-50px);
      }
      2%
      {
          opacity: 1;
          transform: translateY(0px);
      }
      15%
      {
          opacity: 1;
          transform: translateY(0px);
      }
      20%
      {
          opacity: 0;
          transform: translateY(50px);
      }    
      80%
      {
          opacity: 0;
          transform: translateY(50px);
      }
      100%
      {
          opacity: 0;
          transform: translateY(50px);
      }
  }
  .word span:nth-child(1)
  {
      animation-delay: 0s;
  }
  .word span:nth-child(2)
  {
      animation-delay: 2s;
  }
  .word span:nth-child(3)
  {
      animation-delay: 4s;
  }
  .word span:nth-child(4)
  {
      animation-delay: 6s;
  }
  .word span:nth-child(5)
  {
      animation-delay: 8s;
  }
  .word span:nth-child(6)
  {
      animation-delay: 10s;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Tickets&lt;/title&gt;
          &lt;link rel="stylesheet" href="homepage.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="menu"&gt;
              &lt;div class="logo"&gt;
                  &lt;nav&gt;
                  &lt;a href="/"&gt;&lt;img src="../images/mylogo.png" height="30" width="156" /&gt;&lt;/a&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="box"&gt;
              Sick of&amp;nbsp;
              &lt;div class="word"&gt;
                  &lt;span&gt;wasting your time and money?&lt;/span&gt;
                  &lt;span&gt;unreliable Ubers?&lt;/span&gt;
                  &lt;span&gt;being stuck in traffic?&lt;/span&gt;
                  &lt;span&gt;waiting in line?&lt;/span&gt;
                  &lt;span&gt;sold out tickets?&lt;/span&gt;
                  &lt;span&gt;logistical nightmares?&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>