Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Transitioning multiple properties


From:

CSS: Transitions and Transforms

with Joseph Lowery

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.
please wait ...
Watch the Online Video Course CSS: Transitions and Transforms
2h 25m Intermediate Jul 11, 2012

Viewers: in countries Watching now:

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.

Topics include:
  • Understanding transition basics
  • Working with 2D and 3D transforms
  • Animating color changes
  • Fading objects
  • Changing the size of page elements and fonts
  • Transitioning multiple properties at the same time
  • Understanding keyframes and animations
  • Working in the z-index
  • Adding JavaScript interactivity
  • Crafting transitions in Dreamweaver
Subject:
Web
Software:
CSS
Author:
Joseph Lowery

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!

There are currently no FAQs about CSS: Transitions and Transforms.

 
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

* Estimated file size

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

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.