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