Right about now, 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 only 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, learning how to add animation to your site is incredibly useful.
This lesson will teach you the basics of CSS Animation through properties like transform, transition, and animation and 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 good designers make pages with living content instead of content that looks like it has no life, which we call “static.”
LEARNING GOAL #3: The Basics of CSS
Students will be able to construct multi-page websites using Internal Links and External CSS.
PART 1: CLASS DISCUSSIONRead More
Topic #1 – The Final 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
Topic #2 – Static vs 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 Adidas 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 all the various elements of HTML, they basically just sit there like the bones of a 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.
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.
Topic #5 – Animation Ideas
It would be impossible to teach, learn, or completely understand how CSS Animations work in one hour or even one day, but the purpose of this lesson is 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. If you’re looking for a few ideas on what you can maybe do with CSS Animation properties, maybe the following websites can be helpful.
PART 2: ANIMATION ACTIVITY #1Read More
In 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 pay attention and help each other out.
PART 3: ANIMATION ACTIVITY #2Read More
The goal of this activity is to allow you some extra time for experimenting with CSS animations. The more you experiment, the more interesting your design. Don’t just change one thing and stop. Change a lot of things in both codes and try to make connections between the two files.