JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

@-webkit-keyframes moved{
    0%{
        top: 0;
        left: 0;
    }
    10%{
        top: 3em;
        left: 3em;
        background: red;
    }
    20%{
        top: 0;
        left: 6em;
        background: green;
    }
    30%{
        top: 3em;
        left: 9em;
        background: yellow;
        border: .5em red dashed;
    }
    40%{
        top: 0;
        left: 12em;
        background: orange;
        border: .5em green dashed;
    }
    50%{
        top: 3em;
        left: 15em;
        background: pink;
        border: .5em navy dashed;
    }
  
    60%{
        top: 0;
        left: 12em;
        background: maroon;
        border: .5em lightgray dashed;
    }
    70%{
        top: 3em;
        left: 9em;
        background: blue;
    }
    80%{
        top: 0;
        left: 6em;
        background: cyan;
        border: .5em maroon dashed;
    }
    90%{
        top: 3em;
        left: 3em;
        background: magenta;
    }
    100%{
        top: 0;
        left: 0;
        background: orange;
        border: .5em lightgray dashed;
    }  
}

div{
    width: 5em;
    height: 5em;
    position: relative;
    border: .5em lightgray dashed;
    border-radius: 5em;
    background: orange;
    -webkit-animation: moved 15s infinite;
    transition: 1.2s;
}

body{
    background: -webkit-linear-gradient(left, cornflowerblue, whitesmoke);
}