JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 

</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>

<div></div>

</body>
</html>

CSS

div
 {
 width:100px;
 height:100px;
 top: 200px;
 background:red;
 position:relative;
 animation:mymove;
 animation-iteration-count: 1;
 animation-duration:1s;
 /* Firefox */
 -moz-animation:mymove;
 -moz-animation-iteration-count: 1;
 -moz-animation-duration:2s;
 /* Safari and Chrome */
 -webkit-animation:mymove;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-duration:2s;
 }
 
 @keyframes mymove
 {
 from {top:0px;}
 to {top:200px;}
 }
 
 @-moz-keyframes mymove /* Firefox */
 {
 from {top:0px;}
 to {top:200px;}
 }
 
 @-webkit-keyframes mymove /* Safari and Chrome */
 {
 from {top:0px;}
 to {top:200px;}
 }