In the previous article: Getting Started With CSS Transitions – Part I, we covered the very basics of CSS3 transitions. We covered how to apply a transition to the height property of an element, and how to add a duration in order to see the effect of our transition. We also discussed easing, which makes the transition feel more natural.
In this article, we will talk about applying transitions to all of the properties of the declaration that show a change in value, and setting a delay.
IMPORTANT NOTE: In Part I of this series, we used all vendor prefixes needed to ensure cross-browser functionality. For brevity sake, we will only include the -webkit- prefix. Please view these examples with a WebKit Browser, or edit the JSFiddle links as needed with -o- and -moz- prefixes.
Here is the markup we’ll need for all three examples:
|
1 |
<div>Put your mouse over me</div> |
Applying CSS3 transitions to all properties of your declaration
Example # 1A
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div { height:100px; width:100px; color:#000; background:#D2691E; padding:10px; -webkit-transition-property:height; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in; } div:hover { height:300px; background:#00CED1; } |
In Example # 1A, we specify “-webkit-transition-property” and provide the value of “height”. So, even though the background color value changes on hover, the transition is only applied to height.
Here is the JS Fiddle link for Example # 1A: http://jsfiddle.net/eQd3n/
Example # 1B
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div { height:100px; width:100px; color:#000; background:#D2691E; padding:10px; -webkit-transition-property:all; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in; } div:hover { height:300px; background:#00CED1; } |
In Example # 1B, we specify “-webkit-transition-property” and use the value: “all”. This means that ALL properties whose value changes on hover have the transition behavior applied (as long as they can be transitioned).
Here is the JS Fiddle link for Example # 1B: http://jsfiddle.net/DVFmd/
Example # 1C
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div { height:100px; width:100px; color:#000; background:#D2691E; padding:10px; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in; } div:hover { height:300px; background:#00CED1; } |
In Example # 1C, we simply leave out “-webkit-transition-property”. By doing this, we achieve the exact same result as Example # 1B: For ALL properties whose values change on hover, the transition behavior is applied (as long as they can be transitioned).
Here is the JS Fiddle link for Example # 1C: http://jsfiddle.net/Hqv3J/
Example # 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
div { height:100px; width:200px; color:#000; background:#D2691E; font-size: 18px; padding:10px; -webkit-transition: all 2s ease-in; } div:hover { height:300px; width:400px; background:#00CED1; font-size: 28px; } |
In Example # 2, we achieve the exact same result as Example # 1C, except we accomplish this by using the CSS3 transition shorthand notation, and provide “all” as the first value.
Here is the JS Fiddle link for Example # 2: http://jsfiddle.net/SKzAE/
Applying a delay to your CSS3 transition
Example # 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
div { height:100px; width:200px; color:#000; background:#D2691E; font-size: 18px; padding:10px; -webkit-transition: all 2s ease-in 0.5s; } div:hover { height:300px; width:400px; background:#00CED1; font-size: 28px; } |
In Example # 3, we have provided a fourth value to the CSS3 transition shorthand notation: a delay time. In this example, a value of “0.5s” is used, which forces the transition to wait a half-second before starting.
Here is the JS Fiddle link for Example # 3: http://jsfiddle.net/fsGLL/
Summary
In this article we learned three ways to apply CSS3 transitions to all properties in a declaration that see a change in value (as long as they can be transitioned). We also discussed CSS3 transition shorthand notation, and how to apply a delay to the effect.
Helpful Links for applying CSS3 transitions to multiple properties
http://www.w3.org/TR/css3-transitions/#animatable-properties
http://perishablepress.com/top-5-css-shorthand-properties/#transitions
http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties
[…] parts I and part II of this series Getting Started With CSS3 Transitions Part I and Getting Started With CSS3 Transitions Part II, we covered the absolute basics of CSS3 transitions. In those articles, we focused on applying […]