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. ✨ CSS animations in React Wendy Kong Software Developer, Pulsifi

  2. How to use CSS animation properties CSS animations React Add

    animations to React components
  3. When do we need animations?

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

    cat by domaso https://dribbble.com/shots/3197970-Loading-cat
  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
  6. Twitter’s Like button User: Whee!

  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
  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
  9. DEMO vs Transition Animation

  10. People taking CSS animations to the next level

  11. Alex the CSS Husky by David Khourshid (davidkpiano) https://codepen.io/davidkpiano/pen/wMqXea (works

    in Chrome)
  12. https://codepen.io/ste-vg/pen/oKYjKV Clip Clop Clippity Clop by Steve Gardner (steevg)

  13. animation: descend 5s infinite;

  14. animation-name: descend; animation-duration: 5s; animation-iteration-count: infinite;

  15. Let’s use ALL THE PROPERTIES

  16. animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

  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
  18. Cubic Bezier https://cubic-bezier.com

  19. Animating the clinic guys A two part story

  20. Chapter 1 Jaded by sassy pugs

  21. Chapter 2 An emotional reaction

  22. Some considerations

  23. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties 163 animatable properties Gotta animate them all….?

  24. https://developer.mozilla.org/en-US/docs/Learn/Performance/Animation_performance_and_frame_rate https://csstriggers.com

  25. https://doraemon-css-perf.netlify.com I just want to relax ~

  26. Browser support

  27. Thank you Go forth and make cool stuff @wendko