Time-Based Animations

by Keith Jeter

HTML

<div class="wrapper">
    <div id="slide" class="l"></div>
    <div id="slide2" class="r"></div>
    <div id="slide3" class="l"></div>
    <div id="slide4" class="r"></div>
</div>

CSS

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

.wrapper > div {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 2;         
    -webkit-animation-direction: alternate; /* normal, alternate */
    -webkit-animation-timing-function: ease-out;
}

#slide {
    background: blue;
    -webkit-animation: slidel 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

#slide2 {
    background: red;
    -webkit-animation: slider 0.5s forwards;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

#slide3 {
    background: green;
    -webkit-animation: slidel 0.5s forwards;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

#slide4 {
    background: yellow;
    -webkit-animation: slider 0.5s forwards;
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}

.l { 
    left: -100px;
    animation: slidel 0.5s forwards;
}

.r { 
    right: -100px;
    animation: slider 0.5s forwards;
}

/* ---- LEFT ---- */
@-webkit-keyframes slidel {
    100% { left: 0; }
}

@keyframes slidel {
    100% { left: 0; }
}
/* ---- LEFT ---- */

/* ---- RIGHT ---- */
@-webkit-keyframes slider {
    100% { right: 0; }
}

@keyframes slider {
    100% { right: 0; }
}
/* ---- RIGHT ---- */