JSFiddle - React, Tailwind, and code Playground
by Felis Catus
HTML
<div class="animoo">
</div>
SCSS
body {
position: relative;
background: black;
}
@keyframes animee {
from { top: 100px; left: 100px; }
50% { top: 99px; animation-timing-function: cubic-bezier(0,50,1,100); }
80% { left: 99px; animation-timing-function: cubic-bezier(0,30,1,130); }
to { top: 99px; left: 99px; }
}
.animoo {
position: absolute;
top: 100px;
left: 100px;
width: 1px;
height: 1px;
box-shadow: 0 0 3px 2px lime;
transition-delay: 1s;
//transition: top 300ms cubic-bezier(0,100,1,100);
animation: animee 1s cubic-bezier(0,50,1,100) infinite;
}