[MUSIC]

>> Hey everyone, I'm Guil, a front-end developer and a teacher here at Treehouse.

Thanks for joining me in CSS Transitions and Transforms.

In this course, you're gonna build your CSS skills by learning two exciting

features developers commonly use to create simple animations and

enhance the interactive of websites and apps.

So by now you know that with CSS you can control how

webpages appear in the browser.

For instance, you can set the color of a button or the layout and

positioning of your content.

With CSS transitions and transforms, you can add a little life to your content

with animations that shift from one set of styles to another.

The CSS transitions feature lets you smoothly change one or

several CSS properties from one value to another over a given amount of time.

So for example, with a CSS transition,

a button's background color can fade from light blue to dark blue over one second

when you hover over it, then fade back to light blue when you hover off.

With CSS transforms, you can change the position of an element and

alter its shape without disrupting the normal document flow.

You can move, rotate, scale and skew content on the page with one or

several transform functions.

Transitions and transforms are not really related CSS features,

that is, they can both stand alone.

So you can create a transition without a transform, and

you can transform an element without a transition.

But the best part is that when you combine CSS transforms with CSS transitions,

you can animate transformations and add really neat animation effects to your site

by transitioning the position, rotation, or scale of any element on the page.

Now there are lots of creative ways you can use CSS transitions and

transforms on your website.

For example, you can animate the size and positions of images and icons.

You can also create enticing UI interactions with buttons and form fields.

Even build fun interactions like this to give users visual feedback.

To learn how CSS transitions and

transforms work, you're gonna build an interactive image gallery.

You'll start by learning basic transition properties for

defining durations, delay effects and easing functions.

Then you'll learn how to use transform functions to rotate, scale and

move elements in 2D and even in 3D space.

So you should be excited to learn CSS transitions and transforms.

By the end of this course you'll have the tools to create engaging effects that will

enhance the user experience of your websites and apps.