Chapter 3 ■ CSS3 tranSitionS for imageS
Listing 3-39. CSS Code for a Clapperboard Caption
figure.clapperboard:hover figcaption { transform: rotate(0); opacity: 1;
transition-property: opacity, transform, background;
transition-timing-function: ease, cubic-bezier(.12,.49,.17,.87), linear;
transition-duration: 0s, .9s, 1s;
transition-delay: 0s, 0s, 1s;
}
It helps to read the transition changes as columns, which is why I have added the unnecessary spaces in the
code. In this case, opacity has no timing function, no duration, and no delay (meaning it takes effect instantly),
whereas the background has a linear timing function, lasts for one second and has a delay of one second
(meaning that it comes into effect after the text has rotated into place).
Now to the default state of the figcaption (Listing 3-40).
Listing 3-40. CSS Code for a Clapperboard Caption
figure.clapperboard figcaption { opacity: 0;
transition-property: opacity, transform, background;
transition-timing-function; linear, ease, linear;
transition-duration: 2s, 9999999s, 0s;
transition-delay: 0s, 0s, 0s;
...
These effects take place during the transition back to the default state, setting the opacity of the figcaption
back to 0 over two seconds. You might wonder why the rotation back is set to last just under 10 million seconds.
The ridiculously high number is in place so that the transform back to the default orientation for the figcaption
(i.e., standing on its side) effectively has an infinite duration. Visually, that means that no rotation of the text takes
place at all when the user moves their mouse away from the image: the caption simply stays still and fades out.
Background Image Transitions and Animation on Page Load
To illustrate transitions on page load, you’ll make an online travel guide page for New Zealand (see Figure 3 - 11 ).