Intro to CSS Animations

   Hello world! 👋

Noel Cothren 👾 @noeldevelops 👾 noelcothren@gmail.com

https://github.com/noeldevelops/css-animations-slides

Why CSS? ❓

1. Simple, yet powerful.

All the CSS ever written: 


                    selector {
                        property: value;
                    }
CSS Zen Garden
Resilient Web Design

2. Performance

CSS Animations are offloaded to GPU, so keep things off the main thread (Web Animations API does mimic this).

"Modern browsers can animate four things really cheaply: position, scale, rotation and opacity."

3. Principle of Least Power

Q: Why Animate? 🕺

A: Better UX.

  • It's a communication aid.
  • Users expect it.
  • It builds your brand and your site's personality.
"Animating the Moments" by DevTips
"Animated user interfaces can be powerful — so powerful that they offer a competitive advantage to their products, regardless of platform." Rachel Nabors

Easy, lazy animations

Go from point A to point B using transitions & leverage browser's 🧠 to figure out the in-betweens.

Syntax: 

 transition: [property][duration][delay][easing] ... ;

We'll attach the change to a change in the element's state. Here's an example:

Hover Me 
 
        a.example-link { color: aquamarine; }
        a.example-link:hover { color: orangered; }

Ease-y upgrade: customize the timing function using dev tools or a site like cubic-bezier.com or easings.net

Make it Hot with Pseudo Elements

Now we're cookin' with gas 🔥

Hot Button 💣

Hey - don't put important content in a pseudo element! It's not real, it's pseudo.

Syntax ( two colons is modern :: ) 


.button:hover::before {targets before pseudo element on hover}
.item:hover .info {targets element with .info class when you hover on .item}

Keyframes for Complex Animations 🗝

MDN Web Docs 
                    
    .animated {
        animation-name: bounce; /* from your keyframes */
        animation-duration: 4s; /* s or ms */
        animation-iteration-count: 10; /* infinite is an option */
        animation-direction: alternate; /* or normal */
        animation-timing-function: ease-in-out; /* remember cubic-beziers? */
        animation-fill-mode: forwards; /* or backwards, both, none */
        animation-delay: 2s; /* or ms */
    }

    .animated {   
        animation: duration | timing-function | delay | 
        iteration-count | direction | fill-mode | 
        play-state | name;
    }

A Few UI Animation Best Practices 🏆

  1. Don't abuse your animation powers - only write animations that are necessary and useful to our users
  2. Don't conflict with users expectations (e.g. a banking form that "bounces" will be distrusted)
  3. "Performance and accessibility goals affect all aspects of our design work, and animation is no exception there." Val Head for Smashing Magazine
    • Avoid animating properties that will trigger layout or paints.
    • Make sure your animations aren't disturbing users with vestibular disorders or low motion preferences. "Prefers reduced motion" media query in Chrome 74

Resources 📚