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

Working with CSS3 transitions

From: Dreamweaver CS6 New Features

Video: Working with CSS3 transitions

With every new release there's always a feature that ends up being my favorite feature and with Dreamweaver CS6 I have a feeling that's going to be the new support for creating CSS transitions. Using the CSS Transitions panel we can now create transitions for elements visually as we design our pages, and I think you are going to agree with me, this is a really, really cool feature. Well, I have the Roux Academy web site here opened in Chrome, and I just want to show you kind of what I want to do on the page and how CSS Transitions is going to allow me to do that.

Working with CSS3 transitions

With every new release there's always a feature that ends up being my favorite feature and with Dreamweaver CS6 I have a feeling that's going to be the new support for creating CSS transitions. Using the CSS Transitions panel we can now create transitions for elements visually as we design our pages, and I think you are going to agree with me, this is a really, really cool feature. Well, I have the Roux Academy web site here opened in Chrome, and I just want to show you kind of what I want to do on the page and how CSS Transitions is going to allow me to do that.

So if I scroll down a little bit, I can see that I have each of these areas that talk a little bit about Student Spotlight, the Current Show, Upcoming Calendar Events, Alumni Profile, and they all give just a sort of a brief synopsis of those events. But what I have got going on right now is the height of these boxes are restricted. So they have a maximum height of around 308 pixels and they have a lot more content inside of them. So what I would like to do is have it to where when I hover over one of these elements, they expand, so you can read them little bit and then when you hover off of them it closes back up again.

And I want that to animate. Now in the past of course we would have to do that with JavaScript, but now that support for CSS Transitions is fairly widespread, we can start using transitions to handle that sort of functionality rather than JavaScript and with the new support of the CSS Transitions panel in Dreamweaver, it's become really, really easy to do. Okay, so here I am back in Dreamweaver and I'm just going to go ahead and select the first one of these boxes. I am just in Design View and you can see here the amount of content inside of them. So there is a good bit more there than what you were seeing when that's previewed in the browser.

So with an element selected that I want to effect, I can go right up to Window and I can just choose CSS Transitions which will open up the new panel. Now in this instance I already have the element on the page selected that I want to create the CSS transition for, but the great thing about this panel, I can just begin building transitions without having any of the elements even on the page or selected at all. So it's a very flexible panel. Okay, so I just want to go ahead and click Plus to create a New Transition, and the first thing that it's going to ask me is okay, what element on the page do you want to target? And I can grab this pulldown menu and I can choose any Targeted Rule I want from my CSS Styles.

Now so you are seeing a list populated here based on all the styles that have my in stylesheet, but of course, you can type in a rule if you want. So if you want to create class from scratch that does a specific type of transition, you can type in the class name, you can type in compound selectors, whatever you want. So I am going to scroll down until I find the section.info. Now you will notice that all of your rules are in alphabetical order which is really nice. I mean you might expect to see them sort of in the order that you will find them in the stylesheet, but by organizing them in an alphabetical list, that make it a lot easier for you to find them from memory.

So I am just going to select section.info and I could have type that in if I wanted to. Now the next thing that Dreamweaver wants to know from me is what state of the element do I want to trigger the transition? So if I go up to the pulldown menu, you can see that they have got quite a few of them here. We have active, checked, disabled, enabled, focused, hover, indeterminate and target. But we were going to choose hover because that is the event that we want to trigger that particular hover event. Now at this point I can choose to use the exact same transition for any properties that might update upon the hover event. So if I change the height, if I change color or background color, width, any of those things, I could go ahead and use the exact same transition for any of them, or I can choose to use a different transition for each property.

And what that will allow you to do is use a certain amount of speed and easing for one property and then another amount of speed and easing for another. For example, you could have it to where the background change is after the element has already opened. So there are a lot of really cool things you can do with that. I am going to choose Use a different transition for each property, just so you can see how the interface changes. Every time you select one of these you are going to have a slight difference in the interface, but you are essentially doing the same thing each time. Okay, so I am going to say, Use a different transition for each property since we are only going to do one property, it doesn't really matter.

But in that case, that is exactly what I want to do. So I am going to go down here and click on the Plus symbol and you can choose any property that you want. Now you might think that we are going to transition height, but actually there is a little bit of a hole in the CSS specifications in the fact that the auto-height value isn't supported for transitions and it's a little wonky in most of the browsers. So what I am going to do is instead I am going to choose max-height which is actually supported inside the specification itself. For the Duration, it's basically how long do you want this transition to occur. Now I am going to type in 0.75 and that is seconds, but notice that the Transition panel also supports milliseconds, so if you want to choose milliseconds and say you can certainly do that.

If you want a Delay in terms of how long until the transition actually plays, you can set that delay, and that's really helpful for having a series of transitions that occur one right of the other, if you want to do it that way. You can also choose the Timing Function which is easing. You can think of it this way, easing would cause something to speed up at the beginning and slowdown as the transition nears completion, or it can go the other way around, and go slow first and then speed up. Whatever you want, I am going to ahead and choose ease. And for the End Value I am going to type in 999 pixels. Now that seems really tall but remember we are using max-height here.

So I'm saying okay, the reason I am telling these elements their max-heights should be 308 pixels, and then I am saying but when you hover over them, their max-height can be 999. Now that's not going to force it to be 999, it's just saying I am allowing that to happen. So what will happen is it will just go ahead and extend to the maximum height that it needs based upon the content inside of it. So it's kind of a nice way to work around that height problem. Okay, I am going to go ahead and Create the Transition. You can see in the CSS Transitions panel I have the section.info and the hover, it tells me that it is affecting six elements on the page, so I have six elements on the page that have that particular class applied to it that are sections.

We are going to do a Save All and I am going to go back into my browser and refresh the page, here we go, and now I can see the transition. So I have got nice little animation happening there. Every single time I hover over one of those, I can see the content inside of it, which is really nice, and that's happening for any of those that have more content in them than they can display. These don't, so you are not seeing it in those. So that was really quick and very easy. Now I am going to go back Dreamweaver for just a moment and show you kind of the housekeeping things in terms of how this works. If I go into my CSS and I target that section rules, as a matter of fact, let me target it really quickly, using the CSS Navigator I can come in and you can see that the syntax that it creates is really good syntax.

You get the WebKit, Mozilla, Microsoft and Opera vendor prefixes, plus you get the non-prefix version of the transitions, so that when the need for vendor prefixes is dropped, the code will still work. So that's working great. Now the only thing if I have to nitpick is this feature works so well, the only thing I would say is you'll notice that if I scroll all the way down, the actual hover, the trigger for the transition is placed at the very end of your styles. However, remember we do have a CSS Styles panel that allows us to change things visually. So if I open up the CSS Styles panel, you can see I can go way down near to the bottom.

I can grab this rule and I can simply move this up until I find section.info and then just drop it right below that. If I do the Save All now and go back into my main.css, you can see that it has moved the hover up there. So you can manually manage that. Now again, one of the really neat things about the CSS Transitions panel is it really doesn't matter what's going on within your code, this panel sort of keeps track of those things. So if you already have a file that includes CSS transitions inside of it, the transitions will display in this panel. It will introspect your code, it will find any existing transitions you have, it will display them in this panel and it will give you a visual way to manage and control those transitions.

In fact, you can edit these anytime you want. If I come back over here to my Transitions panel and I double-click on the transition that I've got, I am just going to double-click on this hover here. It's going to open this back up again and now I am free to come in and say, well, you know, maybe the animation should take one second. I am going to go ahead and save that transition and it's just going to go ahead and update the code that I already have in my CSS file. It's not going to change the position of the code, it's just going to edit the appropriate code, and now if I go back and refresh this page, now you can see the animation is taking slightly longer to complete, so I can decide whether I like that or whether I want to take it back again.

That's the great thing about this panel, it sort of gives you that freedom to play around and experiment visually without having to manage a lot of code and change a lot of code that handles all the vendor prefixes for you. To me the greatest thing about the CSS Transitions panel is that it just, it just works. Doesn't matter if you've created these transitions by hand or whether you have used the panel to create them, it's going to pick up on them and it's going to allow you to edit and modify them directly within the panel. So if you're like me, even if you don't use CSS Transitions a lot, you probably really looking forward to getting CS6, so you can dive into the CSS Transitions panel and kind of experiment and play around with them visually.

I can promise you, it's a lot of fun.

Show transcript

This video is part of

Image for Dreamweaver CS6 New Features
Dreamweaver CS6 New Features

11 video lessons · 14573 viewers

James Williamson
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 Dreamweaver CS6 New Features.

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.