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 wobble {
	     /* starting state */
          from {
              opacity: 0;
              transform: rotateZ(40deg);
          }
          /* ending state */
          to {
              opacity: 1;
              transform: rotateZ(-40deg);
          }
	}
	@-webkit-keyframes wobble {
	    /* starting state */
          from {
              opacity: 0;
              -webkit-transform: rotateZ(40deg);
          }
          /* ending state */
          to {
              opacity: 1;
              -webkit-transform: rotateZ(-40deg);
          }
	}
     @-ms-keyframes wobble {
	    /* starting state */
          from {
              opacity: 0;
              -ms-transform: rotateZ(40deg);
          }
          /* ending state */
          to {
              opacity: 1;
              -ms-transform: rotateZ(-40deg);
          }
	}
	@-o-keyframes wobble {
	     /* starting state */
          from {
              opacity: 0;
              -o-transform: rotateZ(40deg);
          }
          /* ending state */
          to {
              opacity: 1;
              -o-transform: rotateZ(-40deg);
          }
	}
	@-moz-keyframes wobble {
	    /* starting state */
          from {
              opacity: 0;
              transform: rotateZ(40deg);
          }
          /* ending state */
          to {
              opacity: 1;
              transform: rotateZ(-40deg);
          }
	}
      
      
      /* applying the animation */
      .animateMe {
  	    animation: wobble 5s infinite;
        -moz-animation: wobble 5s infinite;
        -ms-animation: wobble 5s infinite;
        -webkit-animation: wobble 5s infinite;
        -o-animation: wobble 5s infinite;
      }
      .animationDirection {
      	-webkit-animation-direction: alternate;
      	-moz-animation-direction: alternate;
      	-ms-animation-direction: alternate;
      	-o-animation-direction: alternate;
      	animation-direction: alternate;
  	  }

</style>
  </head>
  <body>
    <div class="animateMe animationDirection">This is a test</div>
    <textarea>

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