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.

A5ff2e94b72a105555575b0a8e25836f?s=128

Wendy Kong

September 26, 2019
Tweet

Transcript

  1. 4.

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

    cat by domaso https://dribbble.com/shots/3197970-Loading-cat
  2. 5.

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

    need to scroll down. Animated Scroll Indicator by Aaron C-T https://dribbble.com/shots/2292846
  3. 7.

    CSS Animations is a module of CSS that lets you

    animate the values of CSS properties over time, using keyframes. -MDN docs https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations
  4. 8.

    CSS Animations provide finer control over animated properties. CSS Transitions

    can trigger animations based on user actions. -MDN docs https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions
  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. https://easings.net/en