JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<div></div>

CSS

div {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 3s ease-out forwards;
    animation-iteration-count:1;
    /* Safari and Chrome */
    -webkit-animation:mymove 3s forwards;
    -webkit-animation-iteration-count:1;
}
@keyframes mymove {
    from {
        top:0px;
        opacity: 0;
    }
    to {
        top:200px;
        opacity: 1
    }
}
@-webkit-keyframes mymove
/* Safari and Chrome */
 {
    from {
        top:0px;
        opacity: 0;
    }
    to {
        top:200px;
        opacity: 1;
    }
}