 |
| Move your cursor over the smiley face to see a transition in action. |
In addition to introducing an advanced collection of new styling options, CSS3 has also given us a way to animate different values of style properties. With the introduction of the transitions and animations, we can implement more visual activity and interest to a web page.
The technological climate keeps changing. Previous big players that provided us with rich media features, like Flash, have been falling out of favor. Updates to languages like CSS are picking up the slack, and to a degree, even streamlining the process. Creating an animation on a web page, even a very basic one, required a Flash movie file or an abundance of JavaScript. CSS transitions and animations are making these types of features more accessible to designers who otherwise don't need more advanced programs or languages.
The main focus of these more recent features is taking a property of an element, and showing a gradual change from one value of that property to another. So if you have an element with a width of 300px, you can animate it so that the user will see the element stretch itself out until its 600px wide. And this technique can combine any number of properties to alter, allowing us combinations to pull off so many different effects. But before we delve into how to use these new features, we should probably clarify how they differ from each other.
Transitions operate primarily as a before and after effect—they always just have a start and finish, no other steps in between. They are typically triggered by either a mouse cursor hover, or some basic JavaScript code (like setting it to start on a button click). Animations, on the other hand, can have as many steps to the changes as you would like. They usually start automatically, or after a time delay. They also can repeat themselves indefinitely. These complications, however, can make it harder to manipulate them on the fly, like with JavaScript. Transitions on the other hand, are quite manageable when it comes to using outside coding.
But since we're not learning JavaScript in this course, we will focus on the capabilities of transitions and animations, and look at some examples of how they can be applied. First, we'll take a look at the basics of transitions and how to get your first one started!
