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
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:
Search WWH ::

Custom Search