Exercise: CSS Animation
Instructions
Create a new glitch website. In this new website, you will have a link to 5 index.html pages, each animating one of the following CSS properties:
- Background-color
- Scale
- Shape
- left, right, top, or bottom (position on the webpage)
- Any other CSS property or combination (see “Animatable Properties” below)
Resources
References
- CSS Shapes
- Animation (CSS-Tricks.com)
- Animation (W3 Schools)
- Keyframes in CSS Animation (if you want to use more than two values)
- Multi-Step Animation
- Animatable Properties
- Vendor Prefix (makes CSS friendly to many different browsers)
- Auto Prefixer