This in this area, we're going to learn about the animation speed curve, which would actually just
specify the speed curve of the animation, what what this really means.
I'm going to show you actually no success.
So let's jump back in here and type in a comment of animation.
Speed curve.
Now, let's, first of all, create a new keyframe that's called the Swans at Keyframe, and we call
this motion timing on the score and timing.
This is going to go from a left zero pixels.
I can also leave it at zero because, well, zero, no matter what you wanted to report after zero is
still zero.
So let's just leave it at zero.
Then it's going to go to and it's going to go to left six hundred pixels.
But also I'm going to change the color.
So background color on same blue.
Now you can see I don't I'm not specifying here starting color this because we're going to specify it
actually in our depth.
So let's take our div and with a class of animation.
The timing function.
The function.
This is how I called it, isn't it?
So let me just really quickly check it.
Animation therapy function, there it is, so.
Let's go back into CNN, so animation, timing, function, everything here again, we're going to the
IT with.
Of one hundred pixels and a hundred, but this isn't going to go with the height of 50 pixels is going
to look like a rectangle X like this one right here.
We just need Morio to jump around on this and hate that.
We thought we would have an animation, but this is our real documents.
So we are that threat to them here.
OK, now let's also give it a background, color, background, color of of red.
The position, it's a position relative.
OK, we are done with this part.
We should now see our Dodi's there's a square.
Now let's start moving it.
We want to move our square.
That's we need our animation name, which we named animation, emotion, timing.
Then we need our animation duration, let's say five seconds.
And animation iteration count going to go with Infinite.
OK, so this was just loop infinitely.
The pressure, so it's going to change and translate now, we don't want this to see how this looks
back, it jumps over there.
So how can we fix it where we need our animation timing function?
So let's go back into animation and we're going to use our animation timing function, and first we
will see what is does and this will actually this was specify the animation with a slow start, then
it fast and then a slow end game.
And it's actually the default value also.
So.
Oh, yeah, you do need to specify here pixels.
So let's do this again.
No.
They're just typing Formiga from.
OK.
So let's refer to this again, is going to go from red and blue is the next step will be linear.
So here, animation, timing, function, you need to choose linear.
And this is just specify animation with the same speed from start to end.
This would be a linear animation.
It is refresh to refresh again, he starts linear, and it's the same speed throughout the entire animation.
Now, next up, we have is in we should have a slow start.
So let me just copy this and ease in kids with a slow start.
And then we have big mo quicker today and.
Next up, we have is out, which is actually the opposite, so we will have a slow and oh out there
we go.
So let's refresh it again.
And start to be quicker and then go slowly to the end.
OK, and then we have is in out, which exact, as the name says, it's going to have a slow start than
a normal bell and then go slowly to the end.
The save.
OK, so let's refresh does again, slow start going a bit quicker and then slowly and not the last one.
I want to show you and you can play a lot along with this on this Kubic.
Is the Kubic bizarre and this will let you define your own value in a cubic function?
No, it is a bit more complex and I would suggest that you if you want to go more deeper into this,
then, well, need to learn about this a bit.
So let's go with some crazy ideas.
Let's say six point one seven five comma zero point one eight five.
This is just a few values that I that I tried out.
We could do a lot of values here.
So then zero point thirty two.
And the last one is, let's say free.
This is these are speed.
So it at each specific speed at this specific time in the animation, the animation will have this speed
to seven high.
Okay, so let's try this out.
Let's check out the animation as it refresh.
So it's going to be quick, then slow, then quick.
Again, this is also a bit of Jidda.
Within it you can see two to two.
OK, I would suggest to try it out for yourself and see what's best for you or, well, which kind of
cubic Beziers you will need for a different kind of animation's.
OK, so that's pretty much it for the speed curvature.