1
00:00:01,040 --> 00:00:07,520
OK, we arrived at the animation shorthand of the animation, Hortensia says property applies in animation

2
00:00:07,520 --> 00:00:13,960
between styles and it is the shorthand for animation, name, animation, duration, animation, panning

3
00:00:13,970 --> 00:00:18,800
function, animation, delay animation, iteration, count animation, direction, animation, feel

4
00:00:18,800 --> 00:00:19,880
mode and animation.

5
00:00:19,880 --> 00:00:21,740
Please state, please take this.

6
00:00:21,960 --> 00:00:26,120
Simply pause then and stopped and so forth and so on.

7
00:00:26,720 --> 00:00:28,510
That's why I didn't even cover it.

8
00:00:29,210 --> 00:00:31,970
But let's take a look at the short term property.

9
00:00:31,980 --> 00:00:35,870
So let's go back into our system in a comment nation.

10
00:00:39,490 --> 00:00:40,300
Shorthand.

11
00:00:43,380 --> 00:00:43,880
Crop.

12
00:00:46,880 --> 00:00:53,090
All right, so let's get on with animation shorthand.

13
00:00:58,260 --> 00:01:02,730
OK, I'm going to copy, copy, copy, copy this.

14
00:01:04,000 --> 00:01:04,940
Paste it in here.

15
00:01:05,860 --> 00:01:07,480
Let's go with the purple one.

16
00:01:10,520 --> 00:01:20,140
So we usually do something like, first of all, let me create a keyframe go up here or down here as

17
00:01:20,180 --> 00:01:20,750
we go up here.

18
00:01:20,810 --> 00:01:21,680
It doesn't matter what the key.

19
00:01:21,770 --> 00:01:27,740
It doesn't matter if you put it up or down because, you know, Cascadian Stylesheet will always overwrite

20
00:01:27,980 --> 00:01:30,800
the upcoming value, but this value will be called.

21
00:01:30,800 --> 00:01:34,560
So it can be called it's it's called event propagation.

22
00:01:34,580 --> 00:01:39,710
There's going to be called whatever wherever you you you place it.

23
00:01:40,700 --> 00:01:41,540
So let's go.

24
00:01:41,540 --> 00:01:46,520
Keyframe animations short and.

25
00:01:51,260 --> 00:01:56,120
Not once again, I'm just naming this, you can name it grandma, if you wanted to still have the same

26
00:01:56,120 --> 00:02:01,280
effect, you just need to call the name then in your estimation, just by naming the animation, shorthand

27
00:02:01,280 --> 00:02:05,540
will not replace the actual puppet property, but they already know that.

28
00:02:06,110 --> 00:02:08,150
So let's create on keyframe.

29
00:02:08,270 --> 00:02:09,830
Let's go from zero percent.

30
00:02:11,990 --> 00:02:18,380
The background, color action on it, we know what we have as a background call says, go from left

31
00:02:18,380 --> 00:02:23,030
with zero and top zero.

32
00:02:26,250 --> 00:02:29,730
They're going to copy us a few times.

33
00:02:32,220 --> 00:02:34,740
Then we will have 25 percent.

34
00:02:36,030 --> 00:02:46,470
And to change the background color to yellow and change its position to two hundred pixels.

35
00:02:48,370 --> 00:02:49,270
Not Cabot's.

36
00:02:51,760 --> 00:02:58,570
Fifty percent actually going to combat this change is called the blue.

37
00:03:01,430 --> 00:03:05,300
And down here, we're going to have two hundred pixels.

38
00:03:07,930 --> 00:03:09,700
Than 75 percent.

39
00:03:17,840 --> 00:03:19,250
That's a green color.

40
00:03:23,780 --> 00:03:31,970
Wait just a second, there's and we're going to be positioned left zero pixels.

41
00:03:33,490 --> 00:03:37,360
And the last one will be, I just need to get back to.

42
00:03:40,410 --> 00:03:48,150
There, but at 100 percent should be a background color of red.

43
00:03:48,660 --> 00:03:49,770
We're going to finish with red.

44
00:03:51,250 --> 00:04:00,180
It is going to be at the position zero zero zero, so let's call this and usually Hooverville down here.

45
00:04:03,510 --> 00:04:06,810
And usually we would do something like animation.

46
00:04:09,440 --> 00:04:15,320
Name will be Funimation mean that we just create this animation shorthand.

47
00:04:18,390 --> 00:04:25,650
Then the animation should have a duration of, let's say, five seconds.

48
00:04:27,720 --> 00:04:33,300
Then the animation timing function should be linear, that's the same speed.

49
00:04:34,680 --> 00:04:36,210
The animation delay.

50
00:04:38,130 --> 00:04:39,300
Should be two seconds.

51
00:04:39,700 --> 00:04:47,750
It only starts after a delay of two seconds, animation iteration count should be infinite.

52
00:04:48,360 --> 00:04:49,670
Should we do three?

53
00:04:49,680 --> 00:04:52,680
No, let's leave with a whimper and animation.

54
00:04:54,120 --> 00:05:01,620
Direction, nutrition, direction should be alternate, it's going to change us.

55
00:05:02,070 --> 00:05:05,160
It's going to go in one direction and then it's going to come back.

56
00:05:05,830 --> 00:05:09,720
OK, so let's take a look at our animation and you.

57
00:05:09,720 --> 00:05:11,850
But you don't hear.

58
00:05:13,320 --> 00:05:14,010
And there we go.

59
00:05:14,280 --> 00:05:20,700
So let me refresh it again, going to start up and she goes right down.

60
00:05:22,610 --> 00:05:28,250
I should come back because we have it alternating and it's going to do this infinitely.

61
00:05:28,420 --> 00:05:28,820
OK.

62
00:05:30,230 --> 00:05:37,100
Now, this that right here is a lot of typing, I don't want to do that, what you can do is just type

63
00:05:37,100 --> 00:05:38,330
in animation.

64
00:05:38,510 --> 00:05:41,450
Then comes the name of the animation.

65
00:05:46,140 --> 00:05:53,370
After any major name comes the duration, which will be five seconds, then the animation timing function,

66
00:05:53,370 --> 00:05:57,360
which will be linear, then the delay of two seconds.

67
00:05:58,420 --> 00:06:02,530
Then our iteration count, which will be infinite.

68
00:06:04,880 --> 00:06:09,080
And then our animation there in action, which would be alternate.

69
00:06:11,090 --> 00:06:16,120
OK, so when I comment all of them out, I should get the same effect.

70
00:06:16,180 --> 00:06:16,890
Let's check it out.

71
00:06:17,330 --> 00:06:21,020
Let's hit refresh and there we go.

72
00:06:21,300 --> 00:06:22,370
There's our animation.

73
00:06:28,370 --> 00:06:32,510
OK, so hope you enjoyed it and let's get into a project now.