Getting to Know Transitions and Transforms

[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