CSS Animation: Bringing your Sites to Life | Sarah Holden ☀️ | Skillshare

CSS Animation: Bringing your Sites to Life

Sarah Holden ☀️, Developer & Educator

CSS Animation: Bringing your Sites to Life

Sarah Holden ☀️, Developer & Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (44m)
    • 1. Intro

      0:50
    • 2. Project Intro

      1:14
    • 3. Hover Effects

      4:33
    • 4. Intro to Transitions

      3:32
    • 5. Adding Transitions

      4:16
    • 6. Controlling Transitions

      3:43
    • 7. Project Step 1

      4:29
    • 8. Intro to Transform

      0:53
    • 9. Rotating Elements

      2:27
    • 10. Scaling Elements

      2:04
    • 11. Translating Elements

      2:34
    • 12. Skewing Elements

      1:27
    • 13. Multiple Transforms

      1:35
    • 14. Project Step 2

      2:48
    • 15. Browser Prefixes

      3:41
    • 16. Project Step 3

      2:19
    • 17. Next Steps

      1:51
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

759

Students

2

Projects

About This Class

Dive into the world of CSS animation with Sarah Holden and learn how to add dynamic, polished interactions to your sites. In this 45-minute course you'll learn how to use CSS hover effects, transitions, and transforms to add motion and interactivity that will impress your users and bring your sites to life.

This hands-on course is geared for those who feel comfortable writing basic HTML and CSS and want to kick their skills up a notch. In the course project you'll explore various animation techniques by creating an interactive image gallery with animated hover effects.

What you'll learn:

  • Adding Hover Effects: Learn how to update styles for buttons, anchors, images, and other elements when a user hovers over them
  • CSS Transitions: Control animation speed using CSS transitions
  • CSS Transforms: Utilize CSS transforms to rotate, skew, scale, and move elements on a page
  • Browser Prefixes: Make sure that animations work in the widest number of browsers possible by adding browser prefixes

What you'll make:

In the course project you'll create personalized hover animations for an image gallery. You can add this image gallery to your site today, or use the animation techniques you've learned to create hover effects for buttons, anchors, images...anything on your site!

Thanks for joining! I love CSS animations and I can't wait to share this content with you so that you can harness your creativity and start adding animations and interactions to your pages today!

Meet Your Teacher

Teacher Profile Image

Sarah Holden ☀️

Developer & Educator

Teacher

Sarah Holden is a web developer, designer, and instructor based in Los Angeles.

She taught her first web development course for General Assembly in 2015, caught the bug and never looked back. She's now taught hundreds of students the basics of web development and believes wholeheartedly that learning can and should be fun.

She currently runs her own development practice and is dedicated building quality-crafted websites that are as beautiful and interactive as they are functional.

When not creating things for the web, you can find her riding her motorcycle down the rugged California coastline, hustling at the local pool hall, or rollerskating backwards at the Moonlight Rollerway in Glendale.

See full profile

Related Skills

Technology Web Development

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: this class will be diving into the world of CSS Animation will explore and experiment with various CFS animation techniques by having hover effects to a project gallery. After the course, she'll be able to apply these techniques to your sites to make them stand out by adding animations to button fleets images, the sky's the limit will break down. How to update styles on hover control, animation speed using CSS transition and how to create more advanced animation such as rotating Scaling the moving things on the page using CSS transform also show you how to use vendor prefixes to make sure that these animations work in various browsers. If you feel comfortable writing basic to intermediate CSS thin, this course is perfect for you. I love playing with CSS animations. Many of the techniques will cover are relatively new in recent years, and I'm excited to show them to you in this course 2. Project Intro: and this course, you'll have a chance to apply an experiment with the CSS animation techniques will cover by adding hover animations to a project gallery. I've broken the project in the three parts so that you have a chance to experiment as we go first. You oughta have her fact to the projects in the gallery and you CSS transitions to intimate , thes hover effects. And the second stuff will throw in. CSS transforms. This is where things really start. To heat up, you'll learn how to combine rotation, skewing, scaling and translating to come up with some really dynamic animations that will really make your projects jump out. I'll give you some guidance and ideas for how to apply these techniques to your project, but I highly encourage you to be creative and have some fun by personalized in the projects in your gallery and your animations to make it your own. And the third step will learn how to add and vendor prefixes some of the properties won't be learning about are relatively new and CSS if we want to make sure that these properties are supported by the widest number of browsers possible, I've provided all the files and code that you'll need for the project, but I'll be sure to walk you through how to set everything up once we get to the first step . I'm really excited about this project and I can't wait to see what you do with it. Now let's stick into CSS animation. 3. Hover Effects: and this awesome. We'll take a look at how we can add hover effects to our site. Have her effects will be the foundation, but the CSS animation will be creating in this class. First, we'll take a look at whatever effects are and how they could be used to improve usability of our sites and make them seem more interesting. And then I'll show you how to update styles on hover using CSS. So let's dig in. VFA allows us to apply styles two elements when our user puts their mouth over them. This is referred to as a hover effect. Now you can add a have affected anything on a site, but the most common examples include leaks and buttons. The's hover effects can range from relatively simple. For example, on this designer site, he simply moves his links slightly upward. When I put my mouse over them to a little bit more complex on Stripes website, they have a list of their customers. Their logos are displayed here, and when I put my mouse over them, no, no. So the logo's in the background. Buller and skill slightly inward, an over top we see this year, customers but me, it fay vin and flied slightly upward the same time. So it's a pretty cool interaction there, a little bit more complex. But we'll learn how to do similar things using hover effects, transitions and transforms in this course to add a hover factory sites, we can use the same selector we would when we normally select an element. So, for example, if I wanted Teoh style a button and make its background color ride, I would simply use button or the name of the element. Alright. He's the same thing when I want to add hover style. So here I have but once again have a colon. However, after the word button in this example, the button will have a background color of red to begin with, and then, when that are, user hovers over the background. Color will change to paint now really important toe. Don't add a space between your selector and the colon hover or you have a perfect won't work. Now this is the most common air I see when I have students who are trying to have her effect and it's not working. It's because they have a space somewhere in that selector. I'll show you what I mean. All right, so here I've added some styles for an anchor. So first up, let's take a look at the HTML here. Here. Haven't anchor or a link snazzy link between notice that's displayed down here below. And here I am going to absence styles to anchor, first of removed, the underlying made it a little bit bold. Most importantly, have given it a blue tax color There. I wanted to add styles to the anchor on hover embodies the same selector A but the colon hover. Now notice again. Here. Don't have a space before the colon or after the corner will not work. All right, you're gonna go ahead and just change the color to pink. Something simple to start with. And now notice. When I put my mouse over that anchor, it does change to a paint color. All right. I could make this a little bit more attractive by maybe changing it to a slightly darker shade of blue. So of a hex code here, in case in. All right, now it just changes to a slightly darker shade of blue. A little bit more subtle like that a little bit better. All right, for this button here, right now, when I hover over, that doesn't do anything, just stays the same styles. So I'm gonna go ahead and use the same sector. I used to add some base styles for my button. No, sir. Give it a blue background color to start with. And when my user hovers over, I can add styles by using the same selector button with the colon. Hover after it. And here I'm gonna go ahead and change the bathroom color to a lighter shade of blue. Here, let's go ahead and take a look. And there we go. Now notice that these hover fax happen right away, or text color is changing. Pretty sell it relatively suddenly. And our button background color also just switches to the new color right away. On the next lesson will take a look at how we can add transitions to our sites to make sure that these changes are animated. So notice in this separate example, where have added in in transition when I hover over the button, the back with the new background color fades and instead of just changing right away, same thing with the anchor wouldn't have her over it. The text color animates. And I guess in this example of you think you can see that that animates instead of simply changing right away. Really drastically. All right, well, take a look. In the next nothing. 4. Intro to Transitions: Now let's dig into CSS transitions. Transitions are an exciting new way that we can add animation to our pages using pure CSS and this US, and will describe what CSS transitions are on which properties could be animated using CSS transitions. This system will be Premier Li. An overview in the next lesson will look at how we can actually write out transitions and control the different settings that are available to us in this example. Notice. In my HTML, I haven't Div that has a class of animate me with the text. Hello in it. Nothing fancy in my CFS, given that devil with and height in the background color. Also, Addison styles on hover have changed a backroom Florida blue notice. When I hover over the death, though, the background color changes immediately. If I wanted to animate this change, I could add an a transition again. We'll look at how to actually Addison in the next lesson. For now. Just getting overview here I've added in a transition, and now I noticed when I put my mouse over the stiff, the background color changes much more slowly. I can even control how quickly or slowly this animation occurs by changing the speed. So now when I have over this notice, it is going to still animate, but much more quickly. There are tons of different properties that are animated ble in CSS, and I'll post a full list of the inimitable CFS properties in the resources section in sculpture. But here is a list of the most commonly animated properties. We can animate things like background color, border box shadow. We can animate the position that elements have on the page font style, whether something is hidden or showing using opacity. Also, we can update dimension or animate dimension for elements such as margin padding with their heights. And the second part of the course will be looking pretty extensively at the Transform property, which we can use to animate the rotation scales you and position of elements on the page. So let's try a couple of these outlets straight hiding the devaughn hover using opacity and then let's go ahead. And after that we can try maybe updating from the font styles and dimension styles. All right, so now when I have river, we are animating this to blue. If I wanted to fade this out on hover. I could simply change the opacity to zero and notice with this transition that since they have a transition, it will actually be animated instead of immediately disappearing. So now notice. When I hover over this, we're going to get a fading out of fact. When I move my mouth off, it's gonna faII back in. Okay, lets try updating our animating the with. Now let's maybe change it to 400 pixels on hover. Now when I have her over, this is it the with that is going to animate. Finally, let's try animating maybe the font size as well. I'm gonna make the phone size 50 pixels, which is relatively large. Now when I have her over this notice. The font size changes, uh, barely fits in there any more to 50 pixels. So there are lots of things that we can animate using transitions and the next us, and I'll show you how to add transitions and how we can control how quickly those happen and how those occur. Over time. Those animations 5. Adding Transitions: Now that we have a better idea of what CFS transitions are, let's take a look at how we can add them to our site. In this lesson, I'll show you how you can add transitions to your CSS file. Selecting which properties to animate in the speed at which animation should occur Out of transition to your CSF, you'll use the transition property. There are few settings that we can specify and two that will need to specify to get things set up. This is an order dependent list, so notice the property always goes first, followed by the duration pulled out by some other options that will talk about in the next lesson. So again, first up, we need to specify what we want. Enemy. This is the transition property. Now. I typically use all which will transition anything that changes. But if you only want a transition, one thing for example, color or background color or font size, you can put the property name in this place next. We want to specify how long the animation should last for the duration. Here you have the option between choosing a speed and seconds for milliseconds, so 0.3 s would stand for 0.3 seconds or 300 mass would be 300 milliseconds. Now, Really important. Don't forget to add a mess for milliseconds or s for seconds or will work. This is one of the most common mistakes I see from my students, and I myself occasionally do. And this simple demo I have a button in my HTML file that says I'm alive. I've added some styles to that button down below, along with one hover style worm changing the background color to a lighter shade of blue on Hubbard. Let's take a look. All right, here you can see the background color is changing, and now we just need at a transition that enemy that change. So here in my CSS, I'm gonna go ahead and write the transition property. Now, here I have a couple choices. I could Since I am just updating the background color on Hubbard, I could go ahead and choose for my transition property back roomed the color, or just in case I induct changing my mind and deciding to add other styles on. However, I could specify all here and then anything that I change on hover will be transitioned for animated. I typically choose all unless I only wanna stuff. I only want a transition or enemy one property. All right. And then next up, we need a speed. And again here I can choose between asked for seconds or a mess for milliseconds, and I'd like to keep it pretty snappy. I usually choose something around 350 milliseconds or MX. All right. And now when I hover over this, notice that that is animated. All right, if I were to add another thing down here, So, for example, maybe I want to change the font size to 40 pixels as well. I noticed that since I specified all both of those properties are going to be animated. So the phone says and the backroom color will both be animated. If here I had only specified background color, just the background color would be innovated and the font size been jumped to the larger fun. So again typically choose all. Unless for some reason, I only one enemy one thing for seconds again, we can choose between an s or for milliseconds, or ask for seconds If I want to just slow this down a little bit. I might do something like to ask for two seconds. No one. I have wrong this notice. It's a much slower animation. Be careful not to accidentally, you know, do something. Like I see students. You think they're using milliseconds but are actually using seconds. And now this will still work. But it will take place over 200 seconds. So I probably will never actually see any updates unless I say here for 200 seconds and keep my mouth there. All right. So that's how it can add transitions. Fairly simple. In the next lesson will take a look at some further or some other properties we can use to further control our transitions, how they occur over time. And if we want to delay before those transitions occur 6. Controlling Transitions: now that we've learned how it can control which properties you want inmate and how long that animation should last. Let's take a look at a couple more studies we can specify. And this awesome. We'll look at how we can change the speed of an animation over exploration. And at a delay before an animation begins to change a speed of an animation over its duration, we could specify the timing function setting again. This will go under the transition property, and it should be the third study we specify again, this is optional. The default here is going to be ease, which means start slow and speed up and slow down. Other options include ease. And if we want our animation to start, so he's out to have a slow end easing out for a slow start and end and then linear if we want even speed throughout innovation. No, I think these air best you know, visualized and an example. So here have given these all the same transition but a different timing function, and you can see when I have her on here. That animation occurs at a very different speed for each one of these eso linear at the bottom will happen evenly. Noticed the season will slowly start and then speed up. You can see there is a little bit of a difference in real life examples. I don't notice it as much. But here for our button example, if I wanted to try a couple of these out again, this will go under the transition Property had said, I want a transition. Everything over one second. Let's go ahead and try Monier, which would be an even animation speed over time. All right, that happens pretty evenly. Typically, I choose ease in, out, just gonna start flow and slowly. So it's just a little bit more subtle. I think again of one second, you might notice it, but if I did 10.3 seconds, that isn't gonna be very noticeable. Whichever timing fund function you choose. Finally, we can out of delay before the animation happens, which is optional, and I really do it. But that would be the last setting we specify, and it's gonna be a speed and seconds or milliseconds. So if I added a delay here of three s for three seconds when I hover over the button, it'll take three seconds before it starts to animate. We'll show you what it means of hearing and a hover. 123 accounted, a little bit asked. And when I hug her off 123 now it's gonna and meet back again. It's a little bit more rare, but occasionally might be useful now. One important thing I forgot to mention in the last segment is notice that my transition here has gone under my button selector instead of under the hover down below notice. When I put it under the element button, it's always gonna be looking for anything to change. For example, things to change on hover or with JavaScript. If we added JavaScript, and anything that changes is going to be animated, so it will animate in and enemy out. You're gonna make this a little bit slower, so we can really see this so it's gonna animate in and out if you accidentally at your transition under the hover. Once you have her on an element, it will know that this animation exists. But as soon as you move your mouse off, it's gonna forget it exists a little snap back into place, so she wouldn't mean here. When it animate on, we get the animation or hover on. We get the animation just like you'd expect. When I have her off, it's gonna snap back to place. So again, this is the difference when I could've undercover versus when I put it just under the button itself, all right, and that's it for transitions, and the next segment will take a look at how we can add these things to our project. 7. Project Step 1: all right. Now, if they're trying to give it a shot in the first step of our project, this stuff you'll be adding a simple hover fact. Two images in our gallery were description Faith in at the bottom. If these air hovers over the button, we're gonna change color for that button as well. I've given you all the code and files you need to get started. And is it file in the project section called Image Gallery dot set? I've also given you a cheat sheet for this, uh, course that covers hover effects, transitions and transforms, which a bit too, in the second part of the course. So definitely feel free to use that. I know we've covered a lot, and it's really hard to remember the order of things and just the syntax or how to write that out. So for some of these have given you simple examples, more complex examples and then a guide for you know, the different values that you can use here for the project to get things set up, go ahead and unzip that zip file. Erica, Been moving it to your desktop and then you want to go ahead and open it. And your favorite text editor. I prefer Adam. Some people love sublime. I also like sublime lot to whatever you feel comfortable using. When you have the open, you'll notice that I've already given you some HTML and CSS in the CSS file. I've given you some hints to get started. You're free to delete these comments. If you don't want hints, you prefer to go it on your own, but you're gonna want to complete steps. One a through C in steps two A and two b nurse. These are little bit out of order. Stop one A comes before Step one B and then someone speak on supports of one Be So steps. One a through scene steps to a and two B steps three and four. You want to hold off on those until we've covered transitions and again, do each stuff refreshed the page in the browser in between so that you can see the difference? All right, so let's see what we have so far and are HTML. If I go ahead and open this in the browser, looks like things are pretty set up for you. The descriptions there. It's just showing all the time, so we want to make sure that that's hidden by default and Onley shows up on hover. We'll also want out hover effect to these buttons so that they change color. So that's what the comments in for steps one a through C and to and to be our guiding you through. Take a look at the HTML just to give you an idea of the structure here for each card. That's going to be a figure element, and the white description down below is the big caption. All right, so that should be everything you need to get set up. I highly encourage you customizes. Make it your own. You can give it your own colors, I recommend if you wanna change up the colors. I love the cooler site. This is one of my favorite new toys. You can experiment with colors here. If I hit the space bar and chrome, at least it's going to generate some new colors. And then when I find one I really like, I can go ahead and lock it and by clicking on the color and you can find the hex codes down at the bottom so That's a really cool toe. If you don't have your own projects, you'd like to add to the gallery or illustrations or photos or something like that. Feel free to keep these icons here or use a site like unspool ash. This site has free high resolution stock images that you can use. There's tons and tons of them, and my students typically love this site. You can also download these include him in your project, and then you just want to replace the image paths, straight hair. You don't want to put him in your images folder, and then you want to replace these path with your images that you've put there. So those are some ideas on how to customise this. But I would love to see what you're all able to do with this on get some inspiration and ideas from you as well. So feel free, customize the colors, images or even the hover effects. If you feel comfortable more advance, he assessed, he'll freedom move around this description or experiment with some other hover effects on this button here. All right, That should be everything you need to get set up, and after this will go ahead and cover transforms, which will last ad a much more die name that cover effects tourist sites. As an important note, I really encourage you work and chrome as you work on this project or another modern browser Brookover browser prefixes in a later lesson. But all of these things should work in chrome just right off the bat. So save yourself some trouble, and that's what I recommend to get started, all right. 8. Intro to Transform: now that we've seen how it can use hover effects and transitions to create subtle animations undersize. We'll see how we can use a relatively new property, and CSS transforms to add some death. Tore Imation's make them much more interesting. So what are CFS transforms? The CFS transformed property allows us to rotate new scale or skew elements on our site without affecting other content on the page. So, for example, when I hover over the snowflake noticed that it gets larger but doesn't affect any of the other content. Same thing with this motorcycle. When I have river it and it moves, it doesn't move anything else on the page. Just motorcycle moves. By combining hover effects transitions and transforms, your options for animation are almost limitless. 9. Rotating Elements: Now let's look at how we can use transitions to animate the transform property on right CSS to rotate elements on cover what we want at a transform. Well, first, specify the transform property and then one of the values who want to choose If we want to rotate something will use, rotate and then with improved disease will have the number of degrees or the angle. If you're transform isn't being applied. Double check to make sure that you specify the correct unit. Such a d E g four degrees. Let's take a look here. I haven't icon in my HTML has the class of FAA refresh. If I wanted to rotate this on hover, I would go ahead and use that cost name cover, and I'm gonna use a transform our property name and the value I'm gonna go ahead and use rotate. You can specify a number and degrees. So, for example, if I use 100 notice, that's not going to do anything at all. I need to specify d e g for degrees, and now we can see that it is going to rotate a bit on hover spot. That rotation is not intimated. They want to animate it again. I would do that of the regular class, name four elements, and I can add a transition, transition, anything that changes over three seconds, and now we can see that that change is going to be animated. I could even make it a little bit faster here, Maybe, UM, 300 milliseconds or something like that. Now it's gonna rotate fairly quickly. One really important note. Make sure that you do not get transformed in transition. Confused? They found a little bit similar, so students often get them confused. Transition have to. With animation, transform is updating the placement, shape or size of things on the page. Now a refresher If it's been a while, uh, when we have a graph, we haven't X and Y axes. We can always add in here for rotate If we only want to Wrote it on one of the axes I could add in here. Rotate why and notice it now is just going to make it look like it's an awful this stone so we can see it now. It's just gonna look like it's rotating on the one active here. If I choose here, rotate X gonna look like it's flipping horizontally instead of vertically, I guess, instead of horizontally. So we can also choose for rotate, ad and an ex. Or why, after we just want to rotate it on one of the axis and then also when they still have a number of degrees. 10. Scaling Elements : Now let's take a look at how it could increase or decrease the size of elements on hover, using the transform property and traditional CSS. If we wanted to increase the size of an element on, however, we could first select the elemental cover and then update the font size and padding to be slightly larger. We could try doing something similar with with or height or something like that. Notice when I have her for the button. It is killing to be larger, but the paragraph underneath the shifting down this is where transforms will really help us out when we use transforms. That only affects the element that were styling and none of the other content on the page. So first, if we want to use, transforms to make slightly larger, we use the transform property scale as value, with a number for X and Y within the parentheses. This example, I'm Skilling, this element to be 1.5 times larger on the X and Y axes. So let's take a look here again. I would do this under the button on hover. You go ahead with the transform property. Skill is my value. I need to have parentheses, and then we have a number. There's no unit here. If I wanted to make it 1.5 times larger on both axes, I do need to numbers here again. I'll give you a cheat cheat that will give you a guide for all of these. You don't feel like you have to memories and notice that we do have our button scaling when I have her over it. But the rest of the content on the page does not move. We're just probably the effect that we want to achieve. Now. Here is a note notice that this change is being animated because when I selected the button I want had an added a transition to that button. And once again I wanted to add my transition to the button and not the button on hover. The difference here. If I added this transition undercover, it's only going to transition in and not out. So that's just a little refresher. Make sure you add your transition under the button itself and not undercover. All right, well, take a look at how we can move elements using the transform property, and the next lesson 11. Translating Elements : Now let's take a look at how it can use the trends from property to animate the position of elements on a page. A super common example of this is animating a button, so it looks like impressing the. But when I have her over by moving it slightly down to move an element along the X or Y access, we can use the transfer property with turns. It is value. We want to put a number and the parentheses for half everyone living along the X axis and how far we want to move it along the Y axis. Notice that a positive number for F will move it to the right and negative number for X will move it to the left while a negative number for why will move up in in positive number for why will move it down if we just want to move it along one axis, say we just want to give it to the left or right or we just want to leave the upper down. We could also choose translate X. We just want to have a horizontally or translate wide and move it vertically and just specify one number within parentheses. Now notice here that I've put the value in pixels. We need to specify a unit for the traffic property or will not work. We can specify a number of pixels, or we can also use percentages. In the last exercise, we were scaling this button own hover. Let's go ahead and try translating it instead to translate. I can use the translate property, and I want to put two numbers with them parentheses. Now notice here that might translate is not working on cover. The reason is because I have left off the unit pixels or percentage of I need to have that to get it to work and now notice it is working. It's moving at 20 pixels, toe left and 20 pixels down again. If I wanted to move this to the left or up, I can use a negative number for Accer Y all right, or it could do a combination of these. And for this, if I want to get in the fact work jealous looks like the button is moving slightly down. I mean, he's translate why in a positive number to move it down and there we go again. We could also use the percentage here. I don't know what that would be in percentages. Maybe like 2%. Give that a try, and, uh, we could even increase a little bit. 4% unit. Looks like that's doing it All right again. You'll see this all over the web. If you take a look and the next lesson will take a look at the last transform will look out , which is how we can skew elements to change their shape. 12. Skewing Elements: and the last value will cover for the transform property is you. This system will take a look at how it can animate this shape of elements using the transform property. I'll show you how we could change the shape of this buttons. It looks like it's moving to the right when the user hovers over it to change the shape of elements will use the transform property once again with you as value we'll put with them parentheses. An angle for how far we wanna structured along the X axis in the y axis. I want to make sure that I specify in my unit here as D. G for degrees or will not work under my button collector. I have added a transition to make sure that any changes on hover are intimated. When I have her on the button, I'm gonna go ahead and use the transform property and go back few steps and skew as a value . I'm gonna put a number for X angle in my wide angle within the parentheses. Notice again. It's not gonna work until I have my unit here. D e g. For degrees. Now it looks like it's being stretched to the left. If I wanna had an updated Thies to be negative numbers here, my CSS notice that now it's going to look like it's stretch to the right and that's it. This is the last mile you will cover for transforms. And no, we've covered a lot, and the next lesson will look at how we can combine multiple transforms to come up with some really dynamic interactions, and then we'll put it into practice in your project. 13. Multiple Transforms: Finally, let's take a look at how it can add multiple transforms toe on element to create some really dynamic animations. For sites, adding multiple transforms to an element is easy. We simply want to use a space separated list for the transform property. The Syntex, for each individual value will stay the same. So here we're rotating this element 100 degrees and scaling it to be 1.5 times larger. We can add as many of our transforms as we want here. So here I am going to skew the button, scale the button and rotate the button on hover and notice all of the things worked. It might be a little overkill for a simple button, but we do have all three of our transforms working now. This is really important to note, because if we tried to add to transforms to this button on two separate lines of here, I'm trying to rotate on one line and scale it on the next. Only the second transformer work, since it will override the transform property that was on the previous line. And here you can see on Lee that scaling is working. If I were to reverse the order and put rotate second here, notice on Lee. The rotation is working and the Skilling is not working. The button is not getting larger. So here, if I wanted at multiple transforms again. We want to make sure that all on one line and it's gonna be a space separated list. And now both of my transforms air working at the same time, All right. And the next optimal. Take a look at how we can put these transforms into practice in your project. 14. Project Step 2: all right. Now it's time to throw. Some transforms into our project gallery, which we can use to make our have reflects much more interesting. I've given you an idea for a simple, however effect where, when you have her, the, uh, whatever the outcomes are there going to shrink a little bit and also move up at the same time So you could see this globe is getting smaller or scaling to be smaller, and it's moving up a little bit. Same thing with this laptop. It's shrinking and moving up and with the other icons also have encouraged you on the button. Maybe move it down a little bit using Translate said. Those are some ideas for a very simple hover effect. Again, you can update this. Make it your own. You could do something with this text globe. I'll give you a couple ideas in just a moment, but I've given you some guidance. If you'd like to do this simple. A factory here in the CSS file for your project. So you confined my comments under Step three A and three B. This would be for updating the image to scale it to be smaller and move it up and then I've also given you a step for under the button here the hover state for the button. If you want to move that down a little bit, a hint for doing that. All of the syntax were doing these things is under your cheat sheet. On the second page, I have a page called Transforms. You can see how to add multiple, transforms and rotate, translating Skilling and skewing again. Pay attention to the unit you're easing here. That's typically her students get tripped up. Now again, I really encourage you to customize this gallery and make it your own. I have my hover fact that I've recommended for the button and the image here, but you could also, if you are familiar with CSS, move it to the side and they could move to the right in scale. You could have an effect where the image room take the for using an icon. Or you could do something where the overlays over the entire image and fades and maybe move it down. This well as it's fading in the sky's the limit really here, with all the different hover effects that you can do So I encourage you do the simple one if you want some guidance, and then you can always even look online. Get some ideas for other hover effects you can do. And now that you're more familiar, recovers transitions and transforms, that should give you a little bit more guidance, or you at least be able to understand other people's copans A great resource for this. You could go to Koken site and also search for things like Image gallery hover effect to find some things that other people have created. All right and again, one last note. I recommend using chrome for this step, and the next lesson we're gonna take a look at how we can out of browser prefixes to Arthuis. Assess to make sure that the newer properties, transitions and transforms will work in a variety of browsers. 15. Browser Prefixes: Now let's take a look at how we could make sure that the animations were creating work and as many browsers is possible, the system will see how it can add vendor or presser prefixes to our CSS to make sure that our newer CSS properties, transitions and transforms will work in a variety of browsers. CSS three allows browser makers to add experimental support for new features. Using Vendor also referred to his browser prefixes. Now different vendors have different prefixes. Android, Chrome Safari in IOS or all Web kit. My effects I Eat and oh opera all have their own. To use these, we would go ahead and add the property one. He's so transition and noticed that I just tack this on at the beginning out in this by using just a normal transition. Property without any perfect is we need to have this and it needs to be last. Now would be a paint abbeys and manually. Every time I'm going to show you a couple tools to automate this, if you're working and Adam or sublime, there's great news. There's a package called Auto Prefix or that you can install, and once you've done so this is gonna automate this for you. So already installed it in. Adam, ever go ahead, flecked my CSS. Then I would go to the out of perfect serve package and notice that it has gone ahead and added in any prefixes that are still needed for transition in transform here. And it is updated, fair fairly frequently. And once a browser comes up a final support, for example, here, it doesn't look like we have a mas prefix for transition. We can then leave off the prefix for that browser. So thes days, it looks like we only need one ticket for transition. And what kit for transform. If you're not working in sublime er, Adam, or you just prefer not installing packages or have trouble, you can copy your CSS and paste it into an auto perfect sir online, and it's gonna do the same thing. You would just go ahead and copy this based it back in your CSS file. Looks like we have a couple extras here, so I think I'm not sure which one is a little that one might be a little bit more up to date, or this might just have these ones just to be safe here. The other way that's gonna automate it for you make your life a lot easier now adding browser perfect. This doesn't automatically mean that things will work 100%. There's a site called Can I Use You can use to make sure that these properties are supported by the different browsers that you really need it to be. So here attempt in transition, going to go to CSS three transitions. And here I could see that it supported or green and all browsers. Except for upper many. That's right, Opperman. It doesn't honestly tend to support many new things. Um, but it's supported by all these other browsers. 94.66% support, which is pretty good. Go ahead and type and transform to spell it. Right. Alright. And here's CSS transforms again. Looks like Opperman. He doesn't support it. I see a little little yellow note here which says an android is only supported with the prefix woke it And here I can see that uh, ej doesn't support it. IHS CSS transforms on S P. G's looks like the same note for all of these. That's not too much of a concern. I can go ahead and use the turns foreign property and know that as long as I adding prefixes, I should be all set. All right. And the next lesson will take a look at how I can add these or start to add these two, your final project. 16. Project Step 3: the final step of this project, we are going to add an vendor prefixes to make sure that our snazzy has hover fax here, work in a variety of browsers. Now I've provided in the resource of section of sculpture. Ah, link for an auto prefect, sir. The one I showed you. That's all nine as well as the packages and instructions for how to install those for sublime. And Adam, I'm gonna show you how you would do this. And, Adam, I'm gonna open up Adam and go to my CSS file, select everything and are MacKinlay sits packages, command palette, teller, toggle. That might be a little different on windows of not positive here. I'm going to search for auto prefix, sir. And what you want to, Chuck, you could even look at your button. Make sure that there is a prefix before transform there, and it looks like I haven't for a transition, so it looks like these did get added in, and you could go ahead and save that file. Now, this would be a great point to finish personalizing this gallery and uploaded to sculpture so that other students can take a look at what you've done get some ideas and inspiration. I recommend you can upload some CSS snippets and HTML snippets of you updated those or screenshots. If you'd like to share your entire site, says I'm not sure if you can upload gifts or not, you may be able to, but if you'd like to upload your entire site, you could go to bit balloon. If you are not already familiar with how to host sites and this is the simplest site for just getting only live link to your site that you can share, then you can take your image gallery folder and simply drag and drop it. Two bit balloon and, uh, see here that worked. Okay, my Internet so little so but it is loading. It might take a minute to process, and once that's life, you can go ahead and copy and paste, set, leak and share with other students in the project section and sculpture. So let's go ahead and take a look at Miley. All right, It looks like my link is live again. You could take this link and share it, but I would love to see what you do. Any comments that you might have any questions, anything like that. I'm excited about this project. And I hope it's been fun and enjoyable for you to work on in the final lesson. We're gonna take a look at next steps you can take after this class. 17. Next Steps: one of the stuffs that I recommend that you take after this course is just to keep an eye out for what other people have done. You could use sites like site Inspire to find sites that are, well design that will typically have some pretty good interactions and animations, or just keep an eye out when you're looking on everyday sites. For example, on this stripe side, I saw this animation I really like. And hopefully, now that we've covered TFS animation, you can see how transforms and transitions might come into play here. Whenever this container, the logos in the background, scale slightly inward and fade out of it. In that button on the front notice that is fading and sliding up just slightly thes things can all be achieved using cover, fax transitions and transforms. Another stuff that you could take after this course is to learn a bit of more about key frame animations, key frame animation, zehr innovations that we can run not only on hover, but when the page first loads as well. Another unique feature about keeper man Imation is that we don't only have to transition from one state to another state but we can add multiple steps in between. For example, if we wanted an animation that runs at two seconds and that loops or runs infinitely, we could first set up our animation. And then we could say when the animation first start. So the beginning of that two seconds we want the font size to be 10 pixels. Then we want to search to 15 pixels at 30% and then 12 pixels at 100%. And then we would loop back through these once more, keep him animations out a little bit more dynamic and animations to our sites. Although they're not, Al is common, but there would be the next step you have learned after this course. Thanks so much for joining the course. Make sure you share your project in school share. I would love to see what you've been working on and tell that