Workshop on CSS animation

This workshop asks you to brainstorm animations that you might add to your website, choose one, and try it out in a separate webpage and style sheet.

Setup

1. Create a repository by following the link on Moodle.

2. Create an empty index.html and a CSS file to go with it.

3. Publish the site with GitHub Pages.

4. Clone it to your computer and open it in your code editor.

Brainstorm animations

5. Make a list of ideas for possible animations you could add to your fictional website. Try to get to 10 if you can. Include this list in the index.html file.

Make a prototype

6. Choose one of the ideas and try it out. Write enough HTML to form a base for the animation, and add CSS to see if you can create a prototype of the animation.

Requirements checklist

If you have already completed 5 homeworks, you do not need to turn this in for credit.

Here are the minimum requirements for credit when you turn this workshop in as homework.

• The site is published via GitHub Pages.
• When you go to the site URL, the index.html page loads, and it has the required elements in the right place, like head, body, etc.
• The index.html includes a list of animation ideas.
• There is a prototype animation that uses CSS from the transition-* and/or animation-* property groups.
• If the user has turned on reduced motion on their operating system, no motion or only very small motion occurs, and all motion contributes to usability.