JSFiddle - React, Tailwind, and code Playground

by fiddlerintheoffice

HTML

<div id="dyn"></div>

CSS

#dyn {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: green;
    animation-name: line-pop;
    animation-duration: 0.5s;
    background-image:linear-gradient(0deg, #fdc921 50%,transparent 0);
    transition:background-position 2s;
    background-position:0 0;
    background-repeat:no-repeat;
    background-size:100% 100%
    
}
#dyn:hover {
    background-image:linear-gradient(45deg, #fdc921 50%,transparent 0);
}

@keyframes line-pop {
  0% {
    background-size:0 100%
    /*background-image:linear-gradient(0deg, #fdc921 50%,transparent 0);*/
    /*background-size: 0;*/
  }
  100% {
    background-size:100% 100%
    /*background-image:linear-gradient(45deg,#fdc921 50%,transparent 0);*/
        /*background-size: cover;*/


  }
}