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..
For more infomation >> How To Make Almond Milk | Homemade Almond Milk | Rajan Singh Jolly - Duration: 3:09. 
For more infomation >> Inflation Deflation Stagflation einfach erklärt - Duration: 4:59. 
For more infomation >> Κρύων - 1) Θεϊκός Σύνδεσμος - 2) Ενισχυμένα Δώρα - Duration: 38:27. 
For more infomation >> COMMENT SCRAPER UN ANNUAIRE PROFESSIONNEL ? - Duration: 10:13. 
For more infomation >> Tutorial- ¿Como Jugar Paragon Gratis en PC? - Duration: 7:47. 
Không có nhận xét nào:
Đăng nhận xét