Creating CSS animations in React

A5ff2e94b72a105555575b0a8e25836f?s=47 Wendy Kong
September 26, 2019

Creating CSS animations in React

CSS animations (when used correctly) can add life to your website and engage users. In this talk we will explore a simple animation built on pure CSS and HTML, and how to make the code cleaner and more extensible using React and Emotion.


Wendy Kong

September 26, 2019


  1. 4.

    User: What’s happening? User: ...oh ok, something is loading. Loading

    cat by domaso
  2. 5.

    User: What am I supposed to do? User: ...oh, I

    need to scroll down. Animated Scroll Indicator by Aaron C-T
  3. 7.

    CSS Animations is a module of CSS that lets you

    animate the values of CSS properties over time, using keyframes. -MDN docs
  4. 8.

    CSS Animations provide finer control over animated properties. CSS Transitions

    can trigger animations based on user actions. -MDN docs
  5. 17.

    Easing functions specify the rate of change of a parameter

    over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed.