CSS Animation Fundamentals: Master Transitions and Keyframes

1. Introduction: In this class, I'll be teaching you the fundamentals of CSS transitions and keyframe animations. You'll then take these skills and build your very own single page website, which will contain CSS animations that not only add a dynamic element to your page but also enhance user experience. Hey, I'm David and I'm a front-end Web developer from Norwich in England. I have over six years of experience of building various digital applications and websites for a wide range of international clients. I really enjoy helping others improve their Web skills and give them the opportunity to learn something more today than they ever did before. This class is for any developer who has some basic knowledge of HTML and CSS but want to take their websites to the next level. Now in this class, I'll be using VS Code as my IDE of choice, but you can use any that you are familiar with. You'll also be hosting your website on GitHub Pages. Now don't worry if you've never used GitHub Pages before, it's absolutely fine, I'll get you through the process as a whole, completely free. With these skills you'll gain from this course, you'll be able to offer so much more as a Web developer, whether or not you're a freelancer or you work for a company, your websites and applications will completely stand out from the crowd. Apart from websites, CSS animations can be used on a variety of digital products, creating applications, infographics, data visualization, and digital adverts. By the end of this class, you'll be a master at CSS animations, and you'll be more than comfortable working with transitions and keyframes. Without further ado, let's begin. 2. The Class Project: The project that you will be building is a single-page website, which contains a header with a navigation menu, a footer, a section for images, and a section with buttons. I want you to put together a website based on whoever your favorite musical artist or band is. Even though you'll be focusing on the animations, it will be fun for you to include a bit of content as to why they are your favorite artist. Maybe include some text about your favorite songs or albums. But don't spend too much time worrying about the content as the animations will of course be the main focus of the project. This project is a perfect way for you to apply your new found CSS animation skills to a real-world website with components that could benefit from some animation flair. For a successful project, just try to include the animation concepts that are covered in this class. Of course, you will get bonus points for experimenting with what is taught, so please feel free to get creative. Students should be using their favorite code editor to build their class project. I'll be using VS code, but any other code editors will work just as well. You'll be deploying your final project to GitHub pages. So a GitHub account is required. But don't worry, I'll show you how easy it is to set this up and push your work to a live webpage for all to see. 3. Why use animations?: Now, why use web animations at all? Well, animations can help enhance the user experience, and they can provide some feedback on user actions. Animations can help the user orientate themselves around the interface. Animations are also really good at drawing attention to a particular part of a page, so they can give visual hints to a user that some action is needed. Animations can indicate that there is an element which is clickable or maybe there's more to see. Of course, animations can add motion to a static, lifeless website, giving it some aesthetically pleasing design, and they're really good at establishing a motion with the user. They can also be used as some branding tool, giving the user a memorable and fun experience. Now, I want you to take these things into consideration when you are creating animations for your project, and make sure that your animations serve some purpose so that there's the right balance between aesthetics and functionality. 4. CSS Transitions: When you hover over this button, you can see that the opacity changes. However, the animation is instant. Let's add a transition property. Transition, property, and it's the opacity that we'd like to transition. Now, this alone won't be enough. We need to state the transition duration. This is the length of the transition. I'm going to make this 0.2 seconds. There we can see the animation is a lot smoother. We can also alter the transition timing function. Now, there will be a lesson dedicated to the timing function and the different types of easing that you can choose. What this does, it affects the style of the transition itself, so the speed of which it transitions from start to finish. We can also add a delay to our transition. Let's do one second. When I hover over the button, only after one second will the transition begin. Now, this is a long way of writing our transitions. We can write this in shorthand in the exact same way. Transition, and then you can choose opacity, we can put in our duration, we can put in our timing function, and we can also add our delay. Now, if we remove this, this transition should work in the exact same way. It does. Now, one thing to remember, when you are using the transition shorthand, you must include the duration before the delay. But how about if we want to choose more than one transition property? Well, let's say we want to change the color of the text to, let's say, blue on hover. We can simply write color 0.5 seconds, say is, and we won't put a delay. To separate the multiple properties, we just use a comma like so. There we go, multiple properties. Now it's useful to know certain properties that you cannot transition. I'm just going to remove the blue color of the text and from our transition. What you cannot do, if you wanted to hide the button on hover, you cannot do display, none. It's showing display here. This will simply not work. It disappears, but there is no in-between transition. That's because we have display none and display block. It's either on or it's off, it's either there or it's not. There is no middle ground. That's why if you want to make button smoothly disappear, you can use opacity, just like that. How about if you want to move the position of the button? Now, instead of using left, top, right, bottom, for example, like this, I strongly recommend, and this is a personal trick, to use transform, translate. Now I'm going to move this to the right by 10 pixels so we can use translateX. Let's do 10 pixels in our transition. We'll make sure transformer selected. I'm just going to remove the delay here. We can see the transition instantly. There we go, nice and smooth. Now, the reason I would prefer to use transform, translate when moving in item, is you will get better performance than using left, bottom, top, right, etc. How about if you wanted to change the size of the button? Now, instead of selecting width and height, again, because of better performance, I'm going to use transform, scale. Now, initially, I'll make this 0.8 of its original size. There you can see it's slightly smaller. Then on hover, let's make the scale back up to one, like so. Now, another personal tip, when transforming the scale, if you would like to make it bigger on hover, especially when it comes to images, try not to go above one. This is to ensure the clarity and the image quality will never pixelate. It's not so bad when using an HTML button here. But if this was an image and we say set the scale to be two, this would be pixelated now. That's why I started on 0.8 or figure below one, and then scale up to one. These are just some things to consider when you're starting your class project. 5. Timing Functions: Here we have a button where I have set a maximum width of 250 pixels, and then on hover, I'll increase the width to 300 pixels. Now our transition is of course affecting the max-width. I've done this, I have a one second which is very slow, however, is useful for this example. Then timing function is set to ease, and ease is the timing functions that we will talk about in this lesson. Ease will give us a nice animation, where it speeds up in the middle and then slows down at the end. What are the other values? Well, let's look at a couple more examples, and let's try ease-in. Now, ease-in will start off slowly and then speeds up at the end. Let's try ease-out, which will give us the opposite. We'll start off quickly, and slows down at the end. Let's have a look at linear. Now, linear will give us the exact same speed throughout the animation. We have a consistent transition through out. Now, something slightly different. Let's take a look at steps. Inside parentheses we need to give it a number, so how many steps we want and how will this look? You see there's three steps to get to 300 pixels and then back again. If we change this to six, will have six evenly spaced steps. There we go. We're not limited to these easing functions though, because we can come up with our own, and to do that, we can use the cubic bezier values. Inside the parentheses, we can give some of our own values. I'm going to throw some random numbers in here, 0.45, let's put this here, 0.9, and see what this gives us. Nothing too special. Let's play around some more values and see what this gives us, and it went back to the end. This is our custom transition easing function. The cubic bezier values are made up of four individual values, x1, y1, x2, and y2. Now, these numbers can be anything apart from x1 and x2, which must be a number between zero and one. Now these values are based on a curve which gives the animation style. Now looking at the linear easing, we know that the speed is consistent throughout, represented by this straight line on the graph. The output ratio and the time ratio is consistent throughout 0, 0, 1, and 1. But what's about different timing function like ease? Well, we know that ease speeds up in the middle as shown by this sharp incline on the curve, and then eases off at the end, where we can see the curve becoming more horizontal as it ends. Now, if you want to experiment with your own cubic bezier values, here's a handy tip if you're in Google Chrome. I'm just going to bring up the dev tools here, and highlight the button. Now under transition here, if we just open this up, we can see our transition timing function and we have our custom values here. Now, if we just hover over this icon here, you can see it says open cubic bezier editor. If we click on that, we can see a handy curve here which we can change by moving these handles and our values start to change. This will affect our button over here. There are also some presets on the side here. We click on that, fast out, linear in. Let's click on some more ease out we can know. Linear and slow in. Out and back, let's try this. This is a nice little playground for you to experiment with your transition timing functions, very handy. 6. CSS Keyframes: Now, transitions are great when you want to animate between two different states. But what about if your animation needs to have multiple steps? Well, this is where CSS keyframes come in. How do we write keyframes? Below our styles, we can write them in the same style sheet, and you can of course separate your keyframes into its own animation CSS file if you'd like to. So it's @keyframes, and then the next word is the name of your animation, and this can be anything that you'd like. I'll just call this shape-animation. Inside keyframes, you need to specify a starting position and an ending position, where animates from, and where animates to. For this example, we'll animate from red to blue. This alone won't work. You need to tell your keyframes what element you would like to animate. We'd like to animate the square. Inside square, animation name is the name we chose below, which is shape-animation. Then similar to our transitions, you must specify a duration. Let's say two seconds. There we go, animates every two seconds. Now, what happens if you'd like to animate more steps in between the from and the to. Well, essentially these are built from percentages. We would start at zero percent, then the animation ends on 100 percent. Let's add a midpoint of say, 50 percent. Let's change the background color to green, and let's change the shape of our square. Let's give it a border radius of 50 percent. There we go. I've changed to a circle midway at 50 percent, then to 100 percent. Now, you'll notice that the square doesn't finish on blue while the animation does finish on blue, but then it reverts back to its original state of red. Now, if you would like to keep this as blue when the animation ends, let's do that. There is another property called animation-fill-mode. We would like this to be forwards, so let's see how this works, and there we go, the square is finished on blue. Now, let's add some more animation properties. Let's now move our shape. Let's move this, turn the pixels to the right, and 200 pixels downwards. There we go, in diagonal motion. Let's add another step. So 25 percent, add another color. Let's save yellow, and let's move this to the right by 200 pixels, and see how this looks. That's quite quick, I'm going to have to change this to four seconds. It would be nice to have a third step where this square, basically, we would like it to move right, then down, then left here, then back to its original position. What I'm going to do is I'm going to make this 75 percent, and I will transform: translate the position to zero, 200 pixels. Let's see how this looks. There we go. In this example, we don't need to specify 100 percent because the original state is 100 percent. It's essentially zero and 100 percent. After the keyframe hits 75 percent, whether the square is down here or the shape is down here, it then will revert to its original state. There is another property that I would like to show you, animation-iteration-count. If we set this to infinite, as you can possibly guess, the animation will continue forever. Now, I'm just going to comment this out, so this doesn't give me a headache. There we go, it stopped. Now, much like I showed you with the transition property, there is a shorthand way of writing this, just animation. We can specify shape-animation, and then our duration, and then our fill mode. You can include timing functions in the same way, an easing property like this. If I just delete these, it should work in the exact same way, there we go. There is a nice easing property added to it as well. Now, much like the transition property again, you can add a delay duration. You can specify when the animation begins. Let's say two seconds. After two seconds, our shape animates, and there you have it. You can see how easy it is to create a multiple step animation. 7. Project Setup: Let's begin working on our project together. Now before you get coding, let's take a look at setting the project up so you have everything that you need. I will show you step-by-step how I'll be putting my single page website together from my favorite artist. But instead of you copying my code exactly, make sure you take what you're learning and apply it to your own website. You can of course use the transitions and animations that I'll be showing you in my project, but I urge you to come up with your own. Now, inside a project folder, you need to create an index HTML file for your webpage markup, a style.css file, and this is for your styles annual animations, and a folder for your images. Now, with regards to the images, I've simply sourced mine from the Internet, which I normally would not recommend you do. However, as you are following a tutorial and not creating a production website, you don't need to worry about copyright issues. To host your project on a page for everyone to see and so I and others can give you feedback, I'll show you how to host your project on GitHub Pages. It's completely free and it's easy to do. Now, if you don't already have a GitHub account, please go to github.com and sign up. Now, I already have an account, so I won't go through the whole process, but just follow the onscreen instructions and you'll be set. The simplest way to push your work up to GitHub is to download and use GitHub Desktop. You can download this from desktop.github.com. Using GitHub Desktop, you'll be able to take snapshots of each stage of your work, and then at the end, will have all your work ready to host on GitHub Pages. I'll show you how to do this throughout the project. When you have GitHub Desktop up and running, make sure you are assigned in as your GitHub account. If you're not sure that you are, just going to Preferences at the top here, and there I can see that I am indeed signed into my account. Now, let's create a new repository for your project. To do that, go to File, and New Repository. Now repository name, I'm going to call this Deftones Transitions, and you need to select the path for which you would like to create your repo. I'm going to click "Create Project". Now if I just move this up here, you can see that it has created the folder Deftones Transitions here. Now, you must make sure that your files that we created at the beginning of this lesson are contained inside that repo folder. I'm just going to move those inside there, and there they are. Now, let's just increase the size of this again. Now, we have the name of our repo up here, and you can see on the Changes tab, we have new files to commit, and these are indeed our files that we created earlier. Now, to commit these, we must write a little message to go with the commit, and I will just call this Initial commit. I'm just going to commit this to the main branch, like so. Now we need to publish our work up to GitHub, and to do that, we can just click on "Publish repository". Now make sure you're happy with the name. I'm just going to click on "Publish". In a few seconds, it should get pushed up. Great. To make sure our work is on GitHub, you can click on "View on GitHub" here. Then as long as you're signed into your GitHub account, you can see your username here, the repo we've just created, and your files. Great. You now should have everything you need to now begin coding your project. 8. Project - HTML: Now, if you open up your HTML file in your favorite code editor, I'll be using VS Code here, let's begin working on our markup. Now, obviously, I'm going to be coding my single page website. But just take a look at what I'm doing and see how you can apply the things that you'll be learning for your own site. In VS Code to template out an HTML file, I can just hit exclamation mark and tab. Using the Emmet plugin in VS Code, this gives me a nice base HTML file. My page will be about the Deftones, so I'll change the title there. We need to link to a style sheet. Again, link to our style sheet and the href will be style.css which is indeed our style sheet here. Firstly, we are going to look at building out a header. Now, I will create a div inside the header with a class of wrap. Now, wrap I'll be using across all my components so they all have the same width. Let's take a look at h1. It's a nice big header with the name of your favorite artist. Then I'm going to be building out a navigation menu. Inside that, there'll be an unordered list, and there will be some list items inside. I'm going to give each anchor, a class of nav__anchor. These weren't actually click anywhere as it just for presentation, so I'll just add a # there. Let's have a fake about page, copy and paste those over. Let's have one about blog, and let's have a contact page. Enough on navigation. Now, outside of the header, I'm going to include an image section. Let's give a div or image-section actually. I'm going to make these section tags, and then inside we will use the wrap. Let's create a div with class of image-section image-container. Then inside there, we will have a nice background image. Because it's a background image, I won't be using the image tag. I'll do this in a div. I'll give this a class of image-section__image. Now, for the background image, let's link to here using an inline style tag. Background-image, URL, and then we need to link to our first image, and I'll have saved these inside images folder, so images/image-1.png. Underneath there, let's create a paragraph tag. We can create a bit of text and I'll give that a class image-section__text. What should we write here? I'm going to write about my favorite songs by them. Of course, the content that you include can be anything you want. You don't have to copy me. If I write song 1, lets put this onto a new line, so I'll use a break tag there. Kimdracula is one of my favorite songs by them, so we'll include that. Now. I'm going to include a couple of more images. Let's copy this div, paste it in a couple of more times. What we need to change here is we'll include my second image. Then favorite song number 2, I enjoy something called hexagram. Image number 3, let's change that. My favorite song number 3. How about around the fur. Now, before I move on, I'm going to open this up in a web browser. You can just find the HTML file, double-click on that, and that'll open up in your browser. What I'll be using is go live here in VS Code. This is an extension, if you don't have already. We search for live server, it's this top one here. Now, what this allows me to do is, when we start working on this CSS, you will see the updates immediately inside the browser. I'm just going to open up a live server, and let's take a look in the browser. Shrink this down. There we go. There is our first bit of content here. Let's move on. Now, I want to include a section with some more texts, but some buttons so we can play around with some hover animations on the buttons. I'm going to create a section here with a class of text group. Again, we'll include the wrap. Then inside the wrap, let's create a text-group__container, which contains everything, and then let's think about our texts. We use a paragraph, text-group__text. Tap the cross. Then let's include some information about the band. I'm going to write about where they're from. Deftones are an alternative metal band from Sacramento in California. First bit of content. Now, let's include a button that we can animate on, hover. I'm going to use two sections here. Two text sections, which will have two buttons. Let's call this button, we'll give it a class of button-double. Let's give this an href. This isn't clicking anywhere, so we'll just use a # there. Then the call to action can be, click here. As I said, I'm going to do this twice, so let's copy the container, paste it below. Then what can I write about the band? What I can do is maybe talk about the members of the band. The member are, Chino, who is on vocals, Stephen, who's on lead guitar, Sergio, who's on bass, Abe, who's an awesome drummer, and then Frank, who is the DJ and on keys. Great. A bit of text content. The second button is already good to go. Now, as mentioned, you don't have to follow me exactly. You can change the way the nav works, change the nav links. You don't have to have an image section, or if you do, it doesn't have to come before the text section and buttons. Basically, the layout is up to you. When we come to the animations, again, it's up to you. I'm going to be showing you various styles and techniques that you can use, so try to apply what you're learning to your own page in your own way. These two buttons will share the same transition animation. I would like a third button which has its own unique animation, so I'm going to add a section here. I'm going to give it a class of text section. Inside there, we will have our wrap. Then again, let's have a paragraph text-section__text. Let's include some more content. Let's talk about my favorite album. They've produced nine studio albums, with White Pony being my favorite. I can scroll that up so you can see. As I said, I will include another button. Let's give this a class of button-main, and the idea for this stand-alone button is, I'll be using some keyframe animations instead of transition. But we will come to that in the next section or the following section when we do some animations. What I would like you to include in your page is a footer. Inside your footer, inside my wrap, I would like you to include just a paragraph to say that the website is made by you. Please put your name here. I'll put mine. Website is by me. Excellent. I'll save that, and we can see the content on the right here. Great. One thing before I go is, I'm going to include some custom fonts in my page, which I'm going to get from Google Fonts. What I can do is increase that size. Let's go to Google Fonts here. Now, we are in Google Fonts. You can have a look. We can have a scroll through and see if there's any fonts that you would like to include. Now, I already know that I want to be using the alata font. When you have found one that you like, if you just click on that and then select the style, and then on the right here, it will give you a nice link which you can include in your HTML file. I will copy that and include it just above the style sheet. Just like that. Finally, before we move on to our style sheet, I am just going to commit my work here. Using GitHub Desktop, you can see that index is the father we'd been working on, and this is all our new content. If you'd like to push up your work, you can do the same as me. I'm just going to write a message here, feature markup. I'm going to commit this, and then I'm going to push this up to GitHub. Now, let's move on to our styles. 9. Project - CSS: Once you're happy with your markup, open up your style sheet, style.css and let's start adding some styles to a page. In mine, I'm going to select everything and just to include some base styles. I'm going to include box-sizing, border-box and I'm going to include the font family, which will include the Google font that I've chosen. Let's remove all margins. Let's remove all padding. Now my wrap class, I now want to make my maximum width of all the components to be 940 pixels. Let's add some side padding of 20 pixels. I'm going to display, flex all my components. Let's align the items to be centered. Justify-content to be space between. Of course the margin, let's do zero on the top and then auto on the left and right, so everything is centered. We can see our fonts working nicely there. Now, let's start to go down the page. First, I'm going to include the header. I'm going to give this a background color of a gold color. Now, I will encourage you to pick your colors, so don't copy mine. Padding top and bottom of 20 and then zero left and right. First, let's take a look at this nav. I'm going to display flex the children and justify-content, let's add some space between. Now let's target each list item. Let's remove the bullet points. List style type, none and then let's give them all a margin left of 50 pixels. There we go. You can see everything is spaced out now. Now for the anchors themselves. For all the anchors, I'm going to remove the underline, so text decoration, none. Then for the nav anchors themselves. Let me just check that is the correct class. Yeah it is. Nav anchor, let's make these black. Let's give it a font size of say, 20 pixels. Our position, relative. We're shaping up nicely. Let's move down to our image section. Image section class. Going to make sure there's a background color of black. Image section and then we've got the the image container class which is inside. You're going to give them an overflow of hidden. This will become apparent when we start working on the transition or the hover animation on these images as to why I'm including overflow hidden. We'll come back to that. As I've got three images, let's make sure they are all a third, so 33.3 percent width. Now for the images themselves, image section__ image. Let's display, flex these images, align items. Let's make sure they're in the center and the same for justify-content, make sure they're in the center. Let's give them some dimensions. Height, I'll make that 400 pixels. Then let us give them a padding. Nothing on the top and bottom but 20 pixels left and right. Now, the background itself to the background image. I don't want to repeat them. Let's make sure they're centered, so 50 percent. Then for the size, I want the image to cover that space like so. Not all the images are appearing. Let me just check to see if everything is correct. Image two and three. This is why. We've got PNG for one, JPEG, JPEG for two and three, that's why they're not pairing. JPG and there are our other images. Now the plan for the image text. My favorite song here. My idea is when we hover over the images, I want the text to appear. Currently it's not there. Then we hover over it, it appears. Let's give this text some initial styles but we won't worry about the animations until later. I'm going to give the text a background color of slightly black but with half opacity. It's see-through. Zero, zero, zero for black and then 0.5 for 50 percent opacity and then we'll make the text itself to be white f f f. Font size, let's make this 20 pixels, text align to be centered and then you can see it there. Initially we'll make the opacity zero and we'll increase the opacity to one when we add the transition. We'll come back to that. The text below, another text group text. Let's give them a margin bottom of 25 pixels. The text group container, which I forgot. The [inaudible] container let's give that some padding of 50 pixels all around. That's better. Now the buttons themselves. All the buttons will hold some similar styles. Background, we'll remove that and then we'll add our own border of border solid two pixels and then black. Make sure the cursor is indeed a pointer. Let's increase the font size to 18 pixels. Let's give the buttons some padding of five pixels top and bottom, 20 pixels left and right and I'll make sure the position is relative. They're looking good. Again, we'll come back to the hover animations for these buttons. Let's move on to this text section. Text section, background color of, let's give it a gray of e e e. Padding top and bottom of 50 pixels and zero left and right. I'll need to remove that colon there. That's better. Now, let's give some styles to the wrap inside this text section. It's slightly different, so display flex. The reason it's different is because I want the flex direction to be in a column, not a row. Now they're above each other, the text and the button. Now, let's align the items to be centered and we'll do the same for justify content to be center as well. The text itself, text section__ text. Let's give our margin bottom of 25 pixels and text align to be centered. That's looking good. Now, the button as part of this text section, so button main, I believe we gave this a class of. I don't want to see the gray behind the buttons, so let's give this a background color of white. Then finally, if we scroll down. Let's take a look at this footer. The footer, I'm going to make this black to fit in with the design, but [inaudible] of black. Then again, much like our nav, I'll give the color of this nice gold color. This matches. Scroll down. Yeah, now this is the style there. You can add some padding all around. Let's give padding of 20 pixels. I'm going to make sure that the text align is in the center. Let's just increase the width. Let's see how this is shaping up. Yeah, that's looking good. That is the base styles or the static styles for my single page website. Now, as you progress through the lessons, we'll start adding some transitions and some key-frame animations to really spice this up a bit. I do, of course, just want to commit my work up to GitHub. I'll do that now. We can see in the index file, this is where I changed the images from PNG to JPEG and then our style sheet is, of course, all our styles. I'll include a commit message of feature, add styles, commit and push. 10. Project - Nav Bar: I'm going to start adding some transition animations to my elements. Now maybe don't copy exactly what I'm going to show you in the next few lessons. But think about the techniques that I'm showing you and come up with some of your ideas, your own ideas for your single-page website. Firstly, I'm going to think about animating these navigation elements. I think what I would like to do is when you hover over these menu items, a black line draws out from beneath each word. To do that, I'll first go and create a pseudo element on the nav_anchor. This is going to be our underlying element. So nav_anchor after. Now I'd like to make the color to be black. Let's make the height two pixels. Let's make sure the width is 100 percent of its parent, which will be the word above. As this is a pseudo element, you must always include content, where this can be a blank string. Now, we need to position this absolute, which we can do because the parent is positioned relative and you can now see the lines drawing there. Now let's think about where we would like to place it. Bottom minus five pixels so it's below, and then left, we want to make sure this is zero so is to the very left of the word. That's looking good. I think now we can start thinking about our hover animation. Now underneath all our static styles, I'm just going to write a comment here which can be hover and then all our animations and transitions can sit below here. On the nav_anchor, when we hover over it, we want to target to the after element. Now, to drill this in, I'll be using transform scale x, which means horizontally, so left and right, and we want to set this to the full width, which will be one. What this means is when we go back to our static styles, we need to make sure that the after element, the scale x is initially set to zero, and they disappear. Now when it comes to our transition, we want to target transform because this is what we're targeting here. I'm going to do this over 0.2 seconds and I'll use the easing of ease-in-out. Now let's see how this animates in. Great, from the center. Now, if you wanted to animate, say from left to right, this is where you can use transform origin because this will indicate where the starting position is. If I set this to 0, 0, so x and y, you can see that the line draws in from left to right. But I like it moving in from the center outward. So I'll just delete this. Great. Now when you're happy with your animations, please don't forget to commit your work on GitHub desktop and push up your work to your GitHub account. 11. Project - Images: Now I'm going to think about how I'd like to animate these images, which should have some text that will appear in front of them once you hover over the images. Now, on the image text, the opacity is currently set to zero. If we just set this to one, you can see the text there. Now, for some reason that the text is not sitting where I want it to, it should be in the center here. I imagine there's something wrong with our markup, and indeed there is, this text should be inside the image div. Let me just update this, and the final one. If we save that, there we go, much better, that's where the text should be. Great. I'm going to set the opacity back to zero because this is what we will be animating in. Once we are here, let's do the transition, and it's the opacity we're targeting, also the 2.2 seconds, and our ease in out. Now, let's target the image. Image-section_image, so this is what we will be using to hover and bring the text in. Then is indeed the image section texts which will be animating in. We just need to set the opacity back to one. There is smoothie coming in. What I would like to do with the text, is maybe to increase the size of it as well as the opacity. What I'm going to do is on the hover, next transition scale, and set this to one. Then when we get to the text, let's set the initial scale to 0.8. Smaller, and then increases in size. The reason that's not animating in how I would like, is this should be a transform, not transition. Then we also need to add the transition here itself. Transform 0.2 seconds, ease in out. Both opacity, and transform are getting targeted. Imagine that's still not working because I think that here. Yes, I said transition instead of transform. That's an easy mistake to make, so don't make the same mistake. Transition and transform are both very different. There we go. There is our transform, transitioning in. Also, I think I would like to add some movement to these images. Again, I'll affect the scale on this image. On transition, I'm going to target the transform scale. Transform 0.2 seconds, and let's just ease in and out. Then for the image itself, when we hover over it, so I'll just copy this. We can transform the scale because the default is one. I'll set this to 1.1, and then see how the images look. Great. Working perfectly. Now, I now I said in an earlier lesson, that you should not transform scale above 1.0 especially when it comes to images. Now, the reason I'm doing it here is because I know the full size of these images are a lot bigger than this initial set dimensions, and this is why the images are not getting pixelated. It still looks fine. Now, after you've committed your work, let's move on to the next transition. 12. Project - Buttons: Now I'm going to think about how I'd like to animate these two buttons on hover. My initial thought is on hover, I would like a gold background to appear from the bottom upwards in a nice smooth transition. For that to work, I am going to create a pseudo-element on both of these buttons and that will form our gold background. To target these two buttons and only these two buttons, not the third one, I need to remember what class we gave them. It was button double. We'll use that. Just under our button class, let's create this pseudo after element. I know I want the background to be my nice gold color. We must include content if this is a pseudo-element. Would like the height to be eventually 100 percent and there's a semicolon there. Let's make sure it fills the space of the buttons, left needs to be zero. To do that, we must make sure that position is set to absolute, then top can be zero. The width should be 100 percent, because we're filling out the space. There we go, and we can see the background appearing there. However, we can no longer see our text. Therefore, we need to set the z-index to be minus one, so it sits behind. That's looking good. What is it we'll be transitioning? It will be transform scale this time. Why? Because it'll be the vertical motion. I'll set this to be zero, and it disappears. With regards to the transition, we can target the transform 0.2 seconds ease-in-out. You can see there's a common theme here when it comes to the transition duration. I quite like to use 200 milliseconds, that's just a preference, and I like to use ease-in-out as the easing. But I urge you to just experiment with your own numbers and your own timing functions and see what works well for you. Scroll down to our hover section. The button double class on hover, we will target the after element and we will set transform scale y, to be one. How does this look? It's looking pretty cool. However, as I said, I didn't actually want it to appear from the center outwards, I wanted it to appear from the bottom. This again, is where transform origin can come in. Offset transform origin to be zero and zero. Note that appears from the top downwards, we're getting closer. What I really need to set is the y part or transform origins. Transfer origin x is zero, y is currently zero, this should be 100 percent, so it starts from the bottom. There we go. There are my two buttons complete. If you're going to be animating buttons yourself, maybe have to think about how you can animate possibly the border. You could change the width of that, or the color, or maybe on hover, you can add a shadow, or you could change the text color, or affect the opacity. There are many aspects of the button that you can transition in on hover. Have a play around and see what works well for your buttons. I'm just going to commit my work to GitHub. In GitHub desktop, we can see that styles, here is our button doubled after styles, and the hover down here. So just write commit message, feature, colon, button transitions, I'll commit this, and then push this up. 13. Project - Keyframes: In this lesson, I'm going to show you how I'm going to utilize keyframe animations to animate the final button. Now, my idea for my keyframe animation is when you hover over here, the width of the border increases in size, and I'm going to do that until you move the mouse away. Let's build up this keyframe animation. Whilst we're in the hover section, let's do @keyframes and I'll call this borderGrow and this can be named anything that we want. At zero percent, the starting style will have a border, solid two pixels, and that'll be black. So 000. It won't actually be the border that I'll be animating, but it will be in fact the box shadow. This will give the illusion of the border growing in size. Box shadow will be 000, so pixel won't be there, and that will be black. Then the final keyframe, so a 100 percent. So the final keyframe step. The border will remain as is, but the box shadow will be 00, but then it will spread out two pixels by two pixels and will still be black. Then when we hover on button main, so button dash main colon hover. Let's add the animation, which is called borderGrow. I'm going to do this quite slowly over one second. I just want the timing function to be linear, so I won't be using ease-in-out and I want this to animate forever. Well, until we remove the mouse from the button, let's see how this looks. It's almost there, but as you can see when the box shadow is at its full width, it snaps back to its original state, which we don't want. What I would like to happen, is it to grow in size and then transition backwards, not snapping back. We can do that by using the word alternate. This will alternate forwards and backwards between the animation. Just like that, that's great. While I'm here though, I would like to make the background color to be gold. That means that we just need to add a nice transition here for background color 0.2 seconds, ease-in-out. Beautiful. That is looking good. Finally, let's commit our work. Feature. Button, keyframe, animation, and I'll do a message, and we'll commit this work and then push this work up. Let's take a final look at how my single-page website is looking. This is our nav transitions, I've got some nice images and text, some button hover transitions, and a final keyframe animation. As in previous lessons, I will encourage you to experiment with your own styles, your own transitions, and your own keyframe animations. Try not to copy exactly what I've done and see what you can come up with. In fact, when it comes to your keyframe animations, you may want to include many more steps than I've done here. I've only got a starting step manner finishing step, but you may want to have some interim steps with your keyframe animation. But have a play around and see what you're happy with. 14. Sharing Your Project: Once you've committed and pushed up your last bit of work on GitHub Desktop, go into your account on github.com, and then click into your repository. So mine is called deftones-transitions. Then you'll see your source files. I've got my images folder, we've got my index file, my styles down here. To the right here, we can see that there's been eight commits. If I click on that, you can see the list of commits from previous lessons, and the most recent one was the button keyframe animation. That's all good. That's all present and well. When it comes to publishing your page on GitHub Pages, you need to go into settings. Then we'll scroll down to the bottom of the page. You'll see GitHub Pages is here. But it says, I'm not able to publish this yet because I need to make sure that the repository is public and it's currently set to private. Down below it says, change repository visibility. This repository is currently private. I'm going to change this, and I'll make this public. To confirm this is what I want to do, it says, please type and then my repository name, so my full name, and then deftones-transitions. To confirm, I understand, and I want to change the repository visibility. Let's do that. Now this is set to public. If we scroll back down to GitHub Pages, you can see some options here. Firstly, the source. We need to tell GitHub what branch name we want GitHub Pages to look at. We've been pushing our work to the main branch, so this is what I will select here. Then is in the root of the directory, so we can leave that as is and I'll click on Save. Once that allows, let's scroll back down into the area and it says, your site is ready to be published, and it gives us a nice URL here. If we check this out, it may not be ready yet, but that's because GitHub Pages will take a few minutes to publish your final bit of work. Let's open this, open a new page in a new tab, sorry, let's click on that. Actually it's all published and ready to go. All our animations are here, all our transitions are here, and this is the URL for my published single-page website. I encourage you to share the URL to your published GitHub Pages website and maybe write about the transitions you've added by adding this all to the your project section of the class. Now, this will allow me to offer you any feedback and any suggestions. I also encourage you to interact with the other students, so you can offer each other some support. Of course, if you do have any questions or need any tips, then please let me know. I'm obviously happy to help. 15. Summary: Huge congratulations on completing this course. You've managed to follow along with me and create your very own single-page website full of transitions and animations. You should now have a pretty decent understanding of the various aspects of CSS animations and transitions which you can now utilize in your future web projects. Hopefully, you'll do just that. You'll now be able to offer much more as a web developer and be able to demonstrate your new found abilities in creating dynamic websites. Finally, I just want to say a big thank you for signing up to this course. It really does mean a lot. Without your support, I would not be able to make content like this. I really hope you did learn something from these lessons. I really hope you enjoyed this course, and if you did, please take the time to leave a course review, it really does make a big difference. With that being said, thank you so much, now go forth and code.