JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<div class="vanish">Sukanya</div>

CSS

.vanish{
    width:100px;
    height:100px;
    background-color:skyblue;       
    margin:100px;
    position:relative;
    float:left;
}
.vanish:hover{       
    -webkit-animation:test 0.9s;     
    -webkit-animation-direction:reverse;
}
@-webkit-keyframes vanish
{
    from{opacity:1;}
    to {opacity:0;}
}
@-webkit-keyframes appear
{
    to{opacity:1;}
     from{opacity:0;}
}
@-webkit-keyframes bounce
{    
    0%{ margin-top:70px;background:skyblue;  }
    25%{margin-top:100px;background:skyblue;}
    50%{margin-top:85px;background:skyblue;}
    75%{margin-top:100px;background:skyblue;}
    100%{margin-top:100px;background:skyblue;}
}
@-webkit-keyframes flash
{    
    0%{ opacity:1;  }
    25%{ opacity:0;  }
    50%{ opacity:1;  }
    75%{ opacity:0;  }
    100%{opacity:1;}
}
@-webkit-keyframes pulse
{    
    0%{ width:120px;margin-left:90px;  }
    50%{ width:100px;margin-left:100px;  }
    75%{ width:120px;margin-left:90px;  }    
    100%{width:100px;margin-left:100px;}
}
@-webkit-keyframes rubberband
{    
    0%{ width:100px;height:100px;margin-left:100px;margin-bottom:100px;}
    25%{ width:160px;height:60px;margin-left:60px;margin-bottom:40px;}
    50%{ width:100px;height:100px;margin-left:100px;margin-bottom:100px;}
    75%{ width:140px;height:80px;margin-left:70px;margin-bottom:90px;}
    100%{width:100px;height:100px;margin-left:100px;margin-bottom:100px;}
}
@-webkit-keyframes test{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}