JSFiddle - React, Tailwind, and code Playground

by Anton_Diaz

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="workplace">

    <div class="transition-bar">
        <div class="slider" id="linear"></div>
        <div class="desc">linear</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="ease"></div>
        <div class="desc">ease</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="ease-in"></div>
        <div class="desc">ease-in</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="ease-out"></div>
        <div class="desc">ease-out</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="ease-in-out"></div>
        <div class="desc">ease-in-out</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="cubic-bezier-0110"></div>
        <div class="desc">cubic-bezier(0,1,1,0)</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="cubic-bezier-1001"></div>
        <div class="desc">cubic-bezier(1,0,0,1)</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="cubic-bezier-1010"></div>
        <div class="desc">cubic-bezier(1,0,1,0)</div>
    </div>

    <div class="transition-bar">
        <div class="slider" id="cubic-bezier-0101"></div>
        <div class="desc">cubic-bezier(0,1,0,1)</div>
    </div>

</div>

CSS

BODY {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: Verdana;
    }

.workplace {
    margin: auto;
    width: 332px;
    }

.transition-bar {
    position: relative;
    margin: 15px 0;
    width: 330px;
    height: 30px;
    border: 1px solid #e0e0e0;
    }

.slider {
    position: absolute;
        top: 0;
        left: 0;
    z-index: 2;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: 1px solid #6080e0;
    background: #80a0ff;
    transition: left 2s;
        }

/*  Все сразу */
/*  .workplace:hover .slider {
        left: 300px;
    } */

    .transition-bar:hover .slider {
        left: 300px;
        border: 1px solid #e07070;
        background: #ff9090;
        }

.desc {
    position: absolute;
        bottom: 0;
        left: 0;
    z-index: 1;
    padding: 0.25em;
    width: 100%;
    color: #808080;
    text-align: center;
    }

#linear            {transition-timing-function: linear;}
#ease              {transition-timing-function: ease;}
#ease-in           {transition-timing-function: ease-in;}
#ease-out          {transition-timing-function: ease-out;}
#ease-in-out       {transition-timing-function: ease-in-out;}
#cubic-bezier-0110 {transition-timing-function: cubic-bezier(0,1,1,0);}
#cubic-bezier-1001 {transition-timing-function: cubic-bezier(1,0,0,1);}
#cubic-bezier-1010 {transition-timing-function: cubic-bezier(1,0,1,0);}
#cubic-bezier-0101 {transition-timing-function: cubic-bezier(0,1,0,1);}