JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<div id="box">
    <div></div>
    Hallo Welt!
    <div></div>
</div>

CSS

/* Setup */
#box {
    position: relative;
    background:blue;
    color: blue;
    text-align: center;
    padding: 1em;
}
#box div {
    background: red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
}
#box div:last-child {
    left: 50%;
    right: 0;
}

/* Zustände */
#box:hover {
    color: yellow;
}
#box:hover div:first-child {
    right: 100%;
}
#box:hover div:last-child {
    left: 100%;
}

/* Transition-Eigenschaften */
div {
    -webkit-transition-property: color, left, right;
    -webkit-transition-duration: 2s;
}
#box {
    -webkit-transition-delay: 2500ms;
}