JSFiddle - React, Tailwind, and code Playground

by Emraan Ali

HTML

<div id="div1">its Linear Effect</div><br>

<div id="div2">its Ease Effect</div><br>

<div id="div3">its Ease-in Effect</div><br>

<div id="div4">its Ease-out Effect</div><br>

<div id="div5">its Ease-in-out Effect</div><br>

CSS

div {

    width: 100px;

    height: 100px;

    background:#FFCC00;

    transition: width 1s;

                color:white;

                font-size:24px;

                text-align:center;

                border-radius:20px;

                padding-top:50px;

}

 

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

 

div:hover {

   width: 300px;

   background-color:yellow;

   color:#FF6600;

}