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

The Adidas Speed Factory

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.

• 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 – 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.

• Animation Tool #1: Animations at w3Schools
• Animation Tool #2: Animate.css
• Animation Tool #3: CSS Animate

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.

1. Step 1: Folder Setup
   Go to your “css” folder and create a new subfolder called “demo5”.
2. Step 2: Program Setup
   Open Notepad++ and close down any of the files you had open from the last class.
3. Step 3: File Setup
   Now create two new files in Notepad++ and save them as index.html and style.css in your “demo5” folder.
4. Step 4: HTML Setup
   In your index.html file, copy/paste this code.
5. Step 5: CSS Setup
   In your style.css file, copy/paste this code.
6. Step 6: Code Check
   Save your work.
7. Step 7: Subfolder Setup
   Inside of your demo5 folder, create another subfolder called “img” (for images).
8. Step 8: Image Setup
   Save the following three images to your new “img” subfolder:
   Cloud | Mario | Luigi
9. Step 9: Page Setup
   Open up your “index.html” with Chrome.
10. Step 10: Screen Setup
    Create a split screen (half Notepad++/half Chrome) and make sure yours looks like the image above.

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.

1. Step 1: Folder Setup
   Go to your “css” folder and create a new subfolder called “demo6”.
2. Step 2: Program Setup
   Open Notepad++ and close down any of the files you had open from the last class.
3. Step 3: File Setup
   Now create two new files in Notepad++ and save them as starwars.html and style.css in your “demo6” folder.
4. Step 4: HTML Setup
   In your starwars.html file, copy/paste this code.
5. Step 5: CSS Setup
   In your style.css file, copy/paste this code.
6. Step 6: Code Check
   Save your work.
7. Step 7: Page Setup
   Open up your “starwars.html” with Chrome.
8. Step 8: Screen Setup
   Create a split screen (half Notepad++/half Chrome) and make sure yours looks like the image above.
9. You have the rest of the class period to mess around with and experiment with the HTML and CSS of this code. The more time you spend trying things out, the more interesting your design will be.