title: CSS Move Animation not working in FF or IE, I have all the vendor prefixes and have researched for days
body: <p>I have been researching this for days on Google and stackoverflow. Nothing seems to help and I believe I have every vendor prefix necessary as well as all of the correct code. I have even had other developers look at this for me and they believed it looked correct. I am attempting a Move Animation for a text scroll using CSS Animation. I'm not sure if I am missing something obvious, have a typo or if it is just not possible to get this to work on FF and IE. It works fine on Chrome and in Safari. Please go easy on me, I am pretty new at this and this is my first SO question. I have seriously spent at least 6-8 hours researching and attempting to figure out what I am doing wrong with no luck. I was able to make some tweaks that were recommended, but nothing made it work for me in FF or IE.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Special+Elite"&gt;
  
  &lt;div class="text-scroll"&gt;
    &lt;p&gt;I'm a&lt;/p&gt;
    &lt;div class="scrolling-words"&gt;
      &lt;p&gt;front end engineer.&lt;/p&gt;
      &lt;p&gt;curious creator.&lt;/p&gt;
      &lt;p&gt;knowledge junkie.&lt;/p&gt;
      &lt;p&gt;collaborator.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>body {
  background: url('http://subtlepatterns.com/patterns/notebook.png');
  }
  
  * {
  font-family: "Special Elite", cursive;
  }
  
  /*******************************
  ROLLING TEXT KEYFRAME
  ********************************/
  
  .text-scroll p {
  height: 20px;
  float: left;
  white-space: nowrap;
  position: relative;
  font-size: 43px;
  font-weight: bold;
  margin-top: 22%;
  }
  
  .text-scroll {
  max-height: 50px;
  max-width: 586px;
  margin: 0 auto;
  padding-left: 15%;
  float: left;
  }
  
  .scrolling-words {
  overflow: hidden;
  height: 54px;
  padding-left: 15px;
  margin-top: 21%;
  }
  
  .scrolling-words p {
  margin: 0 0 30px;
  padding-top: 5px;
  white-space: nowrap;
  -webkit-animation: move 8s 1s infinite;
  -moz-animation: move 8s 1s infinite;
  -o-animation: move 8s 1s infinite;
  animation: move 8s 1s infinite;
  font-size: 43px;
  letter-spacing: 1px;
  }
  
  @-moz-keyframes move {
  0%  { top:  0px;   }
  20% { top: -56px;  }
  40% { top: -110px; }
  60% { top: -167px; }
  80% { top: -175px; }
  80% { top: -0px;   }
  }
  
  @-o-keyframes move {
  0%  { top:  0px;   }
  20% { top: -56px;  }
  40% { top: -110px; }
  60% { top: -167px; }
  80% { top: -175px; }
  80% { top: -0px;   }
  }
  
  @-webkit-keyframes move {
  0%  { top:  0px;   }
  20% { top: -56px;  }
  40% { top: -110px; }
  60% { top: -167px; }
  80% { top: -175px; }
  80% { top: -0px;   }
  }
  
  @keyframes move {
  0%  { top:  0px;   }
  20% { top: -56px;  }
  40% { top: -110px; }
  60% { top: -167px; }
  80% { top: -175px; }
  80% { top: -0px;   }
  }
  /*******************************/
  </code></pre>
  
  <p>Thank you to anyone who helps. I have my code available in CodePen as well, here: <a href="http://codepen.io/raveve/pen/NPmPRP" rel="nofollow">http://codepen.io/raveve/pen/NPmPRP</a></p>