Start learning with our library of video tutorials taught by experts. Get started
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.
In this movie, I'll show you the two approaches you can use for enhancing your web pages with CSS Transitions and Transforms. To show you how it works, let's replicate the enhancements we added in two different Chapter 2 movies, animating color changes and growing page elements. I have opened now the about.htm file from the Chapter 6/06_02/about folder, and we are going to start with animating the transitions to our sidebar links as we did in animating color changes.
And for that, we'll use the more straightforward of the two new Dreamweaver interfaces, that can be found in the updated CSS Rule Definition dialog box. Just to remind you what it is we are looking for, go into Live View here, and here we have a very subtle changeover when I hover over any of the links, you can see a light diagonal pattern appear. I am going to make that more prominent by bringing in this purple background color, keeping it a little transparent, so it will highlight that diagonal striping better.
So first I am going to just click into here, so over in my CSS Styles panel, which I have set in Current mode, I can find the governing rules, and I see I have two of them, one for hover and one for the regular state. Let's work with the regular state first section.info li a. So that's the anchor tag that's in the list item found in the section with a class of info. Now, once I have selected that, I am going to click the Edit Rule button and bring up my CSS Rule Definition dialog box.
Now I am going to go to the very last category, over on the left-hand side, Transition, and this is the panel that has been updated for Dreamweaver CS6. Let's go to the top here. Now I don't want to change, All animatable properties, I just want to change some very specific ones. So I'll deselect this option here. From the Property list I'll click add and choose from the list of, I think there are about 50 different properties here. Luckily the one I'm looking for is right up top, that's background-color.
And once you select your property, the other options become available to you, like we can set a Duration. Let's set that in for three quarters of a second, so .75, and you can see I have an option now to either choose seconds or milliseconds. I don't want any delay for this, we want to have it to happen right away, so I can leave that blank and from the Timing functions list, I have all the available values. Let's go ahead and choose ease, and then I'll click OK. You can see in the Properties pane of the CSS Styles panel that Dreamweaver has not only written out the basic CSS3 transition declaration down here that's highlighted, but it's also generated the vendor specific versions for both Mozilla and Webkit. It's a real timesaver.
If we want to replicate what we did for the Chapter 2 movies, all we actually need to do is to specify a background color for the hover state. So let me go down just a little bit here in my Rules where the hover state lives, and I am going to go through the CSS Rule Definition dialog box again. This time I'll pick on the Background-color option, get my nice little eyedropper and go over and sample the purple there, that's in Roux Academy. Now I want to be able to enter an opacity value or an alpha value, so let's switch it from the hexadecimal format to RGBA, and by opening up the color swatch again and then going to the options, I can choose Color Format > RGBA, and it will translate that for me, and that's fine, I can say OK. And then I can put my cursor into that text field and change the last value, which is the alpha transparency, or opacity, from 1 to .6.
Okay, so that should do it. Let's go ahead and click OK. Now it's already happening, you can see when I hover over the objects, I'm getting a really nice fade in of my Background-color, and when I move away, it fades out, very nice enhancement. Let's tackle something a little more complex, a two-dimensional transform, scale. For this effect, we are going to scroll down a little bit on the page, and we want to scale up these four images on hover to 50% larger than they are now and then add a drop shadow, and we want to do it all over the same duration and with the same timing function.
Dreamweaver handles all these chores in one step through the new CSS Transitions dialog box. To access the dialog box, you go to Window > CSS Transitions, and here you see the CSS Transitions that we just applied in the CSS Rule Definition dialog box. All right, let's click add and the New Transition dialog box appears. Now we want to be able to target a specific rule.
As you can see, if I click on the list, it will show all the rules that are available. The CSS rule that I want is #theArt img. So we are looking for images within the art div. So we want to set the Transition trigger, and we are going to Transition On > hover. Now we have an option for using the same transition for all properties or using a different one for each property. We're going to choose, Use the same transition for all properties.
Now I can put in my Duration, and let's have this happen over half a second, .5. Again, I don't want any delay and Timing Function, we have the same sort of control, let's just choose ease. Now to enter the Property, I will choose the add list, and this time we'll scroll almost all the way down to choose transform, and you may be thinking to yourself, where do I enter in the scaling function? Well, you do it right in the field called End Value. So scale(1.5), that will bring it up 50% larger than what the original is.
And where do we want to create this transition? Well, the only option at this point is main.css, and that's blocked out, but that's exactly what we want. So now let's choose Create Transition, and there you see a little bit of action happening there. If I go over and select it, you can see my hovering is already active. If I click into this, over in the CSS Styles Properties pane, you can see that transform property has been written out for me, including all of the vendor prefixes.
Now let's finish it up by adding a box shadow to the same CSS rule. So I am just going to click on Add Property here, and type in box-shadow, press Tab, and now we'll click on the middle Edit button here, and that will open up a nice little dialog box where I can easily change the values for my presets. Let's make the X-preset 3, Y 3, and the Blur radius 5 pixels. We'll set the Color to black. All right, looks good.
I can click anywhere to close and add that in. All right, so now let's take a look at our page, and we can even actually check the Go to Code and check the rule. Now when we go to code, you see the box-shall rule has been written in, but unfortunately it does not add the vendor prefixes, so let's go ahead and add that in. I'll copy it and paste in box-shadow a couple of times and then add in -webkit, -moz and -o, and let's paste it in one more time and put in -ms.
Okay just to cover our bases completely. So now when I save the page, head back to Design view, and I scroll over any of the images, I do see my nice little box shadow appearing, excellent! And you can see in the CSS Transitions panel my new #theArt img transition has been added, and if I wanted to change any of the properties associated with it, I have got a couple of options. I can go right through the Properties panel here and change, let's say if I wanted to make it 1.35 instead of 1.5, I could make the change there, or if I wanted to add a whole other property to it, I could go ahead and just double-click on the instances, and now the New Transition dialog box becomes Edit Transition. Certain parameters like Target Rule and Transition On are disabled, but other ones are available.
So, like I said, if I wanted to change this to 1.35, I can make that change, save the transition, my code is rewritten and the effect doesn't go up quite as much and impinge over the other areas. So that might actually be better. As you can see, Dreamweaver now gives you access to the full range of properties possible with CSS transitions and transforms right at your fingertips.
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.