Timing-functions

by ginpei

HTML

<div class="viewer">
    <input id="left" type="radio" name="direction" checked />
    <input id="right" type="radio" name="direction" />
    <label class="direction" for="left"><button>&laquo;</button></label>
    <label class="direction" for="right"><button>&raquo;</button></label>
    <ul class="timing-functions">
        <li class="ease">ease</li>
        <li class="linear">linear</li>
        <li class="ease-in">ease-in</li>
        <li class="ease-out">ease-out</li>
        <li class="ease-in-out">ease-in-out</li>
        <li class="step-start">step-start</li>
        <li class="step-end">step-end</li>
    </ul>
</div>

CSS

/* basics */
.viewer {
    text-align: center;
}
.timing-functions {
    box-shadow: 0 0 5px #999;
    height: 300px;
    margin: auto;
    position: relative;
    width: 300px;
}
.timing-functions > li {
    background-color: hsla(200,50%,50%,.3);
    bottom: 0;
    dislpay: inline-block;
    height: 20px;
    line-height: 20px;
    left: 0;
    position: absolute;
    text-align: center;
    text-shadow:
        -1px -1px #fff,
         1px -1px #fff,
         1px  1px #fff,
        -1px  1px #fff;
    width: 100px;
}
input[name=direction] {
    display: none;
}
label.direction button {
    width: 130px;
}

/* timing-functions */
.ease {
    -webkit-transition: top 3s ease, left 3s linear;
}
.linear {
    -webkit-transition: top 3s linear, left 3s linear;
}
.ease-in {
    -webkit-transition: top 3s ease-in, left 3s linear;
}
.ease-out {
    -webkit-transition: top 3s ease-out, left 3s linear;
}
.ease-in-out {
    -webkit-transition: top 3s ease-in-out, left 3s linear;
}
.step-start {
    -webkit-transition: top 3s step-start, left 3s linear;
}
.step-end {
    -webkit-transition: top 3s step-end, left 3s linear;
}

/* switching */
#left:checked ~ .timing-functions > li {
    left: 0;
    top: 280px;
}
#right:checked ~ .timing-functions > li {
    left: 200px;
    top: 0;
}