Following on from my prevoius demo (Pure html5 / css3 animated image captions), this demo is an attempt to create cross-browser css only animated image caption using clean semantic markup (see below). The only difference in the markup between this demo and the previous one is the inclusion of a wrapper <div> around each <figure> element with a class that describes the direction of the animation. This demo has been tested in Safari 6.0.2, Chrome 25.0.1364.160 & Firefox 19.0.2 on Mac.
<div class="vertical"> <figure> <img src="images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" /> <figcaption class="orange">Joni Mitchell</figcaption> </figure> </div>
As usual with my demos you can play with the code on dabblet