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: fadeInAnimation 5s infinite; -moz-animation: fadeInAnimation 5s infinite; -ms-animation: fadeInAnimation 5s infinite; -webkit-animation: fadeInAnimation 5s infinite; -o-animation: fadeInAnimation 5s infinite; } </style> </head> <body> <div class="animateMe">This is a test</div> <textarea> </textarea> </body> </html>