Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy, and in today's class, I'm going to be showing you how to do basic animations using CSS.

So one of the cool things about CSS is that you can actually do animations just with CSS and a little bit of HTML.

You do not need JavaScript.

You definitely do not need flash.

Basically, just with CSS and HTML, you can create a dynamic movement on your HTML document or your Web application.

Now, when you're going to be dealing with animations in CSS, it's important.

Understand?

There are two components.

The first component is you're going to create a class.

So we've been creating lots of classes over all the classes that we've been.

We've been going over on where you're going to create a class Maur or less like normal.

But then, in that class, essentially what you're going to be doing is you're going to be pointing towards an animation, So basically, you're going to be pointing towards settings that are going to change during the animation.

You're going to say how long the animation showed last war, and then you're going to say how many iterations the animation should run for.

So that generation thing is a very important thing to remember, because sometimes when you when you do, when you create the class, you point toward the animation configurations, the whole nine yards.

If you forget the federation, it will only run once.

So basically, whatever you set up, it will only run once, and it will stop in the animations that we'll be showing you today.

I have set the animation it oration count to infinite, so it'll keep running, running, running, running, running, running, running, running, running, running and so on.

So with that, let's go over the computer so I can show you how animations work within CSS.

This is pretty cool is pretty easy to be of add into your HTML documents and again to be clear this is not using JavaScript or any other coding language.

This is just pure CSS and HTML.

So here we are at my demonstration machine again, I am using a Mac book.

So I used text edit to write these two files.

But all you need for CSS and a female is a basic asking text editor.

So if you were in the Windows world, you can use no pad in the Mac world.

Obviously, text at it.

If you're in the Lenox World, you can use nano them g et it, whatever you like.

Eso Before I actually show you the code here, the CSS and the HTML let's actually go over and see the demonstration.

So you have an idea of what we're going to be coding for.

And so basically, here we have three examples of animation.

So, uh, with these examples, essentially up here, this top example I am showing you how you can king the border radius to basically turn a square into a circle.

So basically what I did here is that created a div.

I gave it a border that think it's five pixels black s so you have that border there and then all I'm doing for this particular animation is I'm simply going from a border radius of 0% to a border radius of 50%.

And so that is turning a square into a circle.

And this is all being done with CSS now at the bottom here.

What I've done is I've created what's called key frames.

I'll show you that in a second.

I've done the key frames, but then I've actually created two different classes.

And with those two different classes, what I've done is I've modified the color of the square that's bouncing and I've met modified how long theano nation should take to run.

So when you're dealing with key frames, you go from like 0% to 25% to 50% to 100%.

Right?

Well, what you can dio is basically when you create the class, you say How long should take that animation to run S O for this animation up here?

I think I have it running for about 10 seconds.

And for the animation on the bottom, I have it running for five seconds.

So basically, this is where I'm reusing the exact same animation.

I simply came the color of the box.

And I've came.

How long it should take four for actually run before we get to the CS Astra.

So let's go take a look at the HTML real quick.

There really is almost nothing to this HTML again, we're gonna open up the HTML we're gonna open up the head on.

Then we're going to be doing is we're going to be pointing to the animation style sheet.

So this is the animation style dot C s S.

So if this style sheet is in the same folder as the HTML document, you simply put the name for it.

If it's in a different folder and then you put the full file path then down here, literally.

All I've done is I've created three different lives.

I put in breaks in the middle just to give a little separation.

And then, with these dibs, I am simply using different classes.

So for the first, it's animation one.

So that's animation one for the second.

It's animation to.

So this is animation, too.

And then for the third, that's animation three.

So basically all I've done is I've just created these dibs.

I've given them different classes, and then that's what's showing up in the came out documents.

The HTML document itself is ridiculously simple.

Course we close the body and then we close The age came out.

So what makes this animation interesting is when we get over to the CSS said, Let's go take a look at that.

So here I've actually written everything out.

Have that they're so it looks a little bit better to give you an idea of how this works.

So the first, this is all the information that's needed for animation one.

So when I'm talking about animation one, I'm talking about this animation right here.

And so this is all the information that's needed for our animation one.

So what we're doing here is we're creating a class for the animation, and then we're creating the key frames and we're giving those key frames and name.

And so basically, this is how the animation should run.

So what I do for the class, So I'm carrying the class more or less how it normally create a class.

So what I'm doing is I'm setting the with 2 200 pixels, so it's gonna be 200 pixels wide.

I'm setting the height to 200 pixels, so it's 200 pixels tall.

And then what I'm doing is I'm creating a border.

I'm setting that bordered five pixels.

I'm saying that border to be solid, and I'm setting it to be black.

Right.

So basically this right here is what gives me a 200 pixel by 200 pixel square.

Then we get down to the animation component.

So here we're then going to say is with this, we're gonna have an animation, and we're going to call the name of that animation.

So this is shape shift.

And so I have at key frames here, and this is called shape shift.

So this is going to call this animation that we've created.

We're then going to say animation, hyphen, duration.

So how long should this animation take?

So to go from the square to the circle for this?

How long, Basically, how long is that?

So we're going to say this entire animation should run for five seconds.

So it is important to understand that the duration is dealt with here, not in the key frame area.

So if I wanted to set this to, I don't know, like, 10 seconds to make this slower.

I do file, I do save.

Then I go here, I refresh.

And now we can see that's running a lot slower.

So it is important to understand that the length of the animation is actually set within the class, not down here with the key frames.

Then you're going to say how how many times should the animation iterated through?

So again, this depends on what you're doing, What your project requires.

I would argue for a lot of these projects.

You probably wanted to be infinite.

So infinite means is gonna go, Go, go, go, go, go, go, Go on Infinitely.

But you could set it to 12345 Whatever you want.

Eso You set that there.

Then we get down to the key frame.

So basically, with the key frames, what you're saying is, what should the different frames in the animation be, And then what CSS is going to do?

CSS is then going to fade from one key frame to the other.

So with this I give, I've given you the first example of from two.

So the first thing that you could do with key frames and simply say go from this CSS styling to this CSS styling.

Don't do anything else, all right?

So we do at key frames.

So do at key frames to create the key frames, we give it a name, so give it a name.

Whatever you want, you open up with the squiggly brackets and then you can say from So what we're doing here is I want to go from border radius of 0%.

So border radius of 0% means is a square again.

Do the semi colon, and then you close the squiggly brackets.

So you have squiggly brackets here, right?

So this is where you have two sets of squiggly brackets, squiggly brackets, pretty in all the key frames and then in the from to you also have your squiggly rackets.

So you say from and then you put whatever styling you want in here, so border radius, colon 0%.

Then semi colon closed squarely brackets.

And then we're gonna go to we're gonna say, border radius colon 50% again.

Semi colon squiggly brackets.

And so 50%.

That is what gets you the the circle So basically, if you have a border radius of 50% that's gives you circle.

And so basically what's happening here, then, is this class is then calling these key frames.

Thes key frames are going to go from a border radius of 0% to a border radius of 50%.

You appear the animation duration will be 45 seconds, and the it oration count is going to be infinite.

So keeps go and go and go and go and go.

Right.

And so again, you could go.

And here you can modify different things like you can actually put multiple things in here.

So I could say, Uh oh, I don't know, back ground hyphen color on.

Then we could say, Let's take it from Red Colin there.

So basically the background color will start as red, and then we could go here.

Background, hyphen, color.

Turn it to green.

Let's say we do a semi colon here, so basically again, you can put multiple weaken, but both multiple things in here you do file we could to save than we knew.

We refresh.

We can see now it is going from a red square to a green circle, right?

So, again, you may.

For whatever reason, I did that class before where showing you like alert animations like maybe you wanna have an animation for an alert, like if the temperature goes above a certain level, you want what?

An animation to do something.

So this is where just to show you with an animation like that, you can have multiple things happen.

You can change the shape of the object you're dealing with.

You can change the color of the object you're dealing with.

You can change many things.

So that's the first thing.

So basically, with this, this is where you can say from go from this styling, whatever that styling is to this styling and will simply do that in the amount of time you've given for the animation duration.

Um, and it will do that.

However, many times you've told it with that animation iteration count.

Now let's go down And let's look at the next two examples to the interesting part about the next two examples is actually I'm reusing Ah, one key frame set that I created.

So basically, this is where I want to show you that when you're creating these classes, and when you point them at one of those key frame sets, you can have other settings to basically make these classes unique.

So basically what you look here is animation to I've created a box that is 50 pixels.

I've created a background color that is red.

It's pointing to the animation of here.

They're the duration of that.

Animation is 10 seconds and the federation count is infinite, right?

So basically, we're gonna have a red box.

It's going to be animated by here.

There is going to last for 10 seconds, and it's going to keep doing that forever.

The curious thing is, here is we're gonna go down and much of this is the same.

Basically, I've copied and pasted almost all of it.

But for animation three, we still have the width and height being 50 pixels.

But then we're gonna make the background color blue, pointing to the same animation.

But then the duration for this is only going to be five seconds, so that's going to go a lot faster.

The federation count is obviously also going to be infinite when I go down and I look at the look at the key frames.

Basically, what I've done with the key frames here is simply modified.

What the left margin or the margin left for the def should be.

So that's what gives us the bouncy thing.

So basically, what I've said is at 0% for the key frame.

So it basically at the zero key frame, the first key frame.

I want the margin left to be nothing.

So it'll start all the way on the left at the 10% mark.

So basically a 10% through with the animation, I wanted the margin left to be 10% at the 20% mark.