Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Transitioning multiple properties

From: CSS: Transitions and Transforms

Video: Transitioning multiple properties

CSS Transitions and Transforms are very flexible and allow a surprisingly fine degree of control when coordinating multiple page elements and animation timing. In this movie I'll show you the special techniques you'll need to know when transitioning multiple properties and open up a real designer's playground for you, all with CSS and a little JavaScript. Let's revisit the banner ad we worked on in Chapter 2, and take the animation a step or two further. Let me reload the page to show you where we are at now. I have taken the liberty of animating the gradient rectangle behind the wheels into position, and we still have our spinning logo, but those wheels looks like they are begging to move, don't they? And rotate and fade in, all with different timings.

Transitioning multiple properties

CSS Transitions and Transforms are very flexible and allow a surprisingly fine degree of control when coordinating multiple page elements and animation timing. In this movie I'll show you the special techniques you'll need to know when transitioning multiple properties and open up a real designer's playground for you, all with CSS and a little JavaScript. Let's revisit the banner ad we worked on in Chapter 2, and take the animation a step or two further. Let me reload the page to show you where we are at now. I have taken the liberty of animating the gradient rectangle behind the wheels into position, and we still have our spinning logo, but those wheels looks like they are begging to move, don't they? And rotate and fade in, all with different timings.

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.

So we have one last step, and that's to define the triggering JavaScript. Let me scroll back up to the head. We will use the same technique of swapping in a class when the page has been loaded, and it only takes one line of code. So after my second add class function, I am going to add a third. This time we are going to target the wheel class. So after your parentheses and your quotes, put in .wheel, and then after the closing parentheses add another dot, and the function addClass, open and close parentheses, quotes, and the name of the class we are adding, which is anim-wheel.

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!

Show transcript

This video is part of

Image for CSS: Transitions and Transforms
CSS: Transitions and Transforms

26 video lessons · 15081 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Transitions and Transforms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.