Sequence images with keyframe animations

Using pseudo & content

by Barney Carroll

HTML

<img src="http://lorempixel.com/640/480/animals/0/"/>
<img src="http://lorempixel.com/640/480/animals/1/"/>
<img src="http://lorempixel.com/640/480/animals/2/"/>

CSS

@-webkit-keyframes hide_1_of_2 {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    50.001% {
        visibility: visible;
    }
    100% {
        visibility: visible;
    }
}
@-webkit-keyframes hide_2_of_2 {
    0% {
        visibility: visible;
    }
    50% {
        visibility: visible;
    }
    50.001% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}

img {
    position: absolute;
}
img + img {
    visibility: hidden;
}
body:hover img:nth-child(1) {
    visibility: visible;
}
body:hover img:nth-child(2) {
    -webkit-animation: hide_1_of_2 2s infinite;
}
body:hover img:nth-child(3) {
    -webkit-animation: hide_2_of_2 2s infinite;
}