JSFiddle - React, Tailwind, and code Playground
by Mr_Vasu
HTML
<div class="ExampleB">
<div class="ease">ease</div>
<div class="linear">linear</div>
<div class="easein">ease-in</div>
<div class="easeout">ease-out</div>
<div class="easeinout">ease-in-out</div>
</div>CSS
.ExampleB {
width: 520px;height:700px;
}
.ExampleB div {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background: #ED8029;
text-align: right;
border-radius: 5px;
}
.ExampleB:hover div {
width: 500px;
}
.ExampleB div.ease {
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
}
.ExampleB div.linear {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
.ExampleB div.easein {
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
-ms-transition: 3s ease-in;
transition: 3s ease-in;
}
.ExampleB div.easeout {
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}
.ExampleB div.easeinout {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}