1
00:00:00,660 --> 00:00:05,110
CSS transitions give you an easy way
to animate parts of your interface by

2
00:00:05,110 --> 00:00:10,650
changing a set of CSS properties from one
value to another over a period of time.

3
00:00:10,650 --> 00:00:13,690
Normally when you change
the value of a CSS property, for

4
00:00:13,690 --> 00:00:17,480
example the background of a button
on hover, the change is abrupt.

5
00:00:17,480 --> 00:00:19,230
But you can smoothen the change and

6
00:00:19,230 --> 00:00:24,030
have it occur gradually by animating
it over time with a CSS transition.

7
00:00:24,030 --> 00:00:27,160
This makes your user interface
interactions more fluid.

8
00:00:27,160 --> 00:00:30,840
To transition CSS properties
from one value to another,

9
00:00:30,840 --> 00:00:33,660
we need to tell the browser which
properties to transition and

10
00:00:33,660 --> 00:00:36,690
how long the transition
effect should take.

11
00:00:36,690 --> 00:00:40,530
Then you can optionally instruct
the browser to delay the transition and

12
00:00:40,530 --> 00:00:44,140
control how that transition
changes speed over its duration

13
00:00:44,140 --> 00:00:46,760
all with just a few lines of CSS.

14
00:00:46,760 --> 00:00:51,230
Transitions are usually triggered by
a user's action or a change in state.

15
00:00:51,230 --> 00:00:53,220
So for example, a mouse click or

16
00:00:53,220 --> 00:00:57,740
a hover, focus and active state can
trigger a CSS transition on a button.

17
00:00:57,740 --> 00:01:01,420
And you can also use JavaScript
to trigger a transition.

18
00:01:01,420 --> 00:01:04,010
So there are a lot of
ways to take advantage

19
00:01:04,010 --> 00:01:07,120
of the visual effects
provided by transitions.

20
00:01:07,120 --> 00:01:10,820
So, first, I'll show you a really simple
way of creating a transition by defining

21
00:01:10,820 --> 00:01:16,000
only the length of a transition with
the transition duration property.

22
00:01:16,000 --> 00:01:20,340
You can follow along using Workspaces
by launching the orkspace on this page.

23
00:01:20,340 --> 00:01:23,360
Or you can download the files to
follow along with your own text editor

24
00:01:23,360 --> 00:01:23,978
if you prefer.

25
00:01:23,978 --> 00:01:28,684
So the index.html file in the workspace

26
00:01:28,684 --> 00:01:34,210
has six photo container
divs that contain an image

27
00:01:34,210 --> 00:01:40,150
along with the image's title,
description, and a download link.

28
00:01:40,150 --> 00:01:43,540
The styles for
this webpage are in the CSS folder.

29
00:01:43,540 --> 00:01:48,490
Now, the main styles to this photo
gallery are in the file main.css.

30
00:01:48,490 --> 00:01:55,330
This CSS applies to all browsers, from
phones and tablets to desktop computers.

31
00:01:55,330 --> 00:01:58,110
For this course I've
split up the CSS files so

32
00:01:58,110 --> 00:02:02,960
we can focus only on the transition and
transform styles we're about to write and

33
00:02:02,960 --> 00:02:05,980
not be distracted by
all these main styles.

34
00:02:05,980 --> 00:02:08,270
So we're going to write our transition and

35
00:02:08,270 --> 00:02:13,460
transform styles here
inside interactions.css.

36
00:02:13,460 --> 00:02:18,410
Now, normally on your projects you'd write
the styles in the same CSS file, but

37
00:02:18,410 --> 00:02:21,460
again, writing them in a separate file
will make everything in these lessons

38
00:02:21,460 --> 00:02:23,230
easier to explain.

39
00:02:23,230 --> 00:02:28,640
You can see what the page looks like once
you preview index.html in the browser.

40
00:02:28,640 --> 00:02:33,480
So the photo gallery we're going to use in
this section of the course is a simple,

41
00:02:33,480 --> 00:02:36,660
responsive six image gallery.

42
00:02:36,660 --> 00:02:40,940
Now the styles for the titles and
descriptions in the bottom row

43
00:02:40,940 --> 00:02:43,660
are a little different from
the ones in the top row and

44
00:02:43,660 --> 00:02:46,270
you'll see why later on in this section.

45
00:02:46,270 --> 00:02:51,330
So we're going to enhance some of the user
interactions in this photo gallery using

46
00:02:51,330 --> 00:02:57,260
CSS transitions first, then make them even
more exciting later with CSS transforms.

47
00:02:57,260 --> 00:03:01,920
As I mentioned earlier,
CSS transitions let you smoothly change

48
00:03:01,920 --> 00:03:05,940
the CSS property of an element
over a specified duration.

49
00:03:05,940 --> 00:03:10,410
And then you can control the speed
at which the properties change.

50
00:03:10,410 --> 00:03:15,450
Transitions can alter the appearance of an
element whenever a state change happens,

51
00:03:15,450 --> 00:03:20,270
like when it's hovered over,
focused on, active, or targeted.

52
00:03:20,270 --> 00:03:26,060
So in order to transition a property you
need a start value and an end value.

53
00:03:26,060 --> 00:03:28,830
One of the simplest ways
properties can be transitioned

54
00:03:28,830 --> 00:03:31,580
is when triggered by
a pseudo class like hover.

55
00:03:32,780 --> 00:03:35,963
In the file interactions.css I'm

56
00:03:35,963 --> 00:03:40,957
going to create a new rule
that targets button on hover.

57
00:03:44,197 --> 00:03:48,763
Then I'll add a background property to
change the button's background color to

58
00:03:48,763 --> 00:03:49,980
a light shade of red.

59
00:03:55,340 --> 00:03:59,820
So now we have our start value and
our end value.

60
00:03:59,820 --> 00:04:02,660
Now currently, if I hover over and

61
00:04:02,660 --> 00:04:08,720
away from a gallery button it looks like
a regular abrupt hover state change.

62
00:04:08,720 --> 00:04:13,860
So lets smoothly transition the background
color from blue to red on hover.

63
00:04:15,070 --> 00:04:19,570
There are four different properties
associated with CSS transitions.

64
00:04:19,570 --> 00:04:23,590
One defines the property or
set of properties to transition.

65
00:04:23,590 --> 00:04:27,830
Another, the duration of the transition,
and two optional properties for

66
00:04:27,830 --> 00:04:31,110
defining a timing function and a delay.

67
00:04:31,110 --> 00:04:32,220
At the very least,

68
00:04:32,220 --> 00:04:37,700
we can define a transition by defining
how long the transition should last.

69
00:04:37,700 --> 00:04:40,630
This is called the transition duration.

70
00:04:40,630 --> 00:04:45,070
So back inside interactions.css,
here in the button rule,

71
00:04:45,070 --> 00:04:51,278
I'm going to set the duration using
the transition-duration property.

72
00:04:51,278 --> 00:04:58,070
The transition-duration property is
a required property for CSS transitions.

73
00:04:58,070 --> 00:04:58,760
In this rule,

74
00:04:58,760 --> 00:05:03,630
it will define the length of time of
the transition that will occur on hover.

75
00:05:04,750 --> 00:05:10,320
Transition duration accepts a numeric
value followed by a CSS time unit and

76
00:05:10,320 --> 00:05:13,820
the time unit can be of seconds or
milliseconds.

77
00:05:13,820 --> 00:05:18,590
The default value for
transition duration is zero seconds or

78
00:05:18,590 --> 00:05:23,280
no duration so
no transition in properties occur.

79
00:05:23,280 --> 00:05:28,750
I'm going to set the duration to
one second by typing the value, 1s.

80
00:05:28,750 --> 00:05:32,810
So this sets the properties
associated with the class button

81
00:05:32,810 --> 00:05:36,340
to transition over a period of one second.

82
00:05:36,340 --> 00:05:40,770
Since we've defined a background
value change here in the hover rule.

83
00:05:40,770 --> 00:05:44,470
The browser now knows that it needs
to go from this shade of blue

84
00:05:44,470 --> 00:05:47,030
to this shade of red over one second.

85
00:05:48,500 --> 00:05:54,390
So now when the button enters the hover
state we see a gradual change

86
00:05:54,390 --> 00:05:59,030
from blue to red over a duration
of one second, then when

87
00:05:59,030 --> 00:06:04,430
I mouse off the button it transitions
back to the original state in one second.

88
00:06:04,430 --> 00:06:08,720
So the browser actually figures out
the colors in between the blue and

89
00:06:08,720 --> 00:06:11,920
red in order to animate the background.

90
00:06:11,920 --> 00:06:15,590
When you define a transition
in the original state rule,

91
00:06:15,590 --> 00:06:20,600
like the button rule here,
the properties will transition to and

92
00:06:20,600 --> 00:06:26,600
from the state changes you define, for
example on hover, focus, or active.

93
00:06:26,600 --> 00:06:31,040
If I want to transition the button's
background to a darker shade of red when

94
00:06:31,040 --> 00:06:36,810
the button is active, I can simply create
a new rule using the active pseudo class.

95
00:06:36,810 --> 00:06:43,220
So right below the hover rule, I'll create
a new rule using the active pseudo class.

96
00:06:44,410 --> 00:06:49,017
Then I'll add a background property to
change the button's background color to

97
00:06:49,017 --> 00:06:50,312
a darker shade of red.

98
00:06:54,433 --> 00:06:57,316
Back in the browser, when I click and

99
00:06:57,316 --> 00:07:03,300
hold on a button the background
transitions to dark red over one second.

100
00:07:03,300 --> 00:07:08,600
So here the background is transitioning
from the hover state to the active state.

101
00:07:08,600 --> 00:07:13,100
And once I release my mouse, the
background transitions back to the lighter

102
00:07:13,100 --> 00:07:17,520
red defined in the hover rule,
then back to its original state.

103
00:07:17,520 --> 00:07:21,470
You can specify the transition
duration value in different ways.

104
00:07:21,470 --> 00:07:23,990
To specify the duration in milliseconds

105
00:07:23,990 --> 00:07:27,150
you can add a period
before the number value.

106
00:07:27,150 --> 00:07:31,739
For example,
let's set the duration to 0.4 seconds.

107
00:07:33,530 --> 00:07:38,141
So now the transition from
blue to red is much faster.

108
00:07:40,220 --> 00:07:45,220
Some developers prefer to add
a leading zero before the period.

109
00:07:45,220 --> 00:07:48,850
This can help you clearly
distinguish values in milliseconds

110
00:07:48,850 --> 00:07:50,870
from values in seconds.

111
00:07:50,870 --> 00:07:57,430
Sometimes you may see millisecond values
defined using the MS CSS time unit.

112
00:07:57,430 --> 00:08:01,442
For instance, the value 0.4 seconds is

113
00:08:01,442 --> 00:08:06,850
equivalent to the value 400ms or
milliseconds.

114
00:08:06,850 --> 00:08:08,870
And as we can see in the browser,

115
00:08:08,870 --> 00:08:13,610
the result is exactly the same
as the value 0.4 seconds.

116
00:08:13,610 --> 00:08:17,280
So either value is perfectly valid and
acceptable and

117
00:08:17,280 --> 00:08:19,330
it's up to you which one to use.

118
00:08:19,330 --> 00:08:25,320
So I'm going to change my
value back to 0.4 seconds.

119
00:08:25,320 --> 00:08:29,560
So this is all you really need to
create a basic CSS transition.

120
00:08:29,560 --> 00:08:35,040
Now when you create a transition by
defining the transition duration only,

121
00:08:35,040 --> 00:08:39,700
the transition applies to all
the properties written in the CSS rule.

122
00:08:39,700 --> 00:08:44,640
So in the next video you'll learn how to
transition only the properties that need

123
00:08:44,640 --> 00:08:45,240
transitioning.