Understanding animation in CSS

 Hello guys.

Welcome to our CSS series.

In our last segment, we had seen the transition delay property.

When we add the transition for example on hover, with the help of the selector.

At that time, how we add the transition in it and how we add the transition delay that we had seen.

I hope whatever we have taught in the last segment, you have practiced it and you have performed the Okay guys, So let’s start !

Our today's topic is on CSS animation properties.

How we can add animations in CSS.

Like the name suggests, we can add animation inside a web page using CSS.

It can be used as a replacement for animation created by flash and JavaScript.

Means, if we have added a long code with the help of JavaScript, and we have performed the animation, in CSS we can do the same thing with shorter code.

Animation makes an element change gradually from one style to another means to the element of one style, we can change and convert it into another style of element.

For example, if there is a square, making the square a rectangle, then we can perform that through animation.

okay!

You can add as many properties as you want to add.

Last time, when we had seen transition, transition was used to control the animation.

We can say that.

We are only adding timing into it.

In one element’s transformation if we add the timing that we do through transition.

But what happens with animation?

 We can add as many properties as we want, using animation.

You can also specify the changes in percentage.

Means we can give the changes in form of percentage.

For example, if initially, there is any element, we will call the initial state as 0%.

And when that animation gets over, whatever we want that performance gets over, after that the end element that we get we call that 100%.

Initially, my animation will be at 0% and when it is completed, my entire animation gets over.

We call it 100%.

Here , something has been written at the end as a note.

CSS three @keyframes rule, when we perform the animation, we use @keyframe keyword and only then perform the animation.

When we do the practical event then we will see that, whenever we want to perform an animation, it is mandatory to use @keyframes.

Okay, guys!

In today's segment, we will take on animation and the one after this we will learn keyframes as well.

We have divided this into two segments.

So, in today's segment animation and in our next segment keyframes, but in our today's segment, we are going to use keyframes with the basics.

The animation is created in the @key frame rule, it is used to control the intermediate steps in a CSS animation sequence.

Means if my animation is getting performed, and to reach from 0% animation to 100 % animation, in between 0% and 100%  I want any changes ; for example my animation is starting at 0%.

And I want that 10%.

It's colour should be red.

On the 20th It should be green.

So, on these different stages, the different CSS that I want that we can get through @keyframe rule.

How does it work?

Means how does this animation work?

 When the animation is created in the @key frame rule, it must be bound with the selector, otherwise the animation will have no effect.

This means when we apply the keyframe rule at that time, we have to add a few selectors to it.

For example, Hover is one of our selectors, after and before are also our selectors, even that we are going to learn.

So, all these selectors that are there.

We will add that, only then our keyframe rule will get active.

The animation could be bound to the selector by specifying at least these two properties.

So, which of these properties can we use?

 The first one is the name of the animation.

And the second one is the duration of the animation.

Means when we perform any animation.

We have to either give the name or we have to give the duration.

Name means where I have used the animation property.

Let's say there is a division.

In that division, I'm giving animation.

So, when I will apply the key frame rule, how will my keyframe know on which animation I have to perform this or I have to apply these rules.

So, for that we use the names, animation for example, my animation’s name is my first animation.

so like, Animation, then my first animation, my first animation we will use wherever we have defined keyframe rule.

This is a little difficult to understand.

When we perform the practical, we will see there and at that time it will be clearer.

Animation properties, here in the slide all the properties that have been given, all these properties are related to animation.

For example, the first property is of keyframes, when we use the animation at that time we make use of keyframe.

For example, here ,there is an example given, here you can see that I have used animation property after that, my first, then five seconds, like we had seen in the slide here, the name of the animation and the duration of the animation.

Means we can use these two things for our animation, here you can see animation.

The first is my first, this is my name, five second indicate seconds, five seconds would be my duration.

So, wherever I have to apply keyframes related to this animation, there I will use my first name.

So animation; my first, here is my WebKit keyframes, my first and for the normal browsers, @key frames,my first, both these key frames will do the same work.

But wherever I have to tell the keyframe for which division, for which animation, these 2 rules will be applied.

So, for that, I have to indicate the name.

So, let’s say!

If on my web page I have applied more than one animation, on more than one element I have used more than one keyframe property.

Which keyframe rule will be applied to which animation for that my first or seconds, means name and duration, we will use these two things.

Animation, animation is a shorthand property used for setting all the properties except the animation play state and the animation fill mode.

Apart from these, whichever properties we want to give.

We can give in animation, along with it, together, my first, 5 seconds, without comma, by giving space.

We can give multiple properties together using animation only.

Animation delay means from when to start the animation, like transition delay means after how many seconds or milliseconds, we have to start the transition.

In the same way, animation delay describes after how much delay our animation should start.

Okay, guys!

Animation direction.

It should happen in which way, whether it should be in a forward direction or reverse direction.

These two are defined with the help of animation direction.

Animation duration means how much time or animation’s one cycle should be completed.

Like we have seen in the key frame from zero to 100%, is our one duration.

From zero to 100% my animation gets over.

So, my duration is zero to 100%, how much time it should reach that will be defined by animation duration.

Now, Animation fill mode, it specifies the static style of the element when our element is not there in the animation how the elements should look?

 It defines how the animation should look.

 Iteration count, the number of times the animation should be played.

For example, let's say that I am turning a square in this way, in the forward direction.

Now, this happens once, that's it.

Now, I want this to happen five times.

So, in the iteration count I will define five.

I want my animation to keep turning around infinitely.

So, I will pass the values accordingly.

Iteration means how many times and till what time it should keep on happening, animation.

Animation play state means whether it is running or paused, whether the animation should be running or it should be paused.

It will be defined by that.

 Animation name.

It specifies the name of @keyframes name.

Which we have seen in the example as well.

Animation’s name is my first.

Animation timing function, it specifies the speed curve of the animation, means in how much time our animation should get over but actually this is defining the speed.

Like you see in the TV, there is a forward option when animation gets over fast or slowly.

So, there is a difference in duration and timing.

Duration defines how much time our one cycle will be completed and the timing defines how fast this should happen.

clear guys! okay!

And now, we will come on, it's practical.

So, let's say I will open Sublime Text and we will set it on HTML, till the time we don't practice on our own the example of animation it will not be clear for us.

So, it is very important to practice.

Example, animation 1.(pause)

Okay.

Now, we will also run this program.

Okay.

So, this is our program. Now, we will add in this animation.

So, to add the animation, let's say in my slide, we have taken an example.

Changing the background colour of a rectangle from red to black means we will generate one rectangle, we will give a background colour to that rectangle then we will change its colour from red to black.

Here, the animation property which we will use of the key frame.

It is from and to.

We saw that we have to go from zero to 100%.

For that, there are two ways to perform both the practicals, in the first one we will use from and two and in the second one, we will use zero and 100.

Got it?

If we want such an animation, we have to go from initial phrase to end phrase, in that case we can use from and to.

But, what if he wants such an animation in which we want to go from first phrase to the end phrase with some mediator changes.

Like I had given an example.

On 10%, the elements should be first red, then blue then green, and then black.

If we want to go on with different colours, in that case, we can use the keyframe of 0%, 100%.

But if you want only the initial and end phase, in that case we will use from and to.

So, our first practical is to change the colour of the rectangle from red to black.

For this what I will do is I will generate one division in my body, in the division let's say, I take nothing but I will give the entire division a style.

Style for example will be my width 100-pixel, height 100 pixel, background colour.

Now, we want the background colour of the rectangle from red to black.

So initially, we will keep it red, okay.

Like we know this should be performed with animation.

That’s why, animation, we will name this my first as of now and this animation, we will complete in five seconds.

Okay, if we are performing the animation with WebKit, we will set it for other browsers also, animation.

Same things we will give, my first five seconds, save.

So, this is our division.

Okay guys!

This rectangle has come here.

Now, for this we will take one h3 tag here, hover the rectangle to change the colour.

Okay.

Body, text align centre and division also margin; zero auto.

Okay, so our things have got centre aligned here.

We will zoom it a little.

So currently, I'm hovering on it but nothing is happening.

So now, we will perform it through an animation, so to perform an animation we have to use the key frame.

So first of all, for this as you can see that here in this slide also it has been written for Chrome, Safari and Opera.

We have to add the WebKit and in Standard Syntax, if we want to perform normally.

We can even give normally as well.

Initially we will perform normally, key frame and then why name which is my first.

Okay.

In this what we have to do, we only have to change the colour of the background.

So, we have two things with us first is from, in from what I will write, background colour, red and after that will come; to semicolon ; to background colour.

In the colour, I want to change red to black.

Okay.

So ,what we did, we added a keyframe rule.

On what, on my first, from red to black.

We will save it, so now I'm hovering on it.

So, you can see that my colour has changed from red to black.

Now, I will hover again on it, animation gets performed only once.

That's the reason.

Okay, guys!

So here, we have not defined the hover.

So, this is not running on hover.

Whenever I'm reloading the web page, whenever I'm reloading it, at that time this will happen.

I reloaded it again and it is changing the colour, black is again red.

I will reload it, again it will become black.

Every time, when I will reload the page.

My animation will be performed.

So, this was our keyframe and the same thing we will apply @ keyframes on adding WebKit.

So, this will define that our keyframes work properly on the other browsers as well.

So, you have seen that,  Without WebKit also, I'm using it in the Chrome browser and it is successfully running in it.

So, if there are other browsers, where it is not working, in that case, you can add this.

So, you can see that our animation runs only once.

So, what I will do is, I want my animation to keep on working.

For that animation, iteration count, infinite.

We will add it, we have reloaded it again.

So, my animation turned from red to black.

And then again, it is changing from red to black.

So, giving infinite means that till the time I don't close my webpage, till that time my animation will go on performing continuously.

So, this is my animation use.

Okay, clear!

In this way, we have other properties also available in animation like delay and direction, you can add it one by one and control your animation.

Means you can perform the animation as per your wish.

Got it?

Now, we will go on to our slide.

So, this was the animation using; from and to.

Now, we will go on to the second practical, our second practical is on percentage value, means, how can we… here you can see 0, 25, 50, 75, 100.

We have given different percentage values because here you can see that our animation question is moving rectangle, means we have to generate one rectangle which keeps on moving on my screen, moving means every time it will go on a certain position then second position then third position and finally, it will come on its own position.

okay!

After moving differently, I want my rectangle to reach a certain place So, in this moving rectangle, on every phase from where to where my rectangle will go, from their third position, from third fourth and from fourth again my earlier position.

These things if you have to define individually, I will apply the way of 0% and 100% of generating animation.

Here I will apply that.

So, here we will  generate a program and we will see the CSS very carefully as this would be a little different.

Okay!

HTML, example animation 2, save,  animation 2.HTML. Now, what we have to do is we have to perform an animation in which we will make one rectangle and that rectangle will keep on moving so, first of all we will take the same h3, this is an example of moving rectangle.

In the last example, we didn’t have to hover, so we will remove this line, the rectangle will continuously change the colour.

okay.

So, here it is: This is the example of a moving rectangle, for this we have to take a simple division.

So, we have taken the division.

So, now we will generate this division with the style, we will generate a square, so body, text align, centre,  Now, next is our div.

In div, we will take width 100 pixels and height 100 pixels, after giving width and height, we want that we should add some colour also to it.

So, let's say background colour we will take red initially and the main thing when we had conducted one segment, on position we had seen.

Our position of the elements that are there, sticky, absolute, relative fix, these kinds of positions were there.

So, if we want to perform the animation So, always on whichever element we want to perform the animation, we will take its position relative only.

So, here position relative, So that our element can leave its space and go to some other place that is the reason why we take the position relative.

It is not necessary, like we saw in the last example, square and rectangular is not going anywhere, it is not moving anywhere.

In that case, our entire rectangle is static, fixed.

So, we have not applied for any position there.

But in the current scenario, our position is changing.

Our rectangle is going from one place to another, that's why it is mandatory to give the position relative, after the position, we will give animation, which is our main task.

So, let’s say, in this we will give, my rectangle, We have given the name.

We want this entire task to get over in five seconds.

So, I will also give the duration as well.

Same thing for WebKit and for other browsers, Okay. Clear!

Now, we will add the keyframe rule.

Before that, we will check if our program is properly running.

Okay, so you can see that our rectangle has come here.

Okay, so this is an example of a moving rectangle, this is our rectangle, this rectangle will move.

So now, in this we will add keyframes and its name is my rectangle, there shouldn't be any spelling mistakes  that is the reason why I'm preferring copying and pasting.

It's my advice that you do the same.

If you want that there shouldn't be any spelling mistakes and this should properly work.

So in my keyframes we will first of all add 0%, which means initially what should be the status of my rectangle.

Let's say, I'm keeping the background colour red.

With the semicolon, we will add another property.

We had added all the properties on the top with semicolons.

So, even here we will give a semicolon.

Okay, guys!

Now, I want it to initially be in the 00 position.

So, Let's say left zero.

Top, top zero.

Okay.

Now, the same thing at 25% means when our animation is half of the half, so on 25% I want my animation to change from red to yellow.

I will give the top zero but I will move to the left and make it 300 pixels.

Okay.

Means mine is in only the left direction.

Rectangle is going from here to here.

So, from top it is zero position and when it comes here, even then it is at zero position.

So, top we will keep it fixed as zero.

Now, after coming here I want the rectangle to come down.

So, I'll take 50, background colour Blue, left we will keep as it is.

Here, we will make 300, so it will come that much below.

Now, After 50 ;75.

Yellow has turned to blue and blue I will make it as green So, again this from top it has come to left and it has come down and it should again go to its original place.

So, I will make it only left zero from top.

I will keep it 300.

I will keep it as it is.

 And I wanted it to be in the original position currently, so I will keep it as it is, red and I will write here 100.

Okay.

So, from 0, 0 (zero zero) to 300, 0,( three hundred  zero) 300, 300,,( three hundred three hundred) 0, 300 (zero three hundred )and 0, 0. (zero zero)

So, this is my animation, I will save it.

And then we'll reload it.

So you can see that my colours are changing but my rectangle is not moving, only colour is changing.

Okay.

The key frame that we have added, in that there is any problem.

We must have added some wrong rules.

What is it that we will check now?

 So, you can see here in every place we have added left, top, left, top.

The 300 that is there, what is it?

 It is pixels. That's the reason 0-pixel, 0-pixel, 300 pixel.(pause)

We have added px in every place.

 Okay now, we will reload it, after reloading you can see that our rectangle starts to move.

But from here, it is directly jumping here, which means there is something wrong.

So, here it will go in the place of zero, 100%, again we will reload.

Because, throughout the animation, we require a smooth transition.

If I want to keep this animation continuous.

I will give it infinite property.

And this same keyframe we will copy and we will add WebKit, so that it runs in other browsers as well.

Reload, on reloading you can see that my rectangle has turned around once and it's moment is continuous.

This will be continuously on.

So, this is on how we can perform the animation.

I have reduced the width.

Okay.

So, my animation is performing.

We will come on to the slide.

We have seen it in both ways.

How we can perform the animation by using from and to and how we can use the percentage values and perform it.

We have covered the key frames in today's segment itself.

But, we will cover a detailed segment on keyframes, which we will see in our next segment.

Clear guys, understood!

Guys, today's animation segment, if you have any question or query during the segment.

There is nothing that you have not understood or if you have any question in the practical.

You can ask us on forums.learnvern.com.

Along with that I request the practicals that we have done today.

Such a practice, if you want to perform any other animation, you can perform the practical accordingly.

You perform the practical and check if it is getting properly performed.

If you are getting any questions during the practice, you can even tell us on forums.learnvern.com.

We will try to revert to all your questions with solutions over there.

Our next segment is on key frames.

Thank you.