JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Demo animation simple</h2>
<div id="vdo-2">Animation auto!</div>

CSS

body{
    padding: 90px;
    font: 1em sans-serif;
}
h2{
    font-size: 1.6em;
}
#vdo-2{
    width: 300px;
    height: 100px;
    line-height: 100px;
    padding: 0 0 0 30px;
    background: greenyellow;
    -webkit-animation: anim1 3s infinite;
       -moz-animation: anim1 3s infinite;
         -o-animation: anim1 3s infinite;
            animation: anim1 3s infinite;
}

@-webkit-keyframes anim1{
    from {
        width: 300px;
        background: greenyellow;            
    }
    50%  {
        width: 600px;
        background: deepskyblue;    
    }
    to   {
        width: 450px;
        background: yellowgreen;            
    }
}
@-moz-keyframes anim1{
    from {
        width: 300px;
        background: greenyellow;            
    }
    50%  {
        width: 600px;
        background: deepskyblue;    
    }
    to   {
        width: 450px;
        background: yellowgreen;            
    }
}
@-o-keyframes anim1{
    from {
        width: 300px;
        background: greenyellow;            
    }
    50%  {
        width: 600px;
        background: deepskyblue;    
    }
    to   {
        width: 450px;
        background: yellowgreen;            
    }
}
@keyframes anim1{
    from {
        width: 300px;
        background: greenyellow;            
    }
    50%  {
        width: 600px;
        background: deepskyblue;    
    }
    to   {
        width: 450px;
        background: yellowgreen;            
    }
}