WEBVTT FILE





1
00:00:05.870 --> 00:00:13.110
in this video we're going to learn how to create animations so we're going to

2
00:00:13.110 --> 00:00:20.100
be applying this to the Facebook tip so first of all we need an animation

3
00:00:20.100 --> 00:00:27.599
property so the syntax is animation so this is the standard syntax it won't

4
00:00:27.599 --> 00:00:34.500
work with all browsers and then we need two parameters here first one is going

5
00:00:34.500 --> 00:00:40.170
to be the name of the animation that will be creating later on so let's call

6
00:00:40.170 --> 00:00:46.800
its my animation and the second parameter is going to be the duration of

7
00:00:46.800 --> 00:00:58.850
the animation and let's set that to 3 seconds phrases okay all right so then

8
00:00:58.850 --> 00:01:11.960
we need to create this my animation and the syntax for that is gonna be at

9
00:01:11.960 --> 00:01:19.290
keyframes this is the Sunnat syntax and then the name as we chose for the

10
00:01:19.290 --> 00:01:28.619
animation so my animation and then we open the brackets and then we're gonna

11
00:01:28.619 --> 00:01:42.450
specify here from which style to which style okay so for instance if we go from

12
00:01:42.450 --> 00:01:59.420
a background green to a background [Music]

13
00:02:13.410 --> 00:02:16.800
for example this Europe is when we load the page so

14
00:02:21.870 --> 00:02:27.390
basically it's it's not working it's because Chrome won't work with the

15
00:02:27.390 --> 00:02:35.010
standard syntax so somewhere for some browsers we need to add minus sign

16
00:02:35.010 --> 00:02:41.940
WebKit minus sign okay I just remember as if you're developing for for many

17
00:02:41.940 --> 00:02:47.760
process than you you will need to duplicate this property and make sure

18
00:02:47.760 --> 00:02:53.550
that you use all the different syntaxes chrome it's going to be web kits for

19
00:02:53.550 --> 00:03:01.410
other browsers as well from for Firefox it's going to be most AMOLED okay some

20
00:03:01.410 --> 00:03:07.980
other browsers that we work with the standard syntax anyway and also for the

21
00:03:07.980 --> 00:03:15.780
definition of the animation for Chrome we need to add the minus sign WebKit as

22
00:03:15.780 --> 00:03:23.520
well - I okay and now we can see that it's working so if you load the page you

23
00:03:23.520 --> 00:03:29.640
can see that we have animation so we've got Facebook turning a background of

24
00:03:29.640 --> 00:03:38.030
green to a background of blue all right so let's create another animation it's

25
00:03:41.620 --> 00:03:51.099
so this one is going to be a difference so we want now the Facebook box to move

26
00:03:51.099 --> 00:03:56.090
to the right then move to the bottom then move to the left then go back to

27
00:03:56.090 --> 00:04:01.900
its original position and at the same time change colors okay

28
00:04:01.900 --> 00:04:11.720
so there's another way of defining the animation so we're going to use the same

29
00:04:11.720 --> 00:04:21.940
syntax as we did for the first animation to define its we frames my animation

30
00:04:22.930 --> 00:04:33.650
okay but this time we're just gonna write the styles okay let's let's try

31
00:04:33.650 --> 00:04:49.300
the first style so we want to go from a background of red and a left value of

32
00:04:49.300 --> 00:04:59.919
zero pixels and the top zero pixels okay but before we do that we need to set the

33
00:04:59.919 --> 00:05:13.270
position of Facebook to relative that we can use the top and left positions okay

34
00:05:13.330 --> 00:05:23.570
it's go for the next style is gonna be just duplicate these ones so next one we

35
00:05:23.570 --> 00:05:34.580
need a background of yellow and a left position of 200 let's keep the top two

36
00:05:34.580 --> 00:05:41.330
zero pixels because we're gonna move from there to there okay and the next

37
00:05:41.330 --> 00:05:43.870
one let's go for a blue color a top and left

38
00:05:55.319 --> 00:06:04.979
off 200 pixels on top of 200 pixels as well okay and then we're gonna go now

39
00:06:04.979 --> 00:06:14.759
left so we're gonna get a half a left of zero and on top of 200 and then we need

40
00:06:14.759 --> 00:06:20.789
one final one to go back to our original position so you're gonna go for a

41
00:06:20.789 --> 00:06:29.210
background okay let's choose green here let's have the so I left zero and top

42
00:06:35.250 --> 00:06:43.460
zero as well and now we can specify using percentages of the three seconds

43
00:06:48.199 --> 00:06:56.159
at which percentage of the three seconds each of this of these states happen so

44
00:06:56.159 --> 00:07:04.909
at 0% so we want this to be we want we want to be in this position and then add

45
00:07:04.909 --> 00:07:14.699
25% over three seconds you want to be there and then that's 50% you want to be

46
00:07:14.699 --> 00:07:20.430
there and then add 75% we want to be there and then the final one is gonna be

47
00:07:20.430 --> 00:07:26.330
her presence okay okay so yes this load the page and see

48
00:07:31.270 --> 00:07:37.240
what happens so it is working so we can see that the Facebook tip is moving from

49
00:07:37.240 --> 00:07:44.980
the first style which is this one moving to that one moving to that one until the

50
00:07:44.980 --> 00:07:57.160
final one okay the reason why it turns back to blue is because the original or

51
00:07:57.160 --> 00:08:05.020
the styling the original styling of the blue box is blue okay alright so that's

52
00:08:05.020 --> 00:08:11.410
how animations work so again first of all we need an animation property so

53
00:08:11.410 --> 00:08:16.360
just bear in mind that we might use the sundered syntax

54
00:08:16.360 --> 00:08:21.280
without the WebKit some browsers will need WebKit some others like Firefox

55
00:08:21.280 --> 00:08:27.040
will need most and then in that property we define the name of the animations as

56
00:08:27.040 --> 00:08:32.890
we create absolutes and the duration and then there is one way from - and another

57
00:08:32.890 --> 00:08:38.380
way we just list all the styles and then we put the percentage of time that we

58
00:08:38.380 --> 00:08:46.680
expect the element to take to reach that that stays okay

59
00:08:56.260 --> 00:08:58.320
you