Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Currently the Transitions module is in the working draft stage and it's fairly new compared to other CSS3 modules. Because of this you should expect to see a good bit of change in the standard as it matures. Here is how transitions work. First, you indicate which properties of an element you wish to animate. If those properties change through user interaction or scripting, the animation is triggered. Now the cool thing is that transitions aren't just one way. Once the property is returned to its normal value, for example if somebody is no longer hovering over that element, the change to the original property value is animated as well.
Now the syntax for transitions is pretty straightforward and there are only four transition properties, making it one of the easier CSS3 features to implement. These properties are transition- property, transition-duration, transition-timing-function, and transition-delay. Let's take a closer look at each of these. Transition-property allows you to specify the property or properties that you want to animate. You can use the keyword all to indicate all properties or you can pass the property name directly into the transition-property property. There is really no other way for me to say that.
Now if you want to animate more than one property, but don't want to animate all properties, you can add as many of them as you wish with a comma separated list. Now the specification lists them as comma separated. Simple white space separated values are supported in implementations as well. Transition-duration defines the length of time that properties should animate. Time is given in seconds and if you have more than one property animating, you can specify multiple times for each property. Again, you can separate those with a comma or not. Transition-timing-function is a bit more interesting and certainly more complex.
If you've ever used an animation program, you're probably familiar with the concept of easing. If you haven't, essentially this allows you to speed up or slow down certain parts of the animation. In this regard, even though the animation still occurs over the same period of time, it might speed up at first and then slowdown or gradually speed up as the animation continues. Although you can write your own cubic-bezier curves, that's right, to simulate effects like bouncing, you'll probably be more comfortable using the keywords available.
Let's take a look at those keywords. So we have linear, which is going to animate your transition at a constant speed. We have ease, which is going to start quickly and then slowdown. We have ease-in, where the animation just simply speeds up over time. Ease-out, where the transition slows down over time. And finally ease-in-out. It speeds up and then slows down. Now it sounds like easing, all right? Well, a lot of them seem really similar and to be honest with you, over the course of a short animation, you probably won't notice the difference between a lot of these.
What you will notice, however, is that these timing functions allow your animations to look much more organic. The transition-delay property allows you to pause the start of the animation and is defined in seconds. The default is 0, meaning no delay at all. This allows you to pause transitions to allow items to load or other changes to take place first. I would stress that you should use delays only when you have a concrete reason for doing so. Often if there's no reason for delay, users will assume the application is slow or that there is some problem with the interface.
Now you can pass all of these properties as separate properties, or you can use the transition shorthand property. The shorthand property uses the single transition-property with the property, duration, timing function and delay all passed as space separated values. If you wish to have multiple transitions defined, you simply pass comma Separated transition values. That's pretty cool, right? The order that you pass these is incredibly important. As the first time value would be the duration and the second time value the delay.
If only one time value is passed, it is assumed to be the duration. As you can imagine, with such an early specification support for transitions vary. Firefox 4.0, Safari 3.2, Opera 10.5 and Chrome 4 all support CSS3 transitions to varying degrees. It would be wise to view these features as experimental. Implementations will surely change over time, so currently you'll need to use the vendor prefixes in order to write them.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.