1
00:00:00,000 --> 00:00:04,811
[MUSIC]

2
00:00:04,811 --> 00:00:08,920
>> Hey everyone, I'm Guil, a front-end
developer and a teacher here at Treehouse.

3
00:00:08,920 --> 00:00:11,860
Thanks for joining me in
CSS Transitions and Transforms.

4
00:00:11,860 --> 00:00:15,830
In this course, you're gonna build your
CSS skills by learning two exciting

5
00:00:15,830 --> 00:00:19,740
features developers commonly use
to create simple animations and

6
00:00:19,740 --> 00:00:22,890
enhance the interactive of websites and
apps.

7
00:00:22,890 --> 00:00:25,690
So by now you know that with
CSS you can control how

8
00:00:25,690 --> 00:00:27,720
webpages appear in the browser.

9
00:00:27,720 --> 00:00:30,860
For instance, you can set the color
of a button or the layout and

10
00:00:30,860 --> 00:00:32,970
positioning of your content.

11
00:00:32,970 --> 00:00:37,300
With CSS transitions and transforms,
you can add a little life to your content

12
00:00:37,300 --> 00:00:40,680
with animations that shift from
one set of styles to another.

13
00:00:41,820 --> 00:00:45,920
The CSS transitions feature
lets you smoothly change one or

14
00:00:45,920 --> 00:00:51,280
several CSS properties from one value
to another over a given amount of time.

15
00:00:51,280 --> 00:00:53,900
So for example, with a CSS transition,

16
00:00:53,900 --> 00:00:58,590
a button's background color can fade from
light blue to dark blue over one second

17
00:00:58,590 --> 00:01:02,528
when you hover over it, then fade back
to light blue when you hover off.

18
00:01:02,528 --> 00:01:06,786
With CSS transforms, you can change
the position of an element and

19
00:01:06,786 --> 00:01:10,660
alter its shape without disrupting
the normal document flow.

20
00:01:10,660 --> 00:01:15,160
You can move, rotate, scale and
skew content on the page with one or

21
00:01:15,160 --> 00:01:16,665
several transform functions.

22
00:01:17,870 --> 00:01:21,580
Transitions and transforms are not
really related CSS features,

23
00:01:21,580 --> 00:01:23,950
that is, they can both stand alone.

24
00:01:23,950 --> 00:01:27,070
So you can create a transition
without a transform, and

25
00:01:27,070 --> 00:01:30,450
you can transform an element
without a transition.

26
00:01:30,450 --> 00:01:35,160
But the best part is that when you combine
CSS transforms with CSS transitions,

27
00:01:35,160 --> 00:01:39,200
you can animate transformations and add
really neat animation effects to your site

28
00:01:39,200 --> 00:01:44,440
by transitioning the position, rotation,
or scale of any element on the page.

29
00:01:44,440 --> 00:01:47,990
Now there are lots of creative ways
you can use CSS transitions and

30
00:01:47,990 --> 00:01:49,860
transforms on your website.

31
00:01:49,860 --> 00:01:54,060
For example, you can animate the size and
positions of images and icons.

32
00:01:54,060 --> 00:01:58,150
You can also create enticing UI
interactions with buttons and form fields.

33
00:01:58,150 --> 00:02:02,580
Even build fun interactions like
this to give users visual feedback.

34
00:02:02,580 --> 00:02:04,320
To learn how CSS transitions and

35
00:02:04,320 --> 00:02:07,760
transforms work, you're gonna build
an interactive image gallery.

36
00:02:07,760 --> 00:02:11,170
You'll start by learning basic
transition properties for

37
00:02:11,170 --> 00:02:14,700
defining durations,
delay effects and easing functions.

38
00:02:14,700 --> 00:02:18,880
Then you'll learn how to use transform
functions to rotate, scale and

39
00:02:18,880 --> 00:02:22,850
move elements in 2D and even in 3D space.

40
00:02:22,850 --> 00:02:26,570
So you should be excited to learn
CSS transitions and transforms.

41
00:02:26,570 --> 00:02:31,150
By the end of this course you'll have the
tools to create engaging effects that will

42
00:02:31,150 --> 00:02:34,150
enhance the user experience
of your websites and apps.