Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
CSS transitions provide a way to smoothly change the values of CSS properties over a given amount of time. With CSS transforms, you can move, rotate, scale, and skew elements in 2D and 3D space.
Resources
Video review
- CSS transitions feature let you smoothly change one, or several, CSS properties from one value to another over a given amount of time.
- CSS transforms let you change the position of an element and alter its shape, without disrupting the normal document flow.
- Transitions and transforms are not related CSS features; they can both stand alone.
- You can create a transition without a transform, and you can transform an element without a transition.
-
0:00
[MUSIC]
-
0:04
>> Hey everyone, I'm Guil, a front-end developer and a teacher here at Treehouse.
-
0:08
Thanks for joining me in CSS Transitions and Transforms.
-
0:11
In this course, you're gonna build your CSS skills by learning two exciting
-
0:15
features developers commonly use to create simple animations and
-
0:19
enhance the interactive of websites and apps.
-
0:22
So by now you know that with CSS you can control how
-
0:25
webpages appear in the browser.
-
0:27
For instance, you can set the color of a button or the layout and
-
0:30
positioning of your content.
-
0:32
With CSS transitions and transforms, you can add a little life to your content
-
0:37
with animations that shift from one set of styles to another.
-
0:41
The CSS transitions feature lets you smoothly change one or
-
0:45
several CSS properties from one value to another over a given amount of time.
-
0:51
So for example, with a CSS transition,
-
0:53
a button's background color can fade from light blue to dark blue over one second
-
0:58
when you hover over it, then fade back to light blue when you hover off.
-
1:02
With CSS transforms, you can change the position of an element and
-
1:06
alter its shape without disrupting the normal document flow.
-
1:10
You can move, rotate, scale and skew content on the page with one or
-
1:15
several transform functions.
-
1:17
Transitions and transforms are not really related CSS features,
-
1:21
that is, they can both stand alone.
-
1:23
So you can create a transition without a transform, and
-
1:27
you can transform an element without a transition.
-
1:30
But the best part is that when you combine CSS transforms with CSS transitions,
-
1:35
you can animate transformations and add really neat animation effects to your site
-
1:39
by transitioning the position, rotation, or scale of any element on the page.
-
1:44
Now there are lots of creative ways you can use CSS transitions and
-
1:47
transforms on your website.
-
1:49
For example, you can animate the size and positions of images and icons.
-
1:54
You can also create enticing UI interactions with buttons and form fields.
-
1:58
Even build fun interactions like this to give users visual feedback.
-
2:02
To learn how CSS transitions and
-
2:04
transforms work, you're gonna build an interactive image gallery.
-
2:07
You'll start by learning basic transition properties for
-
2:11
defining durations, delay effects and easing functions.
-
2:14
Then you'll learn how to use transform functions to rotate, scale and
-
2:18
move elements in 2D and even in 3D space.
-
2:22
So you should be excited to learn CSS transitions and transforms.
-
2:26
By the end of this course you'll have the tools to create engaging effects that will
-
2:31
enhance the user experience of your websites and apps.
You need to sign up for Treehouse in order to download course files.
Sign up