1
00:00:00,290 --> 00:00:05,050
CSS transitions let you decide
exactly what properties to transition.

2
00:00:05,050 --> 00:00:08,170
If you don't instruct the browser
what properties to transition,

3
00:00:08,170 --> 00:00:11,920
it will transition all
the properties defined in the rule.

4
00:00:11,920 --> 00:00:16,950
For example, if I add a border
radius to the button on hover,

5
00:00:16,950 --> 00:00:21,520
so let's say border-radius of 1em.

6
00:00:21,520 --> 00:00:27,910
Notice how the boarder radius value
also transitions over .4 seconds.

7
00:00:27,910 --> 00:00:31,010
Now, there may be times when
you don't want to transition

8
00:00:31,010 --> 00:00:33,380
every property in the css rule.

9
00:00:33,380 --> 00:00:36,540
So, you can specifically transition one or

10
00:00:36,540 --> 00:00:41,410
several css properties of an element
using transition property.

11
00:00:43,680 --> 00:00:48,600
The value for transition property
tells the browser the CSS property or

12
00:00:48,600 --> 00:00:51,780
set of properties that
would be transition.

13
00:00:51,780 --> 00:00:56,115
Now the reason why you still see
a transition occur even when it is not

14
00:00:56,115 --> 00:01:03,150
defined is because the fault value for
transition property is the keyword, all.

15
00:01:03,150 --> 00:01:08,620
So defining a transition duration
without transition property is exactly

16
00:01:08,620 --> 00:01:14,680
the same as defining it with transition
property and using all as the value.

17
00:01:14,680 --> 00:01:17,330
So the value all transitions all

18
00:01:17,330 --> 00:01:20,250
animatable properties
declared in the rule.

19
00:01:20,250 --> 00:01:24,040
In other words, any property
that can animate will animate.

20
00:01:24,040 --> 00:01:27,050
You'll learn more about
animatable properties in a bit.

21
00:01:27,050 --> 00:01:31,560
Now, I don't recommend using
the value all when transitioning one,

22
00:01:31,560 --> 00:01:34,470
two, three, or only a few properties.

23
00:01:34,470 --> 00:01:36,020
Like we are now.

24
00:01:36,020 --> 00:01:40,010
Although you may not notice it,
using transition property all

25
00:01:40,010 --> 00:01:43,280
can cause some minor drawbacks
in your site performance.

26
00:01:43,280 --> 00:01:47,620
The browser has to do some extra
work to render the transition

27
00:01:47,620 --> 00:01:51,720
because it's going to check for
more property changes than it needs to.

28
00:01:51,720 --> 00:01:55,972
For example here,
it's also checking for the width.

29
00:01:55,972 --> 00:02:01,180
Font weight, text-decoration,
text-transform, padding and

30
00:02:01,180 --> 00:02:05,460
margin values defined in main.css,

31
00:02:05,460 --> 00:02:10,500
as opposed to the ones we
specify here in the value, and

32
00:02:10,500 --> 00:02:14,260
the value all can also
create unexpected behaviors

33
00:02:14,260 --> 00:02:18,360
because it may transition properties
that don't need to be transitioned.

34
00:02:18,360 --> 00:02:23,230
So I specifically want to transition
the background of my buttons, so

35
00:02:23,230 --> 00:02:27,020
I'm going to define
background as the value.

36
00:02:27,020 --> 00:02:32,270
So now only the property identified within
the transition property value will be

37
00:02:32,270 --> 00:02:36,380
effected by my transition,
in this case it's background.

38
00:02:36,380 --> 00:02:42,170
So notice how the boarder radius no longer
transitions over point four seconds.

39
00:02:42,170 --> 00:02:43,922
So I'll just go ahead and

40
00:02:43,922 --> 00:02:48,601
remove the border radius declaration
from my CSS moving forward.