Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.
Let me show you how to make all that happen. In my code editor, I've got the advert.htm file from the Chapter 3/03_01 folder open. Now because I'm going to want to move the wheels into the banner ad area, the first thing I'm going to do is add 1000 pixels to the left property for each of the wheels to move them off stage right. So let me scroll down to where my wheels are defined, and I have the three wheels here, so this is a really easy quick fix. I am going to initialize my black_wheel here, so instead of the left value being 434 pixels, we will make it 1434, and let's do the same bit of quick addition for red wheel, adding 1000 there and then also silver_wheel, 1807.
So changing those values will set each of the wheels up so that they are off to the right of the advertisement when the page loads. Take a look at the HTML. So you can see the code for each of the three wheels starting on line 90, and you'll notice that each of them has a class of wheel, and we are ready now to set up that CSS rule, which will include an initial opacity value, as well as transitions for three different properties. When you are assigning multiple transitions to the same selector, a special format is required. You'll recall that in the Chapter 1 overview, each of the four key declarations, property, duration, timing-function, and delay were defined separately.
In most of the movies in Chapter 2, I use the shorthand format for efficiency's sake. Now, however, we are going to write them out separately again with a little bit of a twist. Because of the multiple vendor prefixes, this will result in a fair amount of code, but it's pretty repetitious, as you'll see. So let's scroll up to where I have my wheel class selector defined, and I'll press Return, so I can start off with my first declaration, and that's going to be to set the opacity to 0. Next, we will start the transitions, and I am going to start with the -webkit-transition-property first.
Now instead of listing just one property here, I am going to list all three properties we are going to change. We are going to change the left value, the opacity, and that last one-- the webkit-transform property-- will be used to rotate the wheels. All right, so let's enter in left,opacity,webkit-transform. Notice that this time you don't put a leading dash in front of webkit, and this becomes the actual name of the property. All right let's close it off with a semicolon. Now we need to do the duration, and this will also use the webkit-transition prefix.
So -webkit-transition, and I will use my code hinting here just to finish out duration, and now since we have three properties, we need three different durations. Even if they're all of the same values, you need to specify each one separated by a comma. So let's make our duration value for the left property 3 seconds, for the opacity 4 seconds, and then for the rotation 3 seconds. Okay, semicolon to close off, now let's enter in the timing function. Again, this is going to be vendor-specific prefix, and again we are going to need three values for the three properties.
So let's make the first two ease and then the third one we will do ease-out. Finally, we are going to put in the delay value, and of course, we need our vendor prefix for this, and as before, we need three different values. I am not going to have any delay for changing the left value so that comes on immediately, so let's make that 0 seconds. Let's delay the opacity a little bit, however, like one half a second, so .5s, and then finally for the rotation we don't want any delay as well, so 0 seconds. Okay, so that is handling just the webkit version of this, we are going to need to copy all four of these declarations and then paste them in for each of the different browsers we want to address, as well as ones for the generic version.
So let me copy the four lines, paste that in, and I am going to put a little space in between it just to make it easy for us to identify. We can use white space judiciously here, and we want to change this first one to the Mozilla prefix which is moz of course. Now it's very important to also change the property prefix from webkit to Mozilla, and the others we can simply change webkit to Mozilla without having to modify any of the properties. Okay, so we will copy that, add a little line, and now we are ready to put in the -o for Opera, and again change the name of the transform property itself, and finally let's copy all these values one last time, create one more bit of white space, paste it in, and we want to go generic.
So I get rid of the vendor prefix, both in the property name and also in the property value transform, and then we will remove the final vendor prefixes here, so everything is pretty cleanly laid out. All right, so that's a lot of code, but we have covered all the browsers we can. Now we need to add the transform within a new rule with the selector anim-wheel, and I am going to put that right after a .wheel rule, enter in my selector .anim-wheel, with an open and close curly brace and put in the -webkit-transform-property with a rotate function.
And for the value, let's enter something that will cause the wheels to roll in a counter-clockwise direction, so it's going to be a negative value, and I want them to rotate, let's say three times. So 360x3 is 1080, deg for degrees, semicolon, and that line is done. Now let's copy that line and then paste it three times more, and as we have done so many times before, change the vendor prefix, first, changing -webkit to -moz, and then changing -webkit to -o, and then getting rid of webkit altogether.
So we have one more thing that we want to have happen here in the anim-wheel rule, and that's to bring the opacity up to 1. So that takes care of two of the three transitions, rotation and opacity. Now let's add in the code from moving the wheels onto the stage to their final position, and to do that we will need to add a new rule for each of the wheels that reference the anim-wheel class. So I'll put my cursor right after black_wheel here, and we'll start off with this one, put in a #black_wheel.anim-wheel, and that will target the black wheel when the anim-wheel class has been applied.
So now all we need to do is to modify the left value and change it to its original value, which is 434 pixels. Okay, so we need to do the same thing for the red and silver wheels, so I am going copy that rule, scroll my page up a little bit, and let's paste the next one right after red_wheel, and change that black_wheel to red_wheel, and the value to 618. Paste it in one more time and change black to silver, and finally, change the left value to 807.
Let's add that closing semicolon, and we are done. So, not too bad, eh? Let's save the page and see what's happening in the browser. Now let's reload the page and see what happens. Excellent! Well, the timing looks good to my eye, but yours of course may differ. Feel free to play with the various transition parameters to find a result you're happy with. If you have the exercise files available, you'll see that I've broken out all the page elements in this advertisement so that any of them can be animated. Have fun!
There are currently no FAQs about CSS: Transitions and Transforms.
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.