JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="transition ">

</div>

CSS

:root {
    --t: 1000ms;
    --d: 500ms;
}

.fast {
    --t: 250ms;
}

.normal {
    --t: 500ms;
}

.slow {
    --t: 750ms;
}

.transition {
    transition: var(--t) ease-out;
    -webkit-transition: var(--t) ease-out;
    -moz-transition: var(--t) ease-out;
    -ms-transition: var(--t) ease-out;
    -o-transition: var(--t) ease-out;
}

.short {
    --d: 125ms;
}

.medium {
    --d: 250ms;
}

.long {
    --d: 500ms;
}

.delay {
    transition-delay: var(--d);
    -webkit-transition-delay: var(--d);
    -moz-transition-delay: var(--d);
    -ms-transition-delay: var(--d);
    -o-transition-delay: var(--d);
}

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

div:hover {
  background: yellow;
}