HTML and CSS Reference
In-Depth Information
transition (Shorthand)
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 4+, Chrome 1+, Opera 11.6+, Safari 3+
To make working with transitions easier, you can combine the transition-related properties into one easy-to-use de-
claration using the
transition
property.
1.
In styles.css, in the
.banner-ad:hover
rule set, remove the following declarations:
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
2.
In their place, add the shorthand declaration:
-webkit-transition: -webkit-transform 1s;
3.
Save styles.css.
The shorthand property should take the following syntax:
transition: transition-property transition-duration transition-timing-function
transition-delay;
Because you don't use
transition-timing-function
and
transition-delay
properties here, you can
omit them from the shorthand declaration. Note that because
transition-duration
and
transition-
delay
can be given the same type of value, the order in which they are specified is important. The first value is
treated as the duration; and the second, the delay.
When applying the transition to more than one property, you should separate values of the transition shorthand prop-
erty with a comma. For example,
transition: transform 1s ease 0s, color 2s linear 0s;
This declaration causes the
transform
property in a rule set to transition for one second with an ease and the
color
property to transition for two seconds with a linear timing function. Neither property has a delay.
Making the Banner Transition Back to Its Normal State
Now that the banner is transitioning just the way you like when it's hovered over, you may notice it snaps back to its
start state when the cursor is moved away from it. How to make it transition back? All you need to do is apply the
same
transition
declaration to the
.banner-ad
rule set:
1.
In the
.banner-ad
rule set, add the following declaration:
-webkit-transition: -webkit-transform 1s;
2.
Save styles.css.
Code Challenge: Make the Sidebar Sections Transition
In styles.css, do the following:
