CSS Animations and Transitions

Intro

Until recently, you had to use JavaScript to make any kind of animation on a webpage. Recently, CSS Animations and Transitions were released. They both allow you to create animations of some kind, but they have different purposes:

• CSS Animations allow you to animate between multiple CSS properties over a period of time. It allows for using easing functions, keyframed animations, and changing multiple properties at the same time. CSS Animations are powerful, and as such are slightly more complicated.
• CSS Transitions make it so you can animate a change between two values of a specific CSS property. Like CSS Animations, you can change the time of the transition and the easing function, but you have to specify every single property with it’s own transition duration and it doesn’t allow for keyframing values. It isn’t as flexible as CSS Animations, but it is incredibly simple and is especially useful for hover transitions and changing classes with JavaScript.

Animations and Transitions can greatly enrich the experience on your website for your user.

Suggested Learning

• CSS Transitions & Animations

Animations

• CSS Animation Guide
• CSS Animation Examples - Includes a pay-what-you-want email guide

Transitions

• Everything About CSS Transitions - Pay attention to the clipping section.
• Simple Transition Examples

Requirements

• Fork this Codepen
• Follow the instructions in the Codepen to create some transitions and animations. Be creative! Make something fun.
• Share a link to your Codepen on the #requirements Discord channel to show you have passed this requirement off.

Extra Learning

• CSS Easing Functions
• CSS Animation Tool
• High-Performance CSS Animations - Some properties are cheap to animate, some cost in performance. If you want your animations to be buttery-smooth, only animate these properties. This list is by no means complete. Feel free to add an issue or put in a pull request to update it.