CSS Anim Test

by Will Stott

HTML

<head>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
      }
      
      to {
        margin-left:0%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
      }
      
      to {
        margin-left:0%;
      }
    }

  </style>
</head>
<body>
  <h1>
      <div align="center">
    <img src="http://i.imgur.com/cvxml.jpg" alt="Swarming Dead In Development" />
    <a rel="nofollow" href="http://www.kongregate.com/games/FibreFilmsGames/grass-watcher-3d" target="_blank">
        <img src="http://i.imgur.com/wnPdm.jpg" alt="Click to play Grass Watcher" />
    </a>
    <br />
    <br />
    <a rel="nofollow" href="http://www.kongregate.com/games/FibreFilmsGames" target="_blank">
        <img src="http://i.imgur.com/nTImw.jpg" alt="My Kongregate Page" />
    </a>
    <br />
    <br />
    <a rel="nofollow" href="https://twitter.com/#!/steamyshiner" target="_blank">
        <img src="http://howmanyarethere.net/wp-content/uploads/2011/08/twitter-logo.png" alt="twitter-logo.png" width="50" height="50" style="
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;"/>
    </a>
</div>
    </h1>
</body>

CSS

@keyframes slidein {
  from {
    width: 300%
  }
 
  to {
    width: 100%;
  }
}