Name: CSS and HTML 5 - Animations
Uploaded: 2020-04-06T08:27:46.000Z
Duration: 21 min 45 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Adverbs of degree

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.

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.

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.

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.

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.

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'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%.

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.

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.

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 saying that border to be solid, and I'm setting it to be black.

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.

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 to go from the square to the circle for this?

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.

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

Subtitles ListPlay Video

CSS and HTML 5 - Animations

multiple

basically

script

component