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.

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