Join James Williamson for an in-depth discussion in this video Working with CSS3 transitions, part of Dreamweaver CS6 New Features.
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.
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.
- Exploring the interface changes
- Reviewing the FTP enhancements
- Using the new image optimization workflows
- Applying multiple classes
- Applying CSS transitions
- Taking advantage of the jQuery Mobile theme support