CSS - Animations Part 1

Instructors: Jess, Carmen, and Eda

Animations

Before this session, please:

• Read Animations and Accessibility: What Are CSS Animations, and How Do They Work? and take notes
• Read Animations and Accessibility: What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help? and take notes
• Try and complete all the steps from Build an Animated Ferris Wheel
• Complete Build a Moon Orbit solo over the next few days

During this session, we’ll:

• Review notes
• Review notes
• We’ll look at key steps and concepts from Build an Animated Ferris Wheel together to review
• We’ll look at Build a Moon Orbit together to understand what kinds of CSS animation you’ll need to review to complete this lab

After this session, please:

• Try to complete as many steps from Build a Flappy Penguin as possible before class. This workshop is Jess’ favorite and she hopes you’ll love it too.
• Complete Build a Personal Portfolio solo over the next few days. Even though this is a lab, we recommend you approach it like you would a certification. The work you do on this lab can be used as the basis of your own portfolio site to show off your skills!
• Read CSS Animations Review and take notes
• Complete CSS Animations Quiz solo to test your knowledge of CSS animations

Instructor notes

Animations and Accessibility: What Are CSS Animations, and How Do They Work?

A CSS animation essentially has two components:

• a @keyframes rule
• an animation property

The @keyframes rule defines what styles an element has at different stages of the animation.

For example, a @keyframes rule named slide-in to go from left to right can be defined like this:

1@keyframes slide-in {
2  0% {
3    transform: translateX(-100%);
4  }
5  100% {
6    transform: translateX(0);
7  }
8}

0% is the start of the animation, and 100% is the end. With transform property with the values for translateX, specifies the horizontal position of the element.

Once we defined the animation, we can actually apply it to the element:

1<div class="sliding-element">Hello!</div>

1.sliding-element {
2  animation: slide-in 2s ease-out infinite;
3}

The animation property is a shorthand for:

• animation-name (the name of the @keyframes rule)
• animation-duration (how long the animation takes to complete)
• animation-timing-function (how the animation progresses over time: ease, linear, ease-in-out, etc.)
• animation-delay (delay before the animation starts)
• animation-direction (whether the animation plays forwards, backwards, or alternate)
• animation-iteration-count (how many times the animation repeats)
• animation-fill-mode (how the element is styled before and after the animation)
• animation-play-state (the paused or running state of the animation)

Another example to change the background color of an element, with explicitly written properties:

1<div class="traffic-lights"></div>

 1.traffic-lights {
 2  width: 200px;
 3  height: 200px;
 4  padding: 1rem;
 5  border: 4px solid black;
 6  border-radius: 50%;
 7  animation-name: color-change;
 8  animation-duration: 5s;
 9  animation-timing-function: linear;
10  animation-delay: 1s;
11  animation-iteration-count: infinite;
12  animation-direction: alternate;
13}
14
15@keyframes color-change {
16  0% {
17    background-color: red;
18  }
19  50% {
20    background-color: orange;
21  }
22  100% {
23    background-color: limegreen;
24  }
25}

It looks like this:

We should, however, avoid overusing animations, as it can lead to performance and accessibility issues. While designing our websites, we should always provide options to reduce or disable animations.

Animations and Accessibility: What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help?

Using animations can create accessibility issues. For example, certain types of movement on screen can cause dizziness, nausea, and headaches for people with vestibular disorders or motion sensitivity.

It can also be distracting for people with cognitive disabilities and make it hard to focus on the content. Even more, rapid flashing and certain effects can trigger seizures in people with photosensitive epilepsy. A general rule is to avoid content that flashes more than three times per second.

A user can request minimal animations or motion effects at the system level in the settings of their device. To write CSS respecting this setting, we can use the prefers-reduced-motion media query:

1@media (prefers-reduced-motion: reduce) {
2  * {
3    animation-duration: 0.01ms !important;
4    animation-iteration-count: 1 !important;
5    transition-duration: 0.01ms !important;
6    scroll-behavior: auto !important;
7  }
8}

The example above minimizes the animations but doesn’t completely stop them. To do that, the animation can be set to none:

1.animated-element {
2  transition: transform 0.3s ease-in-out;
3}
4
5@media (prefers-reduced-motion: reduce) {
6  .animated-element {
7    transition: none;
8  }
9}

Build an Animated Ferris Wheel

We’ll take a look at this exercise that goes over some HTML and CSS animations!

Build a Moon Orbit

This fun exercise lets you create a simple animation of the Moon’s orbit around the Earth using HTML and CSS!