title: CSS3 animations working in every browser except Chrome
body: <p>Everything works perfectly in all browsers except Chrome. The fade in effects seems to work fine but the <code>floatInCommand</code> animation stutters and makes the Commend (a bootstrap container) lock in place after 1 second. I don't know if I need to add anything else besides "-webkit". I have looked at threads with similar problems and they all fix it by adding "-webkit". </p>
  
  <p></p>
  
  <pre><code>.slide-in {
      -webkit-animation-name: floatInCommend;
      -webkit-animation-duration: 2s;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      -moz-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-direction: normal;
      -webkit-animation-delay: 1.25s;
  }
  @-webkit-keyframes floatInCommend {
      from {
          opacity: 0;
          top: -100%;
      }
      to {
          opacity: 1;
          top: 75;
      }
  }
  
  .slide-in-footer {
      -webkit-animation-name: floatInFooter;
      -webkit-animation-duration: 2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      -moz-animation-fill-mode: both;
      -webkit-animation-direction: normal;
      -webkit-animation-delay: 0.5s;
  }
  @-webkit-keyframes floatInFooter {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }
  
  .slide-in-nav {
      -webkit-animation-name: floatInFooter;
      -webkit-animation-duration: 2s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
      -moz-animation-fill-mode: both;
      -webkit-animation-direction: normal;
      -webkit-animation-delay: 0.5s;
  }
  @-webkit-keyframes floatInNav {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }
  </code></pre>