Animations example

This is a test

<!doctype HTML>
<html>
  <head>
    <title>Animations example</title>
    <style type="text/css">
      textarea {
          position:absolute;
          right:0;
          width:50%;
          height:100%;
        }
      div {
          opacity: 0;
          padding:10px;
          background:orange;
          font-family:'sans-serif';
          position:absolute;
          top:10px;
          left:10px;
          width:100px;
          height:50px;
      }
      /* defining the animation */
      @keyframes fadeInAnimation {
          /* starting state */
          from {
              opacity: 0;
          }
          /* ending state */
          to {
              opacity: 1;
          }
      }
      
      @-moz-keyframes fadeInAnimation {
          /* starting state */
          from {
              opacity: 0;
          }
          /* ending state */
          to {
              opacity: 1;
          }
      }
      
      @-ms-keyframes fadeInAnimation {
          /* starting state */
          from {
              opacity: 0;
          }
          /* ending state */
          to {
              opacity: 1;
          }
      }
      
      @-webkit-keyframes fadeInAnimation {
          /* starting state */
          from {
              opacity: 0;
          }
          /* ending state */
          to {
              opacity: 1;
          }
      }
      
      @-o-keyframes fadeInAnimation {
          /* starting state */
          from {
              opacity: 0;
          }
          /* ending state */
          to {
              opacity: 1;
          }
      }
      
      
     
      /* applying the animation */
      .animateMe {
  	    animation-name: fadeInAnimation;
        -moz-animation-name: fadeInAnimation;
        -ms-animation-name: fadeInAnimation;
        -webkit-animation-name: fadeInAnimation;
        -o-animation-name: fadeInAnimation;
      }
      .duration {
      	-webkit-animation-duration: 5s;
      	-moz-animation-duration: 5s;
      	-ms-animation-duration: 5s;
      	-o-animation-duration: 5s;
		animation-duration: 5s;
      }
    </style>
  </head>
  <body>
    <div class="animateMe duration">This is a test</div>
    <textarea>

</textarea>
  </body>
</html>