how to code css3 keyframes animation: Concluding part

how to code css3 keyframes animation: Concluding part


The same thing goes for the Pink Ball as we
can see over here in this case I have named it as diver1 this is the second element
diver1 here I have set this width 200 px. and the height is set to 100 px as
usual. I have added a border radius of 100% that will make things box a ball this
will turn the box into a ball as we can see position is relative now in the previous
case I had told you that I will be discussing on what happens if we just discard
this position relative comment so what I am doing over here I am just commenting
this syntax and I am just pressing
control + S and getting back to our project and reload so now we can see that this
thing is practically executive nothing any kind of animation over here it is not
practically descending down from the top what it is doing it is just changing its
width and background color properties but it is not coming down as it should have
been as we have seen in this cases we have mentioned here that at the 25% keyframe
position it will be leaving a margin of 200 px from top and at 50% keyframe position
from top it will be leaving a margin of 500 pics again it will be leaving a margin
of 200 pics from top at 75% keyframe position but all those things those things are
absent from here because we didn’t mention any position over here and as we didn’t
mention the position the default value of position in this case will be static. And that is why it is executing of static
position all the thing it is doing is just changing it’s width and color properties and
nothing else. So to make proper smoothing and animation things over here and,
that means if we want to make some movements or it is just descending down from
the top or getting back to the top or it is just circulating round through a path
in every cases we need to mention this position relative over here if we do not mention this
syntax it will be taking the default value position
static so this is the thing we need to change here you see now if I reload the box diver,
we can see it is again coming down the last position 500 pix and that is what it
is executing over here. In the second case in diver1 condition you’ll see that the animation
name is changed over here, it is ‘movement1’ in the previous case we
have seen that the animation name was ‘movement’ but in this case we can see that this is animation
name that is changed into a new one it is changed to movement 1 and
this is diver one that means the Pink Ball which is actually been changed over here and
now we can see that all things remained the same except some minor changes
over here we have changed the animation name we have set the time duration to 5 seconds
we have set the iteration time count to infinite and now we
have placed a cubic bezier this is practically another kind of animation nature we have previously
known from our tutorial that there is linear part, there’s
Ease-in or Ease-out or ease-in-out, this is another animation property which is known
as cubic bezier and its minimum value is zero and the maximum value is 1 that
means you have to set your path in between the values lying within 0 to 1. And that is
what I did over here this is the highest value I set over here practically
this is x1 and y1, x position of a point along x axis this is the position of the point along
y axis this is again position of another point along the x-axis
co-ordinate and this is the position we are defining another point over here, over y ordinate.
And its value is 1 and this is the standard Syntax that we have used
over here and it says that instead of left 0 top 0 we can see that in this case there’s
practically in initial condition..this is the initial condition.
the cursor here practically denotes the initial condition of this pink ball. and from this position it is first diverting
to Extreme right then it is coming to bottom then it is coming to you extreme left and
then it is ascending up. That means there will be a margin initially from
the left position then the margin will be here from left and top position the margin
will be here from left. Actually not from left, but from top position and then
it will be ascending up into its previous position which is 0 0. that means the x-axis
and the y axis position co-ordinate will be 0 and 0. So all this is
a coordination setting up here that is what we need to mention in our Syntax as we can
see. So at this 0% position from the left it is 0px as we can see that
this is the initial position and… another thing we have placed a margin of 10px, from
extreme left or extreme right, from top or from bottom it will be leaving
a flat margin of 10 px and that is what we can see over here if you just reload it we
can see it is practically originated from here and it is practically
leaving a margin of 10px from the left as we have set it here this is what it is denoting
it is leaving just total margin of 10px from every corner.so that is
why if you mean here left 0px, that doesn’t necessarily mean that it will be starting
from left 0 pics condition,you already set margin from all corner would be
10px that means from left it will be leaving a total margin of 10px and the animation will
be starting over from 10px position so this is practically leaving 10px
position from the left here. now back to our syntax we can see that at 0% keyframe position
it is practically having a left margin of 0px and a top margin of 0px
that means this is the point of origination where x and y co-ordination is set to 0 0. then it comes about transform property. in
this keyframe we rotate,nd along the y axis will be zero degree. So this is the first
thing that we said in keyframe position 0%. in keyfeame position 2, that
means at 25%, we may say that from extreme left it is leaving a total gap of 1000px.
From top it is leaving nothing if you check on to our Browser we can see from here
it is starting and it is diverting it is just displacing up to this point that means this
is 1000 px from its previous condition from x axis, so this is what we
are denoting over here. When we are saying to the browser that from left it will be leaving
a total margin of thousand pics at 25% key frame position but on the same
time at this key frame from top it will practically leave no margin and the transform condition
over here rotateY, it will be 90 degree. if you look into here we can
see this is practically making a rotation of 90 degree at this position. In the 50%
key frame position from left it is practically leaving A Thousand pics displacement
that is along x axis it is just making a displacement of 1000px and this time from top it is leaving
a margin of 200px. That means there will be a y axis displacement
from top 200px and rotateY condition over here is set to 180 degree, that means there
will be another 90 degree phase out rotation over here at keyframe position4,
that means at 75% from left it will leave nothing that means if we see over here this
is the this is the keyframe4 position, and here it is leaving
no margin from the left it is leaving no margin from the left as we can see over here but
from the top it is leaving a margin of 200 px from its initial position
and its initial position is over here so this is the top position and from here it is leaving
a margin of 200px, here the margin 200px and it is having a transform
rotation 270 degree that means another 90 degree phase out rotation has occurred over
here, and in the last keyframe position that means at hundred percent position
from left it will be leaving no margin, from top it will be leaving no margin and the transform
here rotating full revolution of 360 degree as we can see over
here. So this is all about keyframe animation this
is about just setting some key frame, and about setting some proper attributes over
there some changes in styles. In the next episode, in the next tutorial
all we are going to do we are going to make some live coding and we will be seeing how
to code this css3 key frame animation in the stylesheet.CSS, how to apprehend
this thing into stylesheet.CSS. If you like the video do not hesitate to hit that Red
SUBSCRIBE button down below. so I hope you have liked this video and I
hope that I will be seeing you in the next tutorial, till then bye..

Leave a Reply

Your email address will not be published. Required fields are marked *