In this lesson, you are going to learn about creating CSS animations in Adobe Dreamweaver. I have the module 5 lessons set up as a site over here. I did that by connecting my site to the lesson files folder for module 5. We're going to open up the animations document. We're going to go to live view. When we're in live view, we've taken just a part of a page and we're going to be working on that just so that we don't have a lot of information kind of conflicting with what's going on. What we're going to do is we're going to set this up so that both our boot and our backpack rotate. There are a couple different ways that we can do this and we're going to do a combination of using some of Dreamweaver's features but also getting into the code a little bit. We're going to go to the window menu and we're going to open up our CSS transitions panel. So we're going to start with adding transitions and talk a little bit about those and then we're going to get into some animations. So the first thing we're going to do is we're going to create a new transition. Now when we do that, we get a new transition dialog box and it asks us what we want to apply this animation to. So if we click on this dropdown, we have a number of different classes here that we could add this transition to. Our thumbnail align class is the class for our images but we're actually going to apply this rule to our columns. So our columns are in this case the box around the graphic and the text below it and we're going to add a hover transition. So when somebody hovers over the column, that's when we're going to get it to do something. So the transition duration is going to be one second. We're going to leave off the delay. We want it to happen immediately and we're going to talk about this timing function. The timing function is how the object is going to move. If it's linear, it moves all simultaneously at the same pace. But with an ease, we have an ease in, we have an ease in out, we have an ease out. So this is going to have maybe at the beginning, it starts off a little bit faster and then slows down or it starts off slow and builds up. So you have the ability to put in that timing and we're going to talk about that in a little bit. We could just click OK and create a transition but we don't have the transition property that we want to happen. So we're going to go to the property area. We're going to click on that drop down and this is where you could change any type of property. So if we wanted to change the color of something, we could do it in here. But in our case, we're going to do a transform. The end value is going to be a rotate and we're going to put in parentheses, 360 degrees. So what we want is for when we hover over that, we want our graphic to spin. So we're going to click on this create transition button. So once we have that transition, if we hover over either one of these objects, you can see the whole thing is rotating. So the rotate part is great. The whole box rotating, not so great. So this is where we have to go into code view to make a few changes. So we're going to click over into our code view. Now in code view, we can see that we've got an internal style sheet here. So all of our styles are here just to make it easier for us to talk a little bit about this. So we can see here that it has our columns and down here, online 53 through 55, it brings in a transition. There's our transition and down here, it's telling us the transition is hover and it's the transform rotate. So what we're going to do is we're going to cut this from our column. So I'm just going to select this and cut this and we're going to put it into our thumbnail align. So that's the class around our graphics. But we have to do one more thing because down here with our columns, it's saying when we hover, this is what we want to happen. But here we have to target that thumbnail align. So it's saying when somebody hovers over the column, the thumbnail align is going to rotate. So now if we click on this live button and we hover over either of our columns, you can see how the image is animating. But right now, all of this is relying on an action that somebody is hovering over this. So we're going to go back to our code view because the next thing we're going to talk about is how to make this an animation that just happens. Well, we have the starting points for this, but we have a little bit of tweaking that we need to do. So the first thing we're going to do is go down here and we're not going to delete out any code. We're just going to comment this out so that it's still there for you. So with that selected from line 71 down to 73, we're going to go over to our toolbar over here on the left and we're going to apply a CSS comment. So we're going to just comment that out. We're also going to go to our thumbnail align and we're going to comment that out as well. And we're going to change, we're going to put a new property in our thumbnail align. And that is the animation property. Now with the animation property, what we first have to do is name our animation. If we don't name the animation, then nothing is going to work. So we're just going to call this turn hyphen IMG. So turn our image. We want the animation to take one second. We are going to do an ease hyphen in. It's going to start off slow and get quick. We want this to rotate one time. Animations require keyframes. So keyframes are also part of the style sheet. So I'm just going to go down here. I'm going to scroll down a little bit. Right after that last piece of code for our columns hover, we're going to put in a keyframe. So we have to put in an at symbol. And we're going to type in keyframes. And then we have to tell it what name of the object, what we are creating these keyframes for. So it's for our turn image. And we're going to open up some curly brackets. And then what we want to do here. At the finished point, 100%. We're going to do a transform colon rotate. And we're going to do 360 degrees. What the 100% represents is where we want this to be at the end. You can put in where you want it to be at the beginning, middle, and 0%, 25%, 50%. Each one of those percentages represents where an object will be at a certain point. I'm doing rotate so we can see it twirling around. You can do transform translate. So translate will move it from one spot to the other. So you have lots of different options for how to transform an object. Now we're going to go to our live view. And you can see that when we refresh that page with our live view, our objects automatically rotated on their own. So with the transition feature, you need some type of an action, a hover, so that it will move. But with the animation property, you can make things move on their own. So in this lesson, you learned about creating CSS animations in Adobe Dreamweaver.
