Hello, everyone, and welcome back.
In today's video, we will learn how to create this flying rocket animation.
So when I refresh this page, my rocket, it flies up.
Let's see if we have this over page with a rocket image and a background.
First, let's move this rocket to the bottom center.
Let's bring about good Ed.
Let's reduce it a bit.
So coming to the stylus file, let's give it position absolute.
Let's bring it at the bottom, so let's see bottom 20 phobic suits.
Let's bring it in the center.
So left 50 percent.
And then translated in the left direction by minus 50 blows in a log with so transformed.
Translate X minus 50 percent.
Let's save it.
And now as you can see, our rocket is in the bottom center of the screen.
Now, what we want is this rocket to go up.
So coming back, you.
First, let's create a defreeze.
So keyframe, let's call it fly.
So on zero percent, let's say, transform.
Funds.
So X, C minus 50 percent and Y zero.
But on hundred percent.
I want to change these values, so transform.
Translate.
Minus 50 percent, because I've used this property to center our rocket and then we're giving it transform.
Why?
Because we wanted to go above.
So let's say one hundred.
You bought hype.
So there it goes out of the screen.
Let's save it.
Now, to use this animation, we could use the short term property animation.
Let's give it the keyframe name, which is fly.
Let's give it a duration, say, five seconds.
Let's save it.
OK.
It's going down.
We'll have to give it a negative value, so let's save it.
And as you can see, a plane.
It went up.
Let's say it starts slow and goes fast.
So is in the.
And as you can see, it starts slow, but it moves faster towards the end.
Let's refresh it once more.
And as you can see, upline is going up, up and away.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And take care.