WEBVTT FILE





1
00:00:05.960 --> 00:00:12.059
in this video we're going to learn how to make transitions basically we're

2
00:00:12.059 --> 00:00:18.300
gonna be creating some effects for HTML elements when they move from start one

3
00:00:18.300 --> 00:00:26.939
style to another so if we start with the Facebook div so let's say we want to be

4
00:00:26.939 --> 00:00:34.500
able to hover on the Facebook div and make the width change from 100 pixels to

5
00:00:34.500 --> 00:00:40.260
300 pixels for instance so how are we are we gonna do that so first of all we

6
00:00:40.260 --> 00:00:53.219
need to use a transition property in the blue box Class B transition and in this

7
00:00:53.219 --> 00:00:59.399
property we need to specify how long it will take for the width to change once

8
00:00:59.399 --> 00:01:04.080
we hover on the elements so we need to specify the property that's gonna change

9
00:01:04.080 --> 00:01:07.520
and the duration all it's saying so let's go for one second for instance

10
00:01:07.520 --> 00:01:20.100
alright then we're gonna need to tell the browser for the blue box class if we

11
00:01:20.100 --> 00:01:28.259
hover on any elements of that class okay see so the syntax is like this we want

12
00:01:28.259 --> 00:01:37.130
the width to change to 300 pixels so what does it mean so this is the class

13
00:01:37.130 --> 00:01:42.420
dot followed by the name of the class and then coolin and then the action is

14
00:01:42.420 --> 00:01:47.040
hover and basically we just specify what's the new style that's we're

15
00:01:47.040 --> 00:01:51.990
expecting okay so now once we hover on the Facebook elements we can see that

16
00:01:51.990 --> 00:01:58.740
the width is changing unless the transition effects we see that okay so

17
00:01:58.740 --> 00:02:06.020
first of all we added the transition property with the duration for that

18
00:02:06.020 --> 00:02:13.380
property of the width and then we specified for that class when we hover

19
00:02:13.380 --> 00:02:19.470
on the elements of that class - with changes to 300 cells okay so let's try

20
00:02:19.470 --> 00:02:28.020
something different with the Apple Dave so let's set the width the width first

21
00:02:28.020 --> 00:02:37.230
200 pixels now we want to be able to hover on the Apple and changed both the

22
00:02:37.230 --> 00:02:45.660
width the height and also creates a 3d transform with the rotate X okay so to

23
00:02:45.660 --> 00:02:50.750
do that first let's set the transition property okay so you won't do with to

24
00:02:54.570 --> 00:03:03.330
take one second to change the heights to take one second as well and the

25
00:03:03.330 --> 00:03:14.550
transform property to take one second as well and now we need to define the way

26
00:03:14.550 --> 00:03:20.160
it looks like we're doing the green box here okay let's finally let's carry on

27
00:03:20.160 --> 00:03:27.540
with the green box okay so now we need to tell the browser that when we hover

28
00:03:27.540 --> 00:03:41.130
on the green box class was the new style so new style is going to be with 300

29
00:03:41.130 --> 00:03:51.650
pixels and we want the height to become 300 pixels as well and we want the

30
00:03:52.130 --> 00:04:06.030
element to have a 3d transform which is a rotate X and we want that to be 180

31
00:04:06.030 --> 00:04:09.980
degrees let's try this okay so when we hover on the microscope

32
00:04:14.760 --> 00:04:27.930
if I've got a 180 degree rotation I know it's working so the width goes to 300

33
00:04:27.930 --> 00:04:34.860
pixels high strain pixels and the diff is rotating around the x-axis by 180

34
00:04:34.860 --> 00:04:41.389
degrees you see that that's working okay