CSS3 Animations with Transitions & Transforms

1. Introduction: Hi, everyone. I'm Kirsten Swanson. I'm currently a Fernand developer. Bring folder. And I'm really excited to be here on still share to teach you about CSS animations. First, let me give you a little intro about myself. I started marketing and as my undergrad and right after I finished, I wanted to explore the world and travel. So I ended up teaching English in South Korea for two years. When I came back into the States, I was an engineering technician in the well, he asked industry With the downturn in oil a price in about like 2015 I decided to explore new career paths. I just wanted something that was more challenging and creative. And it was actually when I was hiking with a friend and she told me about coding boot camps . At first I was really hesitant, and I just need to adjust the water. So I ended up taking some free courses online, and I ended up falling in love with Cody, especially CSS. So that made me and roll in a coding boot camp called Torreon School of Software and Design and didn't for Colorado. I enrolled in the front and pervert which focused for on design and the user interface In 2017 I graduated. And I have to be honest, that was the best decision I made in changing Curb Pass. So now I am excited to share my skill set and passion of CSS with you guys. This course is going to be about CSS three animations. It does not include a heavy animation with my brother and you don't even know drop script. But you do need to know the basics of CSS. So let's get started and have fun. 2. Project Overview: for your course project, you'll be creating an interactive collage of animated icons. You'll choose your own background as well as icons, so when you hover over the icons, there'll be some sort of animation. Some good resource is for back. Own images are on splash. This is a large gallery of stock photos as well as pixels and then for icons. I like using flat icons as well as I can find her. I'll also be including a repository in the lesson plan, and this will include in each to mull Pile You can see here. This is where you'll insert your images and then also a stylish she. And this is where you will be positioning your icons. Absolute positioned. I look forward to seeing your finished projects at the end of this course. Okay, let's get started and learn about CSS animations. 3. CSS Animations Overview: this course is about CSS three animations with transitions and transforms. First, I'm going to give you a broad overview of CSS three animations, and then I will go over transitions and then transforms. And finally, we'll do some life coating. After that, your project will be making your own innovations. So first off, CSS three innovations provide a lot of value to your interfaces. They can provide visual feedback they make delightful. Micro interactions in thes typically can become memorable interactions to users. CSS three animations will alter the appearance or behaviour oven element when its state changes, so this could be on like a hover or focus or active state. The animations should be simple in subtle movements. They should be consistent animations, and they should enhance the user experience and not distract from it. Also see uses. Three animations are great because they don't need Java script or an animation library. Here are some tables from Can I use website in? This just shows that CSS three transitions and transforms are rightly supported in multiple browsers 4. Transitions Description: So first I'll go over transitions, and he's making elements smoothly and gradually change over a specified duration. So if you don't have a transition on an element when it's transformed, it will change abruptly. It won't be a smooth transition, so typically, when you have a transform, you will have a transition. There's four transition properties. They are transition, property transition, duration, transition time and function in transition. DeLay a juicy the first to those air required for transitions. The other two are necessary. In order for a transition to work, you can either right each property individually or you can use the shorthand, and that's recommended for faster and cleaner code. 5. Transition Properties: Now we'll talk about the individual transition properties, so the 1st 1 that's required is the transition property, and the specifies the property to be transitioned. So let's say, if you want the border color or Baccarin color, this is where you specify it. Otherwise, if you put the value of all, then you're changing all their properties that could be animated. Here is actually a list of all the different properties that can be animated, so you can see it's a fairly large list. Next is a transition duration, and a specifies the time span of the transition, and this value is written in seconds. The transition timing function specifies the speed of the transition over the duration. By default, it's set at ease. The other options include linear ease in ease out. He's in out in cubic busier cubic busier allows you to define your own timing curve. So let's look at this cheat sheet to show you kind of what that looks like. So right here these air different cubic does ears. You can see that the transition timing are all different. If you wanted to get the actual code, then you could click on it and then we each year you can see that this is the actual timing function that you would need. So this would be like your he's in or he's out. The last one is the transition delay, and this specifies when the transform will start by default. The transition starts as soon as the state change on the element is triggered. So let's say if you mouse over an element on hover, it's going to be triggered right away, but you can put a delay on it, and it would it be triggered right away. 6. Transforms Description: now we're going to talk about transforms. This is when an element moves or changes and appearance. The main types of transforms our rotate, skew scale and translate. Rotate is when an element rotates clockwise or counterclockwise, and this is specified by the number of degrees. Skew is when an element tilt based on the values provided on the X and Y axes. This is also specified by the number of degrees. Scale is one in element increases or decreases, and this is by an integer based on the height and width of the element. Translate is when an element moves right, left up or down, and this is specified by pixels. You can combine multiple transforms so you can have an element that translates and rotates . Lastly, transform origin is separate from the transformed property but can be used in conjunction with it to specify the location. Origin of the transform 7. CSS Selector & Property Review: before moving on to the life coating. Let's just review CSS selectors and properties, so you have your element. It could be your P tag or your header tag or your div. Then you have your property, which is going to be your color background color border, and then you have the values specified here. So when we are talking about transitions and transforms, those will be our properties. So here, in a transition, you will specify it as your property. And then these will be the values for a transform. You will specify. Here is the property, and then the different values could be rotates. You translate or scale in order to be able to visually see the state of an element change. We're going to be using the hover pseudo class, so we'll put this at the end of the element. So you have the element than a colon than hover. Then you have your property and then your value. So, for example, there's a link class in. If you have ah, hover pseudo class on it, it's going to turn blue when you hover on it. Now let's move on and actually do some life coating 8. Transition Examples: okay on to the live coating. I'm using coping here. It's a free online editor found in your browser, so we're going to first talk about transitions, will be using the square and putting animation on it. So first, let's add the hover pseudo class to it so that we can see when the state changes. How about we make the background color change? Well, say to a pretty purple, but you can see when you hover on it. It's a really abrupt change. It's not smooth, so this is where the transition comes in hand. So we'll be using the shorthand of the transition because that's going to these cleaner, leaner code. And if you remember correctly, you'll first be putting the property when you put federation, then the timing function and lastly, the delay. There is a specific order to this, and you want to make sure that you do it in the correct order. So let's make a transition for this background color specify in the background color here because it's the property that we're changing. And let's say we want that to take five seconds. Let's see what Bacca's that it's now a smooth transition. It doesn't change so quickly. After the fight seconds, we can put a timing function. Let's put the keys on, bro. This changes the appearance of the transition. Lastly, you can put a delay. Let's put a second delay, so when you hover on the square, it's not going to change colors right away. See how the purple didn't take place right away? It's because it takes a second of hovering on the square before it will actually change. Let's add another property to this square. We're gonna have a border to it, but this becomes a purple border. Now we want to change the border on the hover as well. Change this to a green. So as you can see, the border does not change at the same time as the background image. This is because in our transition were only specifying the background color. So since we're changing the border as well, we can say all here and both should change at the same time. Now 9. Adding Vendor Prefixes for Older Browsers: There's so many different properties that you can changed. Aside from just the color, like the list that I showed you earlier Here, you can change the with the high margin padding so many different properties that you can anime. Also, when using transitions and transforms, you want to make sure to add the vendor prefixes like Web Kit, Mozilla Opera and Internet Explorer for transforms, and this is in order to support older browsers. 10. Transform Rotate Example: Now we're moving into transforms, which I think is the more fun part of animations because you get to change the appearance of elements and you get to make them move. So first I'll go over rotate, so we'll put a transform on the squares. Will Roque eighth, Um, and the six, the value of degrees. How about we do 50 degrees? So when we hover, these elements will rotate 50 degrees and you see, it's not a very smooth transition, so that means we need to put a transition on there. Let's give it a second. You can see now the motion is smooth. Let's say we want to go counter clockwise will put a negative on this degree. What if we want to make them spend really fast? Let's put a bigger degree on this. That's a lot of fun. 11. Transform Skew Example: the skew transform is similar to the rotate transform and that it takes degrees as the value sq is when an element is tilted based on the X or Y values given. So the skew eggs, this will be skewed based on the X axis. Let's put it 10 degrees. If it's a positive number, it's going to tell to the left. If it's negative, it will tilt to the right. Now with this. Q. Why this is going to be tilted on the Why access. So if it's a positive number, it will skew down. And if it's negative, it will skew up unfriendly. If you just specify skew, the element will sleep skewed based on the X axis. But you can also put in the UAE that all you hear is well and it will skew Berks 25 degrees on the X axis and then 10 degrees on the Y axis 12. Transform Scale Example: just like the skew transform, the scale transform can be transformed on the X and Y axes. That scale takes a value of a number, so let's put in the number to see what happens. That element gets twice the size of its original size, and you can also see that this change is not very smooth. So let's go ahead and add a transition. CNN will give it a duration of a second. How it's very smooth. Okay, how about lets shrink the element so we'll put in half the size of it. How about let's change the skill to the X axis? And we can also change it to the why or the shorthand here we can put in that X value in the Y value, and the element will be changed on both these axes. 13. Transform Translate Example: the last transform I'm going to discuss is the translate transform. I feel like this transform is used a lot in you. I, for example, in total, citing and or some confirmation feedback appearing. I feel like a lot of times we have a lot of objects toe elements appearing in the display. The translate transform moves an object up or down on the Y axis or right or left on the X axis. So let's play with this circle right here. We're going to translate it X, and the value that goes in here is in pixels. So let's put in 20 pixels, and this is going to make the element go right. You can see it's a little bit twitchy, so let's add a transition inhibited duration of friar seconds much better and smoother. Okay, so now if we get this fall your negative, the element will go to the left. Now, if we translate why the element is going to go up and if it's a positive number, element will go down. You can also use the shorthand version of Translate in. The element will go right. 20 pixels in down 30 pixels. Okay. I think this is a good time that we can experiment with all these circles and we're going to also play with the timing function. We can see how the motion the movement of these circles can be different when you put a different timing function in. So we're gonna move all these circles when the whole container is hovered on. So how about we move on the exact access by 300 pixels? So all the circles are going to move 300 pixels? And as you can see, it's not very smooth. So let's transitions to all of these circles. By adding this transition, it will be a smoother as you can see, they're all going at the same speed. But let's put a timing function well. Experiment with the different ones we have. Let's put it, feeds. He's on, it leaves out, he's and out, you know when you're coming function. So these just make the speed of the transitions different. So let's see what this does. Now. You can see that this circles move at different speeds. That's because of the timing function that we just added. So translate is a very powerful transform, and I feel like we can use it a lot in Are you I and really enhanced the user experience 14. Combining Multiple Transforms: don't forget, you can combine multiple transforms together. You'll write them in line like this without a cynical in separating them. But remember, you want to keep your end user in mind and enhance their experience rather than overwhelm them like this. Hover here. Well, congrats, Guides. You finish the course. I hope you get creative with your project. And I look forward to seeing your finished work. Hopefully, this course on CSS animations was insightful and going forward. We will be able to add delightful moments to your you. I thanks again for taking my course, and I hope you learned a lot.