Navigation Menu+

Lesson 3.7
CSS Animations

Lesson 3.7
CSS Animations


Students will be able to construct multi-page websites using Internal Links and External CSS.

Click Here to View the Learning Goal and Scale


lesson3-7_animationsAnimations are not only fun to watch, but they’re fun to make. And up until a couple of years ago, to put an animation on a web page, you had to learn an entirely new kind of coding language like JavaScript or JQuery. Times have changed.

At this point in Learning Goal #3, you should feel pretty good about styling web pages with CSS. The benefit of learning a little bit about CSS Animations is that you can spruce up your pages with something more interesting than just text, borders, colors, and images. If you think about it, people stay on pages that they find to be interesting. When they get bored or feel like they’re not looking at anything new, they leave. So if you want someone to stick around, learn some animation.

This lesson will teach you not only the basics of CSS Animation through properties like transform, transition, and animation, but you’ll also hear the last quote from Hakon Wium Lie. He talks about the importance of having dynamic pages instead of static ones. And what he means is that a good designer can make a page with living content instead of content that looks like it has no life.

During Learning Goal #4, we’ll talk a little bit about JavaScript, which is another coding language used to make a page dynamic, but for now, we’ll focus on how to make a page dynamic with only CSS.



Click here to show/hide contents

dynamicTopic #1 – Our Last Message from Hakon Wium Lie

“Most users see the Web through a looking glass, also known as a computer screen. One of the characteristics of the computer screen is that it’s a highly dynamic device: it refreshes itself 60 times per second. This allows video clips, animations, and other dynamic behavior to be incorporated into Web documents.” (Hakon Wium Lie, Cascading Style Sheets)

What does he mean? Using 30-30-60, consider how this quote applies to what we’re learning.

Scott Kelly: A Year in Space

Topic #2 Static & Dynamic Designs

Almost every design we have created in class up to this point has been static. And for something to be static, that means it has no movement, no action, and no change. In other words, the elements on our pages have pretty much been stuck wherever we put them in our source codes.

Most really good designs, however, have dynamic page content. And for something to be dynamic, that means it has movement, action, or change. In other words, like the Scott Kelly website above, we like to look at pages that have something going on.

But don’t be fooled by the bird on the right. That’s just a GIF that’s been embedded onto the page. It’s a step in the right direction if we want a page that’s dynamic, but again, it’s just a GIF.

Topic #3 – Transform & Transition

With CSS3, one of the coolest new features is that you can actually animate an element. In reality, all you’re doing is moving an element from one place to another, but that’s all part of animation. Just in case you didn’t know, animation is the process of giving life to something that didn’t have it before. When we talk about elements in HTML, they basically just sit there like bones in the skeleton. That is, until we do something with them in CSS. Below are two features of CSS that we’ll be working with over the next few minutes.

CSS Transform (Translate, Rotate, Scale)

CSS Transition (Depends on :hover)

Topic #4 – @Keyframes & Animations

At this point, when you look at all the selectors in a .CSS file, you can probably tell which ones refer to actual elements (p, h1, div, etc), which ones refer to ID attributes (#block1, #block2, etc), and which ones refer to CLASS attributes (.b1, .b2, .c5, etc). You should also recognize that when one of those selectors gets repeated with a :hover extension, that means something will happen if you hover over that element with your mouse. What you probably have not seen up to this point, however, is a selector that looks like @keyframes.

Keyframes are sort of like functions in JavaScript. They tell your elements to do something, but they do it in a range of 0-100% while responding to an animation property. Click here for an example.

Topic #5 – A Fun New Animation Demo

demo7exampleIn order to practice animations, we’re going to create another Demo folder. But this one has a few more steps than a normal Demo, so the teacher will help those who get stuck after Step 6. However, if you can figure it out on your own, go ahead.

Step 1: Go to your “css” folder and create a new subfolder called “demo5”.

Step 2: Open Notepad++ and close down any of the files you had open from the last class.

Step 3: Now create two new files in Notepad++ and save them as index.html, style.css in your “demo5” folder.

Step 4: In your index.html file, copy/paste this code.

Step 5: In your style.css file, copy/paste this code.

Step 6: Save your work.

Step 7: Inside of your demo5 folder, create another subfolder called “img” (for images).

Step 8: Save the following three images to your new “img” subfolder:

Image#1: Cloud

Image#2: Mario

Image#3: Luigi

Step 9: Open up your “index.html” with Chrome or Firefox.

Step 10: Create a split screen (half Notepad++ and half Chrome/Firefox) and make sure yours looks like the one on the teacher’s screen.

Topic #6 – Some Animation Ideas

Most of you may not realize this, but on the Home Page of our school website, the buttons have a hover feature that makes them appear to get smaller when you run your mouse over them. That’s all part of CSS animation. If you’re looking for ideas on what you can maybe do with CSS Animation properties, maybe the following websites can be helpful.

Animation Tool #1: Animations at w3Schools

Animation Tool #2: Animate.css

Animation Tool #3: CSS Animate

Topic #7 – Conclusion

It would be impossible to teach, learn, or completely understand how CSS Animations work in one short lesson, but the purpose of this lesson was to help you understand that they exist and if you practice on your own, you can use them in some really interesting ways. A good animation might even make your design more impressive.


Click here to show/hide contents

During this design, you will not really be setting up a multi-page website, but you will be working with CSS and HTML on two separate documents. The goal in this design is simply to experiment with animations within CSS and even manipulate text.

Step 1: Go to your “css” folder and create a new subfolder called “demo6”.

Step 2: Open Notepad++ and close down any of the files you had open from the last class.

Step 3: Now create two new files in Notepad++ and save them as starwars.html, style.css in your “demo6” folder.

Step 4: In your starwars.html file, copy/paste this code.

Step 5: In your style.css file, copy/paste this code.

Step 6: Save your work, then open up your “starwars.html” with Chrome or Firefox.

Step 7: Create a split screen (half Notepad++ and half Chrome/Firefox).

Step 8: In Notepad++, go to your style.css file and see what you can do.

You have the rest of the class period to explore the code and change it around. That means you can change the story. You can change the colors. You can change the speed. You can change the direction of text. You know enough now about CSS that you should be able to mess around with this design quite a bit. Have fun with it.


Translate »
error: Content is protected !!