Motion and color - HTML5 and CSS3 - page 332

This example is from ch09/transforms-7.html with a 10-second
transition:

The transition-duration property
is the only thing required to cre-
ate the animation:

div:hover div:nth-child(1) {
transform-origin: bottom right;
transform: rotate(16.5deg);
}
div:hover div:nth-child(2) {
transform-origin: top right;
transform: rotate(33deg);
}
div:hover div:nth-child(3) {
transform-origin: top left;
transform: rotate(66deg);
}

div div {
transition-duration: 10s;
}

Although all three elements have
unique states when the parent
element is hover , all three are
transitioned according to the pre-
vious rule. Look at ch09/transi-
tions-1.html to see for yourself.

When transition-duration is set on the default state of the element (in
this case, when it isn't hover ), the same duration applies as the transi-
tion runs both forward and backward—as the element enters the hover
state and leaves it, the transition will last 10 seconds as shown in the
results of listing ch09/transitions-3.html.