Understanding Keyframes Rule in CSS

Hello guys.

Welcome to our CSS series.

In our last segment we saw a CSS animation property.

How we can animate the elements.

 Without using hover property we had changed the background of a rectangle and the colour change should happen constantly, we had done that as well.

And after that we moved the rectangle in a position. How will a rectangle continuously move on the path? This we're done through animation.

I hope in the last segment, whatever practical we have performed, that you have practised on your own.

If you have any questions while performing the practical or during the segment, you can tell us on forums.learnvern.com.

We will revert to all your queries with solutions over there.

Our today's segment is on keyframe, the last animation segment that we had conducted in that we have already used keyframe.

In today's segment we are going to see the key frame in detail.

First of all, how is the keyframe rule applied? So, for that, like we had seen in the last segment, in keyframe we apply one rule when we work with animation how we have to do the transformation in our animation, like it is written here, the CSS properties for the elements at each state with a timeline.

When we had taken that example of 0% to 100%.

At that time between 25%, 50%, 75% , we had added three phrases.

That is how the transformation should be completed.

We had done this through the keyframe in our last example.

We can create complex animation properties by using the keyframe, an animation is created with the changeable CSS styles that can be repeated indefinitely or a finite number of times.

Run it indefinitely or for a specific time.

All this we can do through keyframes, through animation.

But using key frames we can even perform complex animations.

A simple animation can just have two keyframes, while the complex animation has several keyframes, meaning the last two examples that we have seen in that we have used only one keyframe.

In today's example, we will use more than one keyframe.

We will perform a complex animation.

Complex means tough.

But we have to add more than one property in different ways.

That we will differentiate, when we make it different, we get an idea then from the first keyframe so and so properties have been applied, from the second keyframe so and so properties have been applied.

We can apply multiple keyframes on one element, so that a proper animation can be generated.

To use keyframes, we need to create a keyframe rule along with the animation name, property for matching an animation with its keyframe declaration.

So even this we have done, we write a keyframe keyword.

Then we write the animation name and then we declare it.

Here they have given it’s syntax keyframes.

Then we have to write an animation name, whichever animation name we have defined.

Then the keyframe selector means all our properties and then CSS times.

Selector means that basically which form or to which we are using or we are going on percentage, 0% , 100% , which selector we are using.

Here they are calling it a keyframe selector.

Next we will go ahead, here the three properties which have been given, animation name, keyframe selector, CSS styles from that, animation name indicates what is the name of the animation.

Keyframes selector indicates whether it is 0% to 100% or from and two, from these two, whichever we want to use.

CSS styles means multiple CSS styles property.

Now keyframe timings, this is very important.

With the help of key frames, we can give timing to our animation.

When we added the timings so that they should be in which way, you had seen that when we had performed the rectangle practically, the rectangle went from one place to another and from the third, fourth and it again came back to its native position.

Now this entire animation of ours.

How should it be? Means linear indicates how it should be its start to end.

Ease means start slowly.

Then stay slow for a while.

Then you increase its speed and then again become slow.

Ease means slow, fast, fast, slow.

In this way its animation happens.

Ease in means initially stay slow, but at the end you become fast.

 Ease out means initially fast and after that slow.

So, this is our alternative effect.

It's vice versa.

In ease both of them come, in ease make it start slow.

Get fast for some time.

Then again become slow and then end the animation.

Depends on the animation that you require.

In that way you can use this animation.

So here we have an example, in this example, we have added all the properties, time duration and our timings, even that we have added.

So, now we will perform these first practically.

Practically we have to know how we will take a square block; we will change its position along with that we will change its width and the height.

Along with that we will also rotate it.

So basically, we will do three to four things.

We're going to change the colour, changing width and height, then rotating it and then taking it to one position from the other.

In this we will also add our timings.

First it will be slow then it will be fast.

All this we will add.

So, what we will do first of all, we will open one sublime text, HTML Example key frame.

Okay.

So, this is our example Okay, so what we will do in it, we will generate one program.

So, first of all, what do we want? We will need a division like we have seen in this slide.

We will need width and height so that a square can be generated and then we will perform the animation.

So, let's go here.

Here we will take one div.

So, this will be a square div and below we will take one p tag for example, if you will write any line above the rectangle will be animated.

Okay.

Now the div that we have taken will make it a square.

So style, div.

In this we will take width and let's say width we will give 200 pixels, initially and after that we will give the height of 200 pixels the same so that our rectangle gets generated.

Now we will perform animation over this, so the first animation would be of the colour that I will show you and after that we will also show the transition.

So let's say my first animation is…I will name it demo.

In demo animation, we will assume that it should get completed in five seconds and it should last for infinite time.

Okay same webkit, so that this continues in the browser as well.

Then after this, we want that the square that is there, we'll give it a little border radius.

For example, 40 pixels okay.

So, we are not seeing it currently as it is generated in white colour.

So, it is not visible as the colour is white.

So, what I will do is in my keyframe rule, I will add it, background colour.

 Keyframes, demo, now we want to do this gradually… first one set, then second then third.

If we want multiple stages, we follow multiple percentages.

So, 0%, on 0% I want the background colour to be red.

After that I want only this much, as we have already defined the width and height.

So, 50% When my animation is half, I want the background colour to change to yellow and width should be 100 pixels and height should be 100 pixels.

So, initially our height is 200, 200.

Means my square is big in size and I want to make it small with the animation.

We will save it and run it.

So, you can see that my big square has become small and again it is becoming big and is hidden.

As we have not defined 100%.

So, the colour that is not defined here, it is taking that.

Means my white colour.

So, you can see that my square is becoming bigger, it's getting white and then again small.

I want that 100%, when it gets over, it's colour should again turn from red to green, width should increase even more, 300.

Reload, green.

Again, it is starting.

Red, yellow then green.

In which the biggest square is visible.

Okay, so this is our animation that is getting performed.

So, we have defined one keyframe rule with infinite time, in which we have changed only the colour, height and width.

Now with the comma I will add one more, same animation.

Here I will add, first of all now I want to transform it from one position to another and I even want to rotate it.

So here I would give the name as trans as I have to transform it.

I want it to be completed in five seconds.

Same, I want it to run for infinite time.

So, I have added it now.

Now I want that @keyframes, this is my name.

Now we have taken three stages here: zero, 50, 100.

Even here we will take zero, 50, 100, 3 stages itself.

First is my transformation.

So, what will I add in transform, I want that initially I want that one square should be at zero pixels.

For that I will transform on zero pixels.

Here I will add another scale.

How much scale do I want to keep? I want to keep it 1.4.

 Now the question will come, what does scale do? Scale is the property which defines our image initially which is 200 200, on 200 200 how much should it look to me actually.

If I give 1.4 or value till 2.

I can take it.

Currently I'm taking 1.4.

So, I'm scaling it, if it is 100 pixels it can go till 1.4 scale and get visible.

So, we will perform it practically and show it how it works.

I'm also rotating my square together at 80 degrees.

So, rotate, how much? 80 degrees, 80 degrees, Okay, fine.

Initially let's see if I comment this, save.

Now this is not visible to us.

So, let's add a temporary background colour, okay.

So, you can see that we are not able to see anything now.

At 0% we are not able to see transform neither are we able to see scale nothing we can see.

So, I'm writing here 50.

Now, I want it to be translated on 250 pixels and the scale should become smaller than 1.4 and in place of 80 degree, I'll perform the transformation at 40 degree and initially at the end the 100% transformation I am making it even bigger, transform at 350 pixels.

Actually, it is translated.

Okay.

In place of 1.2 we will take 1, means as it is and here, zero, save.

While we can see that my animation is not performing as we have commented.

So, there are no effects that are coming.

So, we will remove all this as it is what we had taken okay.

So, you can see that when we are reloading this it is not working.

So, all the properties that we had taken.

We will remove the semicolon as all these properties are being used together.

Now we will run it.

So, you can see that it is becoming big and small even now.

But the transformation is not being performed.

So, this is not working.

The reason for that is after this animation we have added another animation.

In another animation we have not added this line still, so we will add it here, save.

So, you can see that from one position to another position and then again third position.

So, my rotation is also getting performed here.

So now what I will do is I will comment this line, even this I will comment and save and I will remove this temporarily.

 Background colour we will have to give.

Okay, so now you can see that my square is normal, which is going from one place to another.

So initially my square is translated as zero pixels, which means it starts from here.

After that we have given it a scale, it is looking bigger.

If there is one scale, the last one which is there, we can see at the end the square becomes this rectangle.

This is 200px, 200px.

That means our scale becomes 1.

1.4 and 1.2 compared to the main sale, I am on a bigger scale.

So initially if you see the rectangle is big, then it is becoming smaller and then again smaller.

This is happening, our rotation is getting performed at 80, 40 and zero degrees and then translated, So, we are going from 0px to 250px distance.

 Means from here translate, we are coming here.

From here till here.

This is our trans one.

So, we have seen two different key frames, the first one was with the demo, which was the colour one.

The second one is the transition to transform.

If you see the transform independently it is happening in this way.

We have seen the colour one before.

Now, in this demo again.

This is my demo Key frame.

So individually, we have seen both the keyframes, now we are making it one here, reload.

So, my colour is also changing.

Height and Width are also changing.

Means this keyframe is also getting added in animation, even this animation is getting added.

Two animations we have combined through two different keyframes.

So, this is our example when we are doing more than one task.

We are using more than one keyframe.

So, this is our example.

So, we can show it by using multiple keyframes.

So, this was on keyframes to add more than one.

In our today's segment.

We have used multiple keyframes for one animation.

I hope the deep level key frame segment that we had today, you have understood.

You have understood all the theories as well.

If you have any questions during the segment or while doing the practical, you can tell us on forums.learnvern.com.

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

Our next topic is the Z index.

Thank you.