There’s lots to talk about when it comes to cascading style sheets and animation, but for this article, we’ll keep it short and sweet; just the basics you need for getting started with CSS3 transitions.
For the majority of the time we’ve been consuming HTML, making things move on web pages has been handled by JavaScript. At first it was a nightmare. jQuery has nicely abstracted away much of the cross-browser misery for us and I thank them dearly for this. Now, CSS3 provides functionality for animation that allows you to write less JavaScript, and leverage the brilliance of cascading style sheets, to handle your simple (and sometimes not so simple) animation effects.
Here is the markup we’ll need for all three examples:
|
1 |
A Basic Transition
Example # 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div{ width: 100px; height: 100px; background: #ccc; padding:10px; -moz-transition: height; -webkit-transition: height; -o-transition: height; transition: height; } div:hover{ height: 300px; } |
In Example # 1, we have the most basic CSS3 transition possible. On hover, we simply tell the browser to transform the height property from 100px to 300px. The only problem here is that the end result feels very CSS 2.1. Because the change is instant, we don’t really feel the transition effect. In order to do so, we need to specify a duration.
You may have noticed that we are using vendor prefixes. This allows us to make sure that our CSS code will work across browsers. I won’t get into a discussion about vendor prefixes here, but here is a good article about that topic:
http://css-tricks.com/how-to-deal-with-vendor-prefixes/
Here is the JSFiddle link for Example # 1: http://jsfiddle.net/w76ZL/
Specifying the Duration for Your CSS3 Transition
Example # 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div{ width: 100px; height: 100px; background: #ccc; padding:10px; -moz-transition: height 2s; -webkit-transition: height 2s; -o-transition: height 2s; transition: height 2s; } div:hover{ height: 300px; } |
In Example # 2, we have specified a duration of two seconds to our CSS3 transition. This makes a big difference because in the first example, although we had applied a CSS3 transition, the lack of a duration property negated the transition effect. Now that we have added a duration property, the transition effect is much more evident.
Here is the JSFiddle link for Example # 2: http://jsfiddle.net/eAEpC/
Adding Easing to Your CSS Transition
Example # 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div{ width: 100px; height: 100px; background: #ccc; padding:10px; -moz-transition: height 2s ease-in; -webkit-transition: height 2s ease-in; -o-transition: height 2s ease-in; transition: height 2s ease-in; } div:hover{ height: 300px; } |
In Example # 3, we added an easing value to our CSS3 transition. Easing is used to make the transition feel more realistic. Some common values are “ease-in”, “ease-out” and “linear”, but there are others.
Here is the JSFiddle link for Example # 3: http://jsfiddle.net/4tcLx/
Summary
In this article we discussed the very basics of CSS3 transitions. We covered how to apply a transition to the height property of an element, and we added a duration so that we can see the effect of our transition. We also discussed easing, which makes the transition feel more natural.
Helpful Links for CSS3 Transitions Basics
http://www.w3.org/TR/css3-transitions/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
http://www.css3.info/preview/css3-transitions/
http://blogs.msdn.com/b/eternalcoding/archive/2011/11/01/css3-transitions.aspx
[…] 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 […]
[…] 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 […]