OK, we arrived at the animation shorthand of the animation, Hortensia says property applies in animation
between styles and it is the shorthand for animation, name, animation, duration, animation, panning
function, animation, delay animation, iteration, count animation, direction, animation, feel
mode and animation.
Please state, please take this.
Simply pause then and stopped and so forth and so on.
That's why I didn't even cover it.
But let's take a look at the short term property.
So let's go back into our system in a comment nation.
Shorthand.
Crop.
All right, so let's get on with animation shorthand.
OK, I'm going to copy, copy, copy, copy this.
Paste it in here.
Let's go with the purple one.
So we usually do something like, first of all, let me create a keyframe go up here or down here as
we go up here.
It doesn't matter what the key.
It doesn't matter if you put it up or down because, you know, Cascadian Stylesheet will always overwrite
the upcoming value, but this value will be called.
So it can be called it's it's called event propagation.
There's going to be called whatever wherever you you you place it.
So let's go.
Keyframe animations short and.
Not once again, I'm just naming this, you can name it grandma, if you wanted to still have the same
effect, you just need to call the name then in your estimation, just by naming the animation, shorthand
will not replace the actual puppet property, but they already know that.
So let's create on keyframe.
Let's go from zero percent.
The background, color action on it, we know what we have as a background call says, go from left
with zero and top zero.
They're going to copy us a few times.
Then we will have 25 percent.
And to change the background color to yellow and change its position to two hundred pixels.
Not Cabot's.
Fifty percent actually going to combat this change is called the blue.
And down here, we're going to have two hundred pixels.
Than 75 percent.
That's a green color.
Wait just a second, there's and we're going to be positioned left zero pixels.
And the last one will be, I just need to get back to.
There, but at 100 percent should be a background color of red.
We're going to finish with red.
It is going to be at the position zero zero zero, so let's call this and usually Hooverville down here.
And usually we would do something like animation.
Name will be Funimation mean that we just create this animation shorthand.
Then the animation should have a duration of, let's say, five seconds.
Then the animation timing function should be linear, that's the same speed.
The animation delay.
Should be two seconds.
It only starts after a delay of two seconds, animation iteration count should be infinite.
Should we do three?
No, let's leave with a whimper and animation.
Direction, nutrition, direction should be alternate, it's going to change us.
It's going to go in one direction and then it's going to come back.
OK, so let's take a look at our animation and you.
But you don't hear.
And there we go.
So let me refresh it again, going to start up and she goes right down.
I should come back because we have it alternating and it's going to do this infinitely.
OK.
Now, this that right here is a lot of typing, I don't want to do that, what you can do is just type
in animation.
Then comes the name of the animation.
After any major name comes the duration, which will be five seconds, then the animation timing function,
which will be linear, then the delay of two seconds.
Then our iteration count, which will be infinite.
And then our animation there in action, which would be alternate.
OK, so when I comment all of them out, I should get the same effect.
Let's check it out.
Let's hit refresh and there we go.
There's our animation.
OK, so hope you enjoyed it and let's get into a project now.