JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div></div>

CSS

div
{
    width:100px;
    height:100px;
    background:red;
}

div:hover {
    animation:myfirst 4s 1;
    -webkit-animation:myfirst 4s 1; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%      {background:red;}
    25%     {background:yellow;}
    75%     {background:yellow;}
    100%    {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%      {background:red;}
    25%     {background:yellow;}
    75%     {background:yellow;}
    100%    {background:red;}
}