All right.
Next up, we're going to learn about animation directions, and you can see we can not only enemy something
changes color, but it could also animate its direction, which direction the animation is going to
take place.
Now, then, the only direction property specifies what an animation should be performed forwards and
so, you know, example for forwards.
Or backwards then or in alternate circles, so let's jump to access us again and step in here, comment
of animation direction.
OK, now let's get started by creating a keyframe again, so at Keyframe, going to name this animation
Direxion.
And we don't need our.
Point the market now is going to start with zero percent.
And we're going to start with the background color of red.
And let's actually use hash hexadecimal number.
So what would be a red flag?
I have no idea as to a red and.
Oh, it was so right.
It's actually F, F and four zeros, good to know F.
F, F and four zeros just in order to show you that also working with hexadecimal numbers and is going
to go from in the zero position at zero percent is going to be at zero pixels.
The left and the top is going to be also zero pixels.
OK, now at 25 percent, because we're going to have wait a second, we're going to have one at 24.
Let me actually take them all out to 25.
Then we're going to have one at 50.
They wanted 75.
And one at 100.
OK, well, there we go.
So next up, 25, this is going and just going to take this and change them.
So let's see what kind of hexadecimal is a yellow F four times F and zero zero.
So hash F F.
And zero zero and zero, but the position now will be two hundred pixels, just a two hundred one hundred
eleven.
So 200 to the left key less to the 50 percent, which is going to be a blue color, some blue.
Zero zero zero.
OK, so zero four times zero and if the minutes of Togo and a 50 percent is also going to be to the
top 200 pixels or 200 pixel from the left and 200 pixels.
From the top.
Then we have two more with a green collar and 75 percent green, zero zero eight thousand.
Yes, zero zero a thousand obviously don't have to know them, we do not have to know them.
Obviously, you do not have to know the hexadecimal numbers from memory.
Just look them up and that are now going to change this 75 percent.
So it's going to go something.
I think probably you can see my mom said this is going to zero, then it's going to go down that a 50
percent is going to go to.
Right.
And still be 200 from the top and call it for the right.
Then at 75, which is zero 25 down then.
So.
And so I exactly.
It's going to up to 75 and to 100.
So 75 it needs to go left.
Needs to be at zero.
And at 100 percent, it's going to go back to its initial position that's going to be and I actually
just think this Capitán.
And we're missing something.
What, up percent, percent?
There we go.
OK, now we got our keyframe ready.
Let's also take a class from here, animation direction this time that's targeted within our CNN.
Scroll down a bit, so class animation direction, and we're going to, again, give it the width of
one hundred percent, the height of 100 percent percent pixels.
Sorry about that.
Pixels that in too many percentages, percentages, pixels, background, color, red and all you need
now to position it relative.
OK, so it needs to have a position in the universe before if you don't declare the position, it doesn't
know where it is, it can either position something relative, absolute fixed or sticky.
OK, now let's give this the animation name.
Animation name, and I'm going to call it animation one, but the name this animation direction.
OK, this confusing.
But nevertheless, animation direction is the animation name and the animation, the duration, it's
going to be four seconds.
OK.
Now, the animation, the action property can have the following values and step in animation direction,
not direction, direction they go.
And if it let it at normal, which is actually the default value, it will play as no loss of force.
So let's hit save.
Let's take a look at this.
We are.
Here, animation, actually, let's refresh, so it's going to go jump up and pump, OK, one time.
Now, let's do a reverse of this, so let's check it out again.
This is the normal right, down, left and up.
I think this is now obvious.
Now, let's do the same thing, but in the reverse direction.
So I'm just going to change this certainly within.
Yeah.
And to it in and change it to reverse.
And obviously the animation is played out in the reverse direction.
So let's take a look at this.
Didn't I save?
This is going down.
Right up and left, instead of going right down, left up is going now.
Down, right, up, left.
OK, now we could also type in alternate properties and changes to alternate.
And what this will do is that it will play the animation for us first and then backwards, but I need
to have something that counts.
Animation iteration counts.
How often should this happen?
Let's do a two and let's refresh.
It's going to go so and so in the right direction that it's going to go back in another direction.
If I would only leave it at count one.
The alternate, uh, iteration count, let's refresh, it's going to go right down, left up, that's
going to stay there.
This is why we need the, uh, the animation iteration count.
If I do three, for example, and see what happens now should go.
It should take the normal route.
So.
Right.
Down, left up the reversal route.
And then it's normal growth again.
OK.
All right, the next one is actually we had alternate, but we also have alternate universe.
Which is well, it's pretty obvious what this will do to come in here, alternate and reverse.
And just for the heck of it, I'm going to change this to two and you get to start opposites, so we
had the normal, so and it should start so and don't go back.
So it's starting opposite.
Is this normal direction?
OK, so that's pretty much it about animation directions.