Chapter 3 ■ CSS3 tranSitionS for imageS
In this case, I’ve made the figcaption twice as wide as it was before and padded the content in from the left
side so that it arrives to cover the same portion of the image. By changing the position of the figcaption box and
the location of the element’s transformation origin you’ll find that it is possible to create many different kinds of
effects.
Creating Separate Transition Sequences
The other method for creating a caption transition is to fade in the caption background after the text has been
rotated into place. This requires animating two separate properties, and delaying one until after the first has
completed. Setting the background of the figcaption to completely transparent by default can start this process,
followed by separating the transition effects with commas and adding a delay to one set of values. See Figure 3 - 10
for an example.
Figure 3-10. Extended figcaption for a better clapboard caption transition effect. (overflow: hidden is turned off,
colors are reversed, and a border is added for the purposes of illustration.)