JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<div id="bounds">
    <p id="block">Box</p>
</div>

CSS

body { 
    margin: 0; 
    padding: 0; 
}

#bounds {
    margin: 0;
    padding: 0;
    height: 600px;
    width: 100px;
    outline: 1px dashed #ccc;
}

#block {
    margin: 0;
    padding: 0;
    height: 100px;
    width: 100px;
    background-color: red;
    -webkit-animation-name: animation_name;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: none;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes animation_name { 0% {-webkit-transform: translateY(0.000000px);} 100% {-webkit-transform: translateY(500.000000px);} 1% {-webkit-transform: translateY(0.050005px);} 2% {-webkit-transform: translateY(0.200080px);} 3% {-webkit-transform: translateY(0.450406px);} 4% {-webkit-transform: translateY(0.801284px);} 5% {-webkit-transform: translateY(1.253141px);} 6.000000000000001% {-webkit-transform: translateY(1.806527px);} 7.000000000000001% {-webkit-transform: translateY(2.462124px);} 8% {-webkit-transform: translateY(3.220746px);} 9% {-webkit-transform: translateY(4.083347px);} 10% {-webkit-transform: translateY(5.051026px);} 10.999999999999998% {-webkit-transform: translateY(6.125032px);} 11.999999999999998% {-webkit-transform: translateY(7.306778px);} 12.999999999999998% {-webkit-transform: translateY(8.597846px);} 13.999999999999998% {-webkit-transform: translateY(10.000000px);} 15% {-webkit-transform: translateY(11.515200px);} 16% {-webkit-transform: translateY(13.145614px);} 17% {-webkit-transform: translateY(14.893641px);} 18.000000000000004% {-webkit-transform: translateY(16.761924px);} 19.000000000000004% {-webkit-transform: translateY(18.753378px);} 20.000000000000004% {-webkit-transform: translateY(20.871215px);} 21.000000000000004% {-webkit-transform: translateY(23.118974px);} 22.000000000000007% {-webkit-transform: translateY(25.500557px);} 23.000000000000007% {-webkit-transform: translateY(28.020271px);} 24.000000000000007%...