HTML and CSS Reference
In-Depth Information
This example is from ch09/transforms-7.html with a 10-second
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.
Search WWH ::

Custom Search