Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating CSS animations in React

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

More Decks by Wendy Kong

Other Decks in Technology


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

    cat by domaso https://dribbble.com/shots/3197970-Loading-cat
  2. 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. 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. 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. 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