Getting Started With CSS Animations

1. Welcome To The Class!: With so many stunning websites out there and some not as stunning too it can often be difficult to make your website stand out from the crowd. One way to do this is to add some animations to your text such as a page title or any other headline text. We don't want to overdo things and animate everything but some eye-catching text can really draw the user's attention. Here, you see the examples of what we're going to build in this class using HTML and CSS. Together we'll build 10 examples, which you can easily apply to real projects afterwards. With all of these moving texts and a complex-looking animations, they think that these are really complex to build. Well, actually, everything you see here is pretty simple with most only needing a few lines of CSS to create the animation. In fact, we will often write more CSS to make our text look how we want it to and we'll actually use for the animation itself. You will learn all useful techniques such as keyframes, bill modes, the duration of animations, delays, easing effect, calculating values with variables, combining animations, polygons, and clip paths, and also some general CSS. This class is designed to be beginner friendly although some exposure to HTML and CSS will be a real advantage as it will be assumed you know the basics. You don't need to have done any animation work in the past. Also, everything which we create will be created completely for free inside the browser. You don't need any additional purchases or software. We can get going right away inside the browser. With this, let's now move on to the first animation and I'll see you in the upcoming video. 2. Share Your Work On Skillshare!: When taking any course, it's really important to not get in the habit of following along just for the sake of ticking off another lecture. Take the time to process each lesson. Review the code which you write, and think about how you might approach these solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something personal and unique. You don't need to get too lost and diverted away from the class. You can even take a step back after you've finished the class, and come back and make some project changes afterwards. This will really give you a good chance to practice what you've learned away from the class. Also remember to share your project to here on Skillshare, not only will I check it out, but it will also inspire fellow students too. For more information on the class project, head into the Project and Resources tab, where you can not only upload your project, but you can also see other class projects too. With this in mind I look forward to seeing what you create and upload here on Skillshare. 3. Animation 1: Basic Animations & Keyframes: As mentioned in the intro video, no additional software or purchases are required to complete this class. Everything will be completed inside the browser using a website called codepen.io. Let's take a quick look at this website and see how we set things up. To get started head over to codepen.io. This is going to be the website which we're going to use to create all of these animations. If you want to and you have a text editor such as Visual Studio Code already setup, free to use that. That's completely fine. But for me I'm going to create a new pen for each one of these code examples. Once you've created an account and logged into Codepen, you'll see a screen which looks similar to this. Over on the left, we have a sidebar where we can create a new pen. Click on this pen and this should create a new empty site photos. Inside the Codepen, we're going to have HTML section, a style sheet section, and also a JavaScript section too. All of these will be linked and combined so we can write our code and see this preview in the window below. It's really easy to get going with and create simple code snippets and see the results really fast. In the upcoming examples, we're going to take a look at a few different variants of animations and how we can work with different types of text. For this, we need awesome logo text to work with. For this particular example, I'm going to isolate each one of the letters in the text to be a single element and we'll see why once we get going. First of all, create a div, which is going to be a wrapper for all of our text. Add a class equal to title_container and we use this to add some styling very soon. For these upcoming examples, I'm going to use a business name called the cupcake factory. For some of the later examples, we can type it in as a full string of text, just like this. But for this particular animation, we're going to work with each one of these characters individually. This means we need to isolate each one of these by adding each character to their own HTML elements. For this, we can create something such as a span with span elements. Now, we'll create our texts with one character at a time using Control or Command C to copy. Paste with Control or Command V. Then we'll keep doing this until we spelled out the word the cupcake factory. You can also change this to be a different name if you want to. It doesn't really make any difference. Even if your name's longer or shorter, it makes no difference, the animation. T-O-R-Y. There we go. This is our text all spelled out. Also for the last word factory, just to add a different style. In effect, I'm going to segregate this by adding a class. Set the class name equal to factory and then we can also copy this and paste this into each one of the following elements. We see the text of the cupcake factory. In fact, we need to make sure we spell this correctly. There we go. Those are all previewed down at the bottom. To begin, in the CSS, we can add some styling and layout and we'll add some general styles to the body section. First of all, the height. This is purely for presentation. We'll set this to be 100 percent of the viewport height. We'll make use of the flexbox by setting the display type to be equal to flex. This will allow us to position our text into the center of this window. We'll do this by setting justify content to be in the center and they should push the text into the center, horizontally. Align items into the center. This will give us the vertical alignment. Both of these options are possible because the default display type is to be in a row. This means the content is from the left to the right across the page, rather than in a column fashion from top to bottom. After our positioning, we'll add some fonts. Set the font family to be equal to Georgia. A fallback of serif. You can also change this if you want to be any different fonts or different style in the font size. Make this a bit bigger of 62 pixels. This makes it a little bit more readable inside the browser. Remember that each one of these characters in our word is surrounded by this span element. Let's grab this span element. Then we can get to work by adding some styling. The color of slate gray. So far all of the styling which we're doing is just for presentation. It doesn't currently have any effect on the animation which we're going to create in just a moment. Then just make it a little bit different from the factory section. We'll grab our factory class and we'll also change the color for this one. Since this is a class, we use the dot. Grab the factory text. Then we can set the color inside of here. I'm going to go for a hexagon value, which is EEC 549 semi-colon. With all these basic styling out the way, we can now get to work on adding some basic animations. To create an animation in CSS, a really simple way to do this is to set the starting and the ending state of the animation. Between these two states, the beginning and the very end, we can change any of the CSS properties which you want to. For example, we can set the starting color of our text to be gray and then we can set the ending color to be a different color. We can change the font size. We can play around with the spacing and any other property which you want to. To set these changes or this transition, what we need to do is to make use of keyframes. These keyframes rule has a set of curly braces just like this and inside, we set the starting and the ending state of our animation. We can do this by setting this to zero or zero percent. Then we can add our styles inside of the curly braces. Then afterwards, the state which we want to appear when the animation is finished at 100 percent. Since we're just kicking things off with a simple example, we're only going to use these two percentages, but you can also add in any other values inside which you want to. This will create more intermediate states and complex animations. As well as just adding our keyframes, we also need to give these keyframes rule a name. Let's call this animation. Then we'll set the zero percent state, which is the very beginning of our animation. To make each one of these letters move, what we're going to do is to add some margin, which is some spacing outside of the elements on the left-hand side. Let's add some margin on the left of 10 pixels. Then, once the animation has finished, we'll reduce this down so the margin is only five pixels. What this will do for each one of our single elements, which is the span elements, we're going to add this animation which will begin by adding more space into the left and then it will reduce this down to less spacing which will effectively move each one of these letters one at a time. To link this to our span elements, what we can do is jump into the span section. Placing the animation name, which is equal to this name which we gave to our keyframes. If you save this, we don't currently see any changes inside of this preview. The reason why is because although we've set the beginning and the ending state, we also need to declare how fast this animation is the process. How many seconds the duration is from the beginning to the end of the keyframes. To do this, just below the animation name, we can add the animation duration. For this, I want to use three seconds. We can use the S for seconds or can also use MS for milliseconds. For millisecond, 1,000 is equal to one whole seconds. I'm just going to keep this as three seconds. Now if we hit the save button, or also refresh, you will notice two things about this animation. The first thing is it's actually working. It's going from a left margin of 10 pixels and then finishing at a smaller value of five pixels, causing each one of these letters to move. Well, if you also look closely, let's refresh. Once we get to the very end of the animation, we see this jump right at the very end. What this is doing is the animation is beginning, it's ending and then it's going back to the original state, which it was before the animation was processed. This is completely fine if this is what you want to do, if you want to reinstate it back to the original format. Alternatively, often you may want to leave the ending state exactly how the animation finished. Well, to do this, what we can do is use a property called animation film mode and set this value to be equal to forwards. What this will do is this will make sure that at the end of our animation, the forwards mode will mean that it stays in the ending state, which was set in our keyframes. Now if we save and reload the page, we can see our animation takes effect and it remains in the ending state of our keyframes. Just to finish this off, I'm going to set this equal to cupcake factory logo Number 1. This is now our first logo or our first animation now completed. I'll see you in the second one. 4. Animation 2: Combining Animations: For our second animation, we're going to combine two separate animations. What we'll do to begin is we'll work with the cupcake, I'm going to use the space and properties again to start this off wider. The animation will begin and then these will close up together and then afterwards, once this is all finished, will fade in the word of factory. To start this, we'll create a new pen by clicking the fork button down at the bottom. This will make a copy of our existing project so it gives us a starting point with all the HTML and the base styles which we need. I'm going to change this to be Logo number two. So as mentioned, we'll keep all of this text, we'll keep the body and all of these base fonts, but we'll create our new keyframes down at the bottom. To keep this clear, what exactly we're doing, we'll change this to be the keyframes called spacing and this is going to again adjust the margin. While this will apply to all of our span elements, we're going to fade in the factory, so this isn't visible. We'll work with the factory text just afterwards, so we'll start by adding some full margin rather than just on the left. Now for this, let's place zero margin on the top and bottom, I'm going to go for 14 pixels on the left and right. This will be the beginning state at zero percent and I'm also going to add this at 25 percent. So what this will do, this will make sure that our margin stays the same for the first quarter of the animation and then afterwards, at the very end, it will blend in to be a different margin value. Let's change the margin, we keep zero on the top and bottom and make it four pixels on the left and right, let's give this a try and see how this is looking. If we go up to the span. Well, I'm going to do is to copy this margin in place this as the initial state of our animation so as soon as this loads, our span or our letters will have this margin on the left and right. This will remain for the first quarter of the animation and then we'll reduce down the space in between each one to be four pixels, so since we've changed the animation name from animation to be spacing, Let's change this over and we can also create a shorthand for all of this too, rather than adding all of that animation properties on two separate lines, we can place all of these into a animation property. We have the name of our animation, and instead of having the timing and the film mode as separate properties, we can add all of these onto the same line. This means we can remove our duration and our fill mode. Everything should still work as before. So now save and refresh, we begin with 14 pixels margin on the left and right. This remains for the first quarter of the animation and then at the very end, this reduces down to be four pixels. Since we set the fill mode to be forwards, this is also the ending state rather than jumping back to the original value. Let's just see this one more time. 14 pixels down to 4, and this remains in place. At the beginning of this video, I mentioned we're going to combine two separate animations. The animation which we have, we want to just apply it to the words, the cupcake and then we'll fade in the word factory once this has finished. For this, we need to create a separate keyframes rule down at the bottom at keyframes. We'll call this the delay. So this is going to work with the CSS opacity property and we'll begin at 0 percent and also 30 percent. The reason why we set in two different values here is because we suddenly opacity value to be equal to 0. What we'll do is we'll add this to each one of the factory letters. This will set the opacity, meaning it's completely see-through, so won't see any of the words for the first 30 percent of our keyframes. Then at the very end, 100 percent, we'll make the opacity value to be equal to 1, which is fully opaque, meaning our text is back to its regular value. We're going to distillate to olfactory class just above, just under the color. We'll set the animation, again using the shorthand we can place in the animation name of delay and run this one over five seconds. So we can see again, if we refresh the first 30 percent of the animation, the opacity is set to zero and then towards the end, this will begin to fade in. Also make this look a little bit better, I'm going to reduce the space in-between each one of these letters and also make it Italic. So back up to the factory class. Place in the font-style property of Italic, let's try this one out and also reduce down the margin, so 0 on the top and bottom and five pixels on the left and right. Let's go little less, we'll just change this to two pixels. There we go and this is how we can combine two or more animations and we can also merge in all of these CSS properties into an animation shorthand. 5. Animation 3: Easing & Skewing Text: Welcome back to our third demonstration. We're going to stick with this same HTML for this bond and a lot of the same styling too so we get a quick start by duplicating our project. So fork, our second logo. This will duplicate our original contents. So the HTML will stay exactly the same so we can control all of the individual letters, we'll change this later on. The body can stay the same, the span, we can remove the margin, and also the duplicates we shouldn't have this. Then down to the bottom, we'll get to work by creating our keyframes. For this one, what we're going to do is to make all the letters more widely spread out or spaced out with the letter-spacing property. So we'll start really wide, letter to lend all draw back into the original position. Then also, at the very end, we'll make the text italic by setting a transform. So we can remove one of these keyframes. You'll need one set of keyframes for this one, and we'll call this the animation since there's still multiple things. Again, at zero percent. So as mentioned, we'll use the letter spacing property for this one. We'll set this to be 10 pixels at the very beginning, we'll also set an intermediate state, which is 50 percent, where the letter spacing will begin to get wider. So we will begin with 10 pixels wide initially, then halfway through the animation will make this a lot wider. Let's go for 100 pixels. Then, at the very end, we'll set our letter-spacing to be 20 pixels. But this is a little bit wider than the original starting state. Let's save this. We can place in our animation into our span, placing animation name. Let's see how this looks. You can see it goes wider and then returns back to the center over three seconds. Let's just refresh and see this one more time. So here, at zero percent, we set the letter spacing to be 10 pixels and we finish at 20 pixels wide. So we can also as well as setting the initial and the ending state, we can also ease in or build in these animations, we can ease-in them which gradually brings in our first date, and we can also ease them out to gradually finalize or finish our animation. So to do this inside of our animation, we'll set ease-in. This will build in our animation a little bit more smoothly, but if you want this to be eased-in and also out, we can select ease-in-out, refresh, and everything looks fine in this case. One thing we also need to do with the factory text is to remove the unused animation from previously. We can also remove the font style of italic since we're going to skip all of the texts on the screen here. One thing you might notice as well, when we're working with this letter-spacing or margin, we push the text to be really wide and go off the screen. Let's just save and refresh. You'll sometimes see that the text wraps onto additional lines, this obviously isn't the look that we're going to go for. To fix this, we can work with the title container. Let's grab this, which is the container for all of this text just here. This is the cluster, so we use the dot. What we're going to do inside of here is to simply set the display type to be equal to flex. Let's try this out. You can now see that the text pushes off the page without wrapping onto the next line. The reason it does this is because by default, the flex-box we'll try to fit on one single line unless we add an additional property such as flex-wrap. Flex-wrap will restrict this to be the width of the container of the page and allow it to wrap onto multiple lines. Obviously, we don't want this, so we can remove this and keep the default settings. Then the final thing we're going to do is to go back down to our keyframes and set the skew on our text. Initially, we're going to set the transform to be a value of zero at 50 percent of the way through our animation. The transform, we'll make use of the skewx property and set this to an initial value of zero. This will mean that halfway through our animation, we don't have any effect of the transform. But, once we get to the very end, we'll copy this and paste this in at 100 percent and set the speed to negative 20 degree, this is now going to cause an offset at the very end of our animation, which we'll see just now. It then tilt over all of the texts by 20 degrees and gives us this italic effect. You can also play around with this and do some really crazy things. So for example, if we wanted at the beginning of the animation, all of this text to be pushed off the edges of the screen. Then to come into the center, we could do something like adding some margin on the left, which we've done before, 100vw, which is the width of the screen. This will then start really wide and then all the texts will come into the center. Let's just remove this and keep our original animation. Great. Just to finish this one off will jump up to the top, and we'll name this the logo number 3. Save, open and I'll see you in the next one. 6. Animation 4: Delays & Translate: Moving on now to animation Number 4. As ever, will click on the "Fork" button to make a copy of our logo Number 3. We'll change this to be Number 4 as a title, and we can reuse a lot of the same code from previous examples. But what we're going to do is to split up the words, the cupcake and the factory. We'll make the factory slide in from the left and to the right and then once completed after a time delay, we'll then fade in the words of the cupcake. We've already got this class, a factory to work with this word. What we'll also do is move up to the words, the cupcake and add a class equal to cupcake. This will allow us to work with this particular section and if we copy this and paste it into each one of the following letters. Now we've got two clear sections and rather than working with the span, would replace this with the class of cupcake. The color is fine, but what we're going to do with words of the cupcake is to fade this in at the end. We'll begin with an opacity value of zero. This means we don't see these two words initially, but we will fade these in with our animation. Now let's go down to the bottom. We'll set up our keyframes. For this we're going to work with two separate ones. Remove all of the contents from inside of our animation and we'll call this slide-right. This one is going to apply to the words factory. It's going to begin over on the left and then translate over on the x-axis to opposition. Rather than setting up the percentages inside of the keyframes, if you only want to go from one state to another, we can just say to. This will begin with our starting CSS properties which we have above and then we'll animate to the properties which we add inside of here. We can just duplicate this, our fade section and we'll call this fade. This one can also keep the to inside. For the fade, we're going to add this to the words the cupcake. Remember, we've currently set the opacity to be equal to zero. We'll start with this as zero and then if we copy this and paste this into our fade, changes this to be one and this will be at the end of our animation. Effectively, what we have is this opacity at zero percent and then this one at the very end. We can then set this up. We can change the cupcake class, have the animation of fade. Make this work over 1.5 seconds. Give this a save, and we'll see our animation now fading in. We have a familiar problem, which is at the very end, we return back to the original state of the opacity to be zero. We can retain the ending state of the animation by setting this to be forwards gives it try. This now remains in place. Now we can begin to work with the factory text, which is going to begin on the left and then slide over to the right. We already have this class setup and the color. Inside of here, we can set up the initial state of our animation. We'll make use of the transform property where we'll translate cross the x-axis value of negative 150 pixels. If we save this, we can see this is pushed over to the left, 150 pixels and this is going to be the starting state of our animation. We can copy this and end this back at the value of zero. Obviously, we need to add this slide-right animation to our factory class. Place this in the animation which we call the slide-right. We'll do this over two seconds. Also we keep the ending state with forwards. This all works well, but one thing you will notice is we have this overlap of the factory going over the words the cupcake. One of the ways we can fix this is to add an animation delay. We only fades in after we've slid the factory text over to the right. The way to do this is if we go into our cupcake section, and we have two ways of doing this. We could either add in a animation delay and set this to be equal to any number of seconds which you want to. This will add a 1.5 second delay to our fade in. Or we could also add this to the shorthand. Let's place this just before our animation name. We'll comment this out. This still gives us the required time delay. 7. Animation 5: Sliding Text: This next one is going to be a little bit of a play on what we already have. We're going to work with the factory group and then we'll start this over in the top right and then we'll diagonally move this down so it sits below the words, Cupcake. This will sit below. Then after this, after a small delay, we'll bring in the words, TheCupcake, by changing the opacity. We'll go down to the Fork button and duplicate our project. Make a copy of this and then we'll change this to be logo number 5. To do this we're going to add some margin initially to the words, Factory, which is going to move it from somewhere up in the top right and then bring this diagonally down into place. To do this we'll be making use of some margin. Now, currently we are working with each one of these classes of factory. If we were to add some margin to each one of these it would apply individually to each single letter. Instead, to move this as one whole group what I'm going to do is to cut out each one of these factory classes, cut out all the spans, create a new div section. This one will have the class of factory_wrapper inside of here, paste in our contents. This is now giving us one wrapper to work with all of this word so we can keep our base styles for the body, the container, and also the cupcake. This is all fine. We can move out this commented section and then it gets to work with the factory so we don't need to transform. We're going to work with margin for this one. We can move the animation since we're going to apply the animation to our factory wrapper. Let's do this. Select our class and then add an animation property. This animation property, we can make use of the existing keyframes name of slide right over the duration of two seconds. We'll leave this in the forward state. Remember forwards will keep the ending states of our animation. Down to our animation into our keyframes of slide right, inside here, as well as adding the two property, we could also add the starting state with the words, from. We can add this inside of these curly braces. For this, we'll push our factory text up to the top right, somewhere around this area. For this, add some margin onto the left-hand side. We're going to push this across the page by 300 pixels. Then after this, at the very end, we'll change this to be margin top of 50 pixels. Let's see what effect this will have. As you can see, at the beginning of the transformation this margin left will apply to the left-hand side, pushing this texts over to the right and then gradually at the very end this will add some margin onto the top, which then pushes this text below the words of the cupcake. Let's just save this and refresh so we can see it once more. Good, this is working fine but just as one final finishing touch, what I want to do is to move the words, Factory, to be further over to the left. We'll insert this just below the words, cake. For this, go to the ending state of our animation. We can then reduce down the margin left. Let's try negative value of 100 pixels, See how this looks. That looks better. Maybe 120. Good. This now pulls the word, Factory, to be just below the word, cake. 8. Animation 6: Variables, Rotate & Calculating Delays: Welcome back and let's start with our animation at Number 6, [inaudible] working our current projects. Rename this number 6. We'll stick with the Text of the Cupcake factory, but make this a little bit different just to keep it interesting. At the moment, we can remove the factory wrapper, which surrounds all of the factory texts. Remove this div, which is the opening and the closing tags for this one. Up to the body, make this a little bit bigger. Let's go for the font size 100 pixels. We'll mix things up with a different background color. You can place this as any color you want to, but I'm going to go for 1f1c1c, just to give this a darker background color. We can keep the title container. We don't need this cupcake class anymore. We'll also remove the factory wrapper so we can also remove the corresponding CSS. Just to reinstate the color for the words cupcake, add this to the body. The color which was light slate gray. We're now good to go with our animation. This one is going to be a series of rotating on both the x and the y axis and we'll take a look at how to do this by adding this to each one of our letters with the span element. Let's add the span. Inside here is where we'll place our animation. Making use of the first key frames, what we'll do is call this one rotateX. You only need one single state because we're rotating from the original value up to 90 degrees, so we can place this as one value of zero percent. This is going to take in a transform which rotates the text on the x-axis. Inside of the brackets, we can place in a value inside of degrees, and if you want to see how this looks without the animation, we can just simply place this in to our span elements. If we save this as 90 degrees, we won't see anything on the screen because this is being rotated out of view. But if we change this to be a different number, such as 100, we can see the rotation of 120. This is the effect which we're going to achieve by rotating this on the x-axis and then back to the original state. We're going to move this, place this in as an animation, of three seconds, the key frames name of rotateX. Save this, and now you can see it begins at the value of 90 degrees once you start at zero percent and then returns back to the default state. This one is rotating on the x-axis but what we can also do is to rotate on the y-axis to give this a spin effect. For this, we'll call our key frames spin. Since we just want to begin a one single value just like here, we'll start at zero percent also making use of the transform, but this one is going to be rotateY. To do a full spin, we're going to need to rotate this 360 degrees, so up to our span, we'll place this into our animation. This one is going to be spin. We'll shorten this to be two seconds, save and this will then rotate our text by 360 degrees and then it rotate it back to the beginning state. As we can see, this is only repeated once, but we can also set how many times we want this to repeat. If we want two, replace this in it just afterwards, this rotates twice and we can also keep on repeating this by setting this to the value of infinite. This is two different ways we can rotate either on the x or the y-axis. But something else we can also do instead of rotating everything at the same time, so at the moment each one of these letters are rotating at exactly the same time to give us this effect. But we can also make this a little bit more complex by adding a time delay between each one of these. The way we can do this is by adding a variable to each one of our letters. We'll do this in the form of a style attribute. We don't need this class in each one of these cupcakes sections and we can replace this with the style attributes. This equal to a variable which I'm going to call --i and set the variable equal to a value. The value is going to be incremented by the value of one of these spans. This means that this will multiply at the time delay. Don't worry if this doesn't make sense at the moment, we'll just copy this and paste into each one of these letters. We'll take a look at exactly how this works in just a moment. Then Number 3, I'll place this into each one of our letters. What we've got now here is a variable called --i and each one of them has a corresponding value. We can go down to our animation, which is just here. We'll keep the spin animation which is rotating on the y-axis by 360 degrees. Rather than doing these all at the same time, we can add an animation delay for each one of these characters. After the animation, passing an animation delay. If we wanted to we could simply do a delay such as one second and this will apply to the whole thing. Since we don't have any reference to our variables, we're just applying this to each one of the spans. Instead, we can apply a calculation, the calc function, and we're going to delay each one of these by 0.1 seconds. We'll multiply this by the variable value, which is --i. Giving us this nice delay for each one of our span elements. Let's see this one more time. What I've done here is we've grabbed each one of our variables one at a time. The first one, we'll multiply 0.1 seconds by one. This will simply be 0.1 of a second, and then this will be 0.2 of a second, 0.3 all the way up to the very last letter, which is the y, and this will be delayed by 1.7 seconds. Reinstate the color as a very final touch. We'll also add this class of factory back into our letters, so class equals factory, copy and paste this into the following letters. There we go, and there's our animation which shows how we can rotate on the x and the y-axis using the rotate transforms and also how we can add a different time delay to each one of our characters, like making use of the calc function and variables. 9. Animation 7: Moving Colors: Welcome back. We will start on our animation number 7, by forking our current project. To get all of the base styles and contents. We'll call this number 7. This one is going to be a relatively simple animation using things have already learned, but also a really good looking one too. What we're going to do is work with various colors, and we'll also make use of the variables in the animation delay, where we've worked previously. This is going to filter in our four different colors and rotate them around. For this we only need one set of keyframes. The keyframes we'll call this the color. We'll simply set the CSS color property. The first one is going to begin at light slate gray. Then we'll place in it three separate colors. Four colors in total. The next one will be at 25 percent. The color is up to you, but I'm going to go for hot pink at 25 percent. Fifty percent will be the color of khaki. Then at 100 percent, the color of light blue. Let's see how this looks if we put the color into our animation. I will turn this into a five-second animation. If we save this, we can now see our colors are starting to rotate through our different stages of the animation. But it also only happens once. Remember, previously we can also make these animations run on a loop. We can set how many times we want this to run, or we can also set this to be a value of infinite. This will keep our animation constantly running. You can also see once we get to a certain stage of the factory text still has this yellow color, which we set previously. We also need to remove the classes from each one of these letters. Remove all of these. This is saved, and this now looks a lot better, we don't have any conflict in CSS. We can also remove the factory color. This works as we've done in previous videos, because we have this variable which add the time delay or an animation delay to each one of these calls. Each one of these colors is applied to the letters from left to right after the 0.1 second time delay. 10. Animation 8: Bouncing Letters: Here we go with animation Number 8. This one is going to be pretty straightforward by building upon what we previously have. Currently in the previous animation, which is Number 7, we created an animation delay which causes this effect, and the color cycling from the left through to the right. We did this by inserting a variable, and then we took into account this time delay. I multiplied it by 0.1 seconds. We cycled through all four colors at various stages, and we'll build upon this animation for Number 8, by causing a jump effect to each one of these. We'll do this by making use of the transform scale y, which we've used previously to expand each one of these characters vertically. I will do this with a time delay between each one. Let's fork this current pen and rename this to be Number 8. It's not going to be a lot of color for this one, but we'll make it look a lot better. Jump down to the bottom of this, we'll create a second keyframes rule. We'll call this wave to give this a wave effect. Now, you can go really crazy with this. You can add as many transforms as you want about various stages. But a nice, simple, and subtle effect is to do this halfway through or 50 percent, where we can set the transform to transform the scale on the y-axis, and this can be any value which you want to. The value of one is just the regular size of the span. But we're going to make it 1.3 times the size. Using our wave, we can add this as a second animation to our span, separate it by a comma. Let's give this a go over two seconds. It's in our wave. Now let's see how this looks. We've got a nice effect running from left to right with the same time delay as we use previously. But I'm just going to also speed this up. Let's try one second. That's fine. Let's go for a little bit slower, 0.7. You can have a play around with these values and make it work exactly how you want to. But this is how we can combine these two animations to create a nice looking effect. 11. Animation 9: Glow Effect: Welcome back for Animation number 9. We're going to mix things up a bit and work with a different title. Focus, let's create a copy. This is Number 9. In fact that this one is going to use a different text so we'll call these tasty burgers and then jump into the HTML. We're going to move each one of these spans from inside the title container and simply placing a p element. This p element is going to contain the text of tasty burgers. What I'd like to do for this one is create a nice-looking neon glow effect to the background. To do this, we're going to work with the animation again, but we'll make use of the text shadows CSS property. We'll start with the tech shadow to be a certain value. Then for the animation we'll increase it and then reinstated it back to the lower value and you see how this is going to look very soon. To the body, we can keep the height of the display. We can move this color for the text. The title container to keep this into the center will move the span since we've removed all the span elements and we're just working with this title container. The keyframes, we only need one set of keyframes since we'll be using the single animation with the contents and we'll rename this to be glow. Since we are going to be animating from one state to another, we can use zero percent or 100 percent. Or we could use what we've previously looked at, which is from and to. This is the beginning and the end state. The glow. This is going to be caused by creating a different color and also a text-shadow. At the from the state, which is the very beginning, we'll set the color to be a light gray color of CCC. Then inside the two-state, change the color to be simply white. We'll come back to this in just a moment and we'll see how this looks by adding our keyframes to the title container inside of the animation property. I send a glow. Will do this over a period of two seconds. Our animation works as you can see. We'll just refresh this. It starts from the gray color, which is CCC, and then it goes through to the white color before returning to the default black state. Now there are a couple of things we want to do to improve on this. First of all, we want this to keep running infinitely so we can add the infinite property inside of here. This will cause the animation to keep running from the front color to the white. We can just about see this taken effect but what would be really good if we go from the Color CCC to the white, and then back to CCC and then back to the white and keep looping through each one of these correlatives keeps cycling through the animation and going from the top to the bottom. To make these go alternative ways, we can also add in a property called alternate. See how this looks. This now rotates between each one of these colors. We can see this better if we change it to be a darker color, such as red. This is clearly working. We'll reinstate this back to our CCC. Then to give this glow effect in the background, we're going to make use of the CSS property called text-shadow. When the from the state, in the text shadow. We don't want any offset on the x or the y-axis for the shadow we just simply want it on the center of each one of these characters and then pushing out from the center. We'll keep it at 00. We can add a text shadow of 10 pixels and the color of cyan. This is the front. Copy this and add this to the two sections. But this time it's going to be a little bit bigger. Let's go for 50 pixels. It's now at cycles through from our smaller or larger value. Then it just like it did with the color since we're using the ultimate property, it will return back to the small value and keep going between the two. This now leaves us with this nice glowing effect for our logo. 12. Animation 10: Background Wave & Clip Paths: Congratulations, you made it to the final animation and this one is going to be a really cool-looking effect. As ever we'll go down to the Fork button to create a copy, and we'll rename this. This one is going to use a different piece of text. I'm going to call it the Waterside Cafe which is our animation number 10. We're going to give this a water theme because we're going to be using a water background. We'll see how this looks in just a moment. For now, we'll remove the title container. We can also remove these keyframes, and also replace the texts with Waterside Cafe. We can move this class. Then it gives our texts a cluster workload. The class is going to be equal to wave because we're going to be creating a water-style wave effect. We'll have the outline of our current texts, which is Waterside Cafe. Then in the background, we'll have some watered effect, which is going up and down like a wave. This is going to give us a really nice-looking effect. For this, I'm going to change the font family. Let's go for Garamond. We can keep the background that's completely fine. Everything else is fine. Then down to our wave class. To begin, before we do any pieces of animation, we're going to make sure that the text is outlined. We can see the wave effectively looking like it's moving up and down inside each one of these letters. To do this, we're going to make use of two properties, which is text stroke width and also text stroke color. The stroke is going to give us the outline of each character rather than a fully solid letter like we have. This will make use of the Webkit prefix to make sure this is compatible in modern-day browsers. Then a text stroke width. I set the line to be one pixel wide. We can see this will set the color of the background to be transparent. Then set the color of our text stroke to be anything which you want to, and I want to go for go for light blue. Again, just like the above property, we also need to use the Webkit prefix for compatibility, so text stroke color. I want to go for light blue. This gives us the basis of the effect. We have the outline and then the next step is to create our animation, which is going to wave up and down across our text. Create our keyframes of wave. To do this, we will need to make use of something called a clip-path in the shape of a polygon. Let's take a quick look at how we work with this. A clip-path is effectively a shape or a path which cuts out or blocks out the rest of the content. You've created a clip-path with a circle. This masks the image blocking out all of the content which surrounds it. Below this, we have ellipse shape, which gives us this rounded edge. Then after this, we have a polygon which is in a diamond shape, then a completely different shape down at the bottom. To achieve any one of these paths we need to pass in a series of points or coordinates. How do we get these? Well, we could play around with these numbers manually. We could draw these in certain graphics, programs, or we could also use some online generators. An example of this is a website called cssportal.com, this has a clip-path generator which gives us lots of different shapes to start from. You can see that these all mask the background shape. We can also drag each one of these points to create a different clip-path. This is automatically generated for us. This is a really simple way of creating our clip-paths. Since we're creating a wave effect, what we want to look at is something such as a custom polygon. This gives us multiple points across the page. We can click on various stages on the image, just like they are here. I'm going to create as many different points as I want to. As you can see, this gives us this clip-path, which is a polygon shape. Then inside each one of these dots are each one of these points has a certain position on the x and the y-axis. You can go ahead and play around with these values if you want to. I've already got some numbers in mind which I'm going to be using. Let's go back over to our project into the keyframes. The idea behind this, what we're going to do is set up two separate sets of clip-paths. We'll set up a certain path which is going to be the beginning state at zero percent. Set up zero percent rule. Then we'll change this halfway 50 percent to be a different style of wave. This will transition between our two values. Then at the very end, at 100 percent, we'll return back to the original state. With this in mind, we can also use a shorthand which separates both these values with a comma, and then place our clip-paths inside of these. Let's begin. Just like we've seen in the generator, we'll use the clip-path which is a polygon shape. Then inside the brackets, we'll insert each one of the paths which we want to use. The first position is at zero percent and then 65. Then we'll go through a series of all of the points just like we've seen on the generator. The next one is 15 and 49 percent, is all present values separated by a comma, 32 percent and 55 percent, 58 and 69, 69, 74, 82 and 89, 94, 93, 100 percent, and 100 percent, and the final one for this one is zero percent and 100. This is the starting and the ending state of our transition. Then we can transition to a different value inside of the 50 percent. Just like before, we'll set up our clip-path, which is a polygon and then insert our values. These values are going to be a small variant on the numbers above it gives a subtle looking effect, we'll start at zero percent and 60 percent, 12 and 65, 31 and 66, 49 and 62, 57 and 50, 68 and 45 percent, 100, 46, 100, 100, and then finally at zero percent and 100. This is our clip-path now completed. We're going to transition between these two inside of our wave, as ever we'll do this with the animation, pass in the name of the keyframes. Keep this relatively slow over the duration of six seconds. We also want to repeat this with infinite. Now as soon as you do this, you'll notice that the animation begins to take effect, but it's not quite the effect which we wanted. We want to keep the outline of this Waterside Cafe at all times and effectively insert the wave inside. Currently, as you can see we got removed in the outline text rather than placing the wave inside. The way to do this is we're going to also access our wave just above. We will add the pseudo-elements of before. This effectively adds a child element before our wave. Effectively creating something just before these p elements without actually creating it. But what do we actually want to create? We want to insert our animation, so we can cut this our place and paste this in. Make sure these elements which we just created is also the same content as we see here. We can also add the content property which is going to add the text of Waterside Cafe. This keeps it the same shape as what we currently have. But as you can see now, if we save, we effectively have two elements. This is before elements, and this is one which we created with the p elements. First step is to remove this from the documents and place it directly behind. We can do this by setting the CSS position value to be the value of absolute. What this does is, this effectively takes out the flow of the rest of the content, meaning it effectively doesn't take up any space. Now we've done this content now sits behind the original wave or the original text, meaning we can't see it. To see this, we actually need to give this some color. Let's set this to light blue, with the same color as the text outline. Giving us this nice-looking water wave effect, which appears to be inside of the text. 13. Thank You: A huge congratulations from me, for taking this class and getting to the very end. I hope you've enjoyed it and also learned some new techniques. Hopefully, you can put some of these techniques into practice in a future project, and I also can't wait to see what you've created by sharing your project in the Skillshare project area. Once again, thank you and I hope to see you in a future class.