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 bounceFadeInAnimation {
	    /* starting state (same as "from") */
	    0% {
	        opacity: 0;
	    }
	    10% {
	        opacity: 0.4;
	    }
	    15% {
	        opacity: 0;
	    }
	    25% {
	        opacity: 0.6;
	    }
	    50% {
	        opacity: 0;
	    }
	    65% {
	        opacity: 0.8;
	    }
	    80% {
	        opacity: 0;
	    }
	    /* ending state (same as "to") */
	    100% {
	        opacity: 1;
	    }
	}
	@-webkit-keyframes bounceFadeInAnimation {
	    /* starting state (same as "from") */
	    0% {
	        opacity: 0;
	    }
	    10% {
	        opacity: 0.4;
	    }
	    15% {
	        opacity: 0;
	    }
	    25% {
	        opacity: 0.6;
	    }
	    50% {
	        opacity: 0;
	    }
	    65% {
	        opacity: 0.8;
	    }
	    80% {
	        opacity: 0;
	    }
	    /* ending state (same as "to") */
	    100% {
	        opacity: 1;
	    }
	}
     @-ms-keyframes bounceFadeInAnimation {
	    /* starting state (same as "from") */
	    0% {
	        opacity: 0;
	    }
	    10% {
	        opacity: 0.4;
	    }
	    15% {
	        opacity: 0;
	    }
	    25% {
	        opacity: 0.6;
	    }
	    50% {
	        opacity: 0;
	    }
	    65% {
	        opacity: 0.8;
	    }
	    80% {
	        opacity: 0;
	    }
	    /* ending state (same as "to") */
	    100% {
	        opacity: 1;
	    }
	}
	@-o-keyframes bounceFadeInAnimation {
	    /* starting state (same as "from") */
	    0% {
	        opacity: 0;
	    }
	    10% {
	        opacity: 0.4;
	    }
	    15% {
	        opacity: 0;
	    }
	    25% {
	        opacity: 0.6;
	    }
	    50% {
	        opacity: 0;
	    }
	    65% {
	        opacity: 0.8;
	    }
	    80% {
	        opacity: 0;
	    }
	    /* ending state (same as "to") */
	    100% {
	        opacity: 1;
	    }
	}
	@-moz-keyframes bounceFadeInAnimation {
	    /* starting state (same as "from") */
	    0% {
	        opacity: 0;
	    }
	    10% {
	        opacity: 0.4;
	    }
	    15% {
	        opacity: 0;
	    }
	    25% {
	        opacity: 0.6;
	    }
	    50% {
	        opacity: 0;
	    }
	    65% {
	        opacity: 0.8;
	    }
	    80% {
	        opacity: 0;
	    }
	    /* ending state (same as "to") */
	    100% {
	        opacity: 1;
	    }
	}
      
      
      /* applying the animation */
      .animateMe {
  	    animation: bounceFadeInAnimation 5s infinite;
        -moz-animation: bounceFadeInAnimation 5s infinite;
        -ms-animation: bounceFadeInAnimation 5s infinite;
        -webkit-animation: bounceFadeInAnimation 5s infinite;
        -o-animation: bounceFadeInAnimation 5s infinite;
      }

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

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