Sequence images with keyframe animations

Using background

by Barney Carroll

CSS

@-webkit-keyframes animals {
    0% {
        background: url( http://lorempixel.com/640/480/animals/0/ );
    }
    50% {
        background: url( http://lorempixel.com/640/480/animals/0/ );
    }
    50.001% {
        background: url( http://lorempixel.com/640/480/animals/1/ );
    }
    100% {
        background: url( http://lorempixel.com/640/480/animals/1/ );
    }
}

body {
    background: url( http://lorempixel.com/640/480/animals/2/ );
    height    : 640px;
    width     : 480px;
}

body:hover {
    -webkit-animation: animals 2s infinite;
}