Hello, everyone, and welcome back.
In today's video, we will learn about the animation properties.
These animation properties can be used to animate, many see as properties such as color, background,
color, word, hide, border, radius, et, etc..
Each animation needs to be defined with the gilfry mood, which is then called with the animation property.
And each key frame rule defines what should happen at a specific moment during the animation, where
zero percent is the beginning of the animation and hundred percent is the end.
Let's learn more about these animation properties with examples to understand them better, saying we
have this d'Hiv.
And we want to change its color from blue to Google with the duration of two seconds.
So first, we need to define the keyframe rule for this.
Let's bring about Chordata.
So let's bring it up here.
Let's expand it a bit.
So going to the sea as this file does inducts to define keyframe rules is at the rate keyframes and
we need to give a name to this keyframe.
So let's say Follett's.
Then curly brackets.
And now we're defining different stages of animation.
So let's as you look, listen to this.
Represents the starting state of the animation, and inside these Goehring brackets redefined Seress
properties.
So what we want to do is we want to start the animation with background color blue.
Light blue.
And we want to end it with.
Light, cool.
So a hundred person background, color like cool.
So one hundred percent represents the end of the animation.
Now we have a keyframe rules really so to animate.
We need to use the animation name property.
So coming up to the desk, let's use that property animation NE.
And let's give this guy free money.
So please, let's save it, then we need to define the duration.
So let's say two seconds.
So animation duration, two seconds.
Let's save it.
Now, as you can see.
The animation starts from blue and goes to light guden.
So when we define animation duration.
So we are setting the time for one cycle of the animation.
Then we need to define the number of times.
This animation should run or the number of times the cycle should run.
So for that we have another property animation iteration count.
Let's say we want this to run three times.
Let's say that, as you can see, it came from Mutu guru Lutu, Google and YouTube, Google Ungreen
back to the original Ghaleb, which was white.
Similarly, if we want this to keep repeating over and over so we could simply write infinite.
So let's say red.
On, as you can see, our animation is going over and over.
But if you notice, after every cycle, the animation is reset to zero percent.
Now, say we wanted to go from zero to hundred and then back Tromsø under two zero.
So basically to go from blue to cool and then from cool to blue for this purpose, we can use another
property called animation direction.
So let's use that.
So animation direction.
So for this going from zero to hundred and from hundred back to zero, we can give it the rally ultimate,
let's say that.
And as you can see, our animation is going from blue to coral.
And then some coral to blue.
And again, from the coral and so on.
It also accepts the value viewers with this value.
It starts from hundred and goes to zero.
And Aghan starts 100 and goes to zero.
So basically it runs reverse from the normal flu.
So let's try again in this value.
Let's save it.
And as you can see, it's going from cool to blue.
And then again, from Google to blue, we can also control the animation speed using the property animation,
timing function.
So let's give that a try.
So animation timing function on this property, it except is in is out.
Lee New is in, out.
So let's say he's in.
So we wanted to start slowly and then go faster.
All right, now let's remove these things and let's make our animation run just one time.
So let's remove these.
Let's bring this to one.
Let's save it.
And now, as you can see, our animation are from Blue, went to Cordel and came back to original state,
which is white.
No background color.
Let's say we wanted to stay in the last state of the animation.
For that, we have another property called animation film mode.
So let's give that a try.
So animation film mode.
Let's say forwards.
Save David.
And now, as you can see, when the animation got over, it stayed in the last stage of the animation,
so it stayed at 100 percent.
Let's say you want to pause the animation from someone who was on the element for this, we can use
another property called animation, please state.
It accepts to use play and pause.
So let's give that a try.
But before that, let's increase the duration.
So five seconds.
Let's say that.
All right, so what we want is when someone who was under Dave.
So Dave and Hoeber.
So we want to pause the animation state.
So let's use that property animation, please.
State.
Let's go with the rally was let's say that.
Let's make this finite.
Let's save it.
All right.
So when I Hovell my animation stopped.
It was.
It's not moving any further.
Remove it.
Who were gone?
It Boggs's.
And as you can see, it went to Google and now I'm hovering.
So, again, the animation is just.
All right.
Similarly, let's say, along with the background color change, we want our element to rotate along
the Z axis.
So let's choose above or transform your date, Z.
Let's say it starts from zero degrees and it goes to 45 degrees.
Or let's say 180 degrees.
That's even.
And as you can see now, our element, digital duty along the Z axis.
So when I hold the animation stops and when I remove its resume's.
And that's how your animation plays state property works even for these animation properties.
We have a shorthand to decode animation.
It accepts the values and followed sequence.
Let's try using one shorthand of a deep.
So let's say animation.
So the first one is name.
So in our case, the name is Bolls Space.
Then we need to give the animation duration.
So in our case, which is five seconds, then we need to give the timing function.
Let's say is in.
Then we have to give the hydration count.
According to the sequence.
So let's just say infinite.
Let's common these.
Let's say that.
And as you can see, our animation is working as expected.
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.