Bringing Your Website to Life with Transitions and Animations - CSS3 Foundations - page 224

transition-property
Initial value: all | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 4+, Chrome 4+, Opera 10.5+, Safari 3.1+
Because an element can have many different CSS properties applied to it, when making it transition, you might need
to be specific about which property is transitioned. For example, say an element has the following properties:
color: blue;
height: 100px;
The initial value for transition-property is all , meaning all animatable properties are animated. You might
want only the color property to transition, though. The transition-property allows you to specify that.
1. In styles.css, in the .banner-ad:hover rule set, add the following declaration:
-webkit-transition-property: -webkit-transform;
2. Save styles.css.
The -webkit-transform value refers to the property in the same rule set, which you added a moment ago:
-webkit-transform: translate(75px, -25px) rotate(-45deg) scale(1.1);
Although you've now told the browser you only want the transform declaration to animate, it won't animate until
a duration is also specified, which you'll do in a moment.
The only other property in this rule set is cursor: default; , which is a property that can't be animated any-
way. Technically, you could get away with not including this declaration in the rule set because the initial value of
all selects only the transform property anyway. Of course, for maintainable CSS, it's better practice to specify
exactly which properties you want to animate in case you add more properties in the future that you may not want to
have animated.
If you want to specify more than one property, separate each with a comma, like so:
transition-property: transform, color;
For a list of properties that can be animated, see the list of animatable properties at www.w3.org/
TR/css3-transitions/#animatable-properties .
transition-duration
Initial value: 0s | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+