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.
CSS animations in React
Software Developer, Pulsifi
How to use CSS animation properties
Add animations to React components
When do we need
User: What’s happening?
User: ...oh ok, something is loading.
Loading cat by domaso https://dribbble.com/shots/3197970-Loading-cat
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
Twitter’s Like button
CSS Animations is a module of CSS that
lets you animate the values of CSS
properties over time, using keyframes.
CSS Animations provide finer control over
CSS Transitions can trigger animations based on
to the next level
Alex the CSS Husky
by David Khourshid (davidkpiano)
https://codepen.io/davidkpiano/pen/wMqXea (works in Chrome)
Clip Clop Clippity Clop
by Steve Gardner (steevg)
animation: descend 5s infinite;
ALL THE PROPERTIES
specify the rate of change of a parameter
Objects in real life don’t just start and stop
instantly, and almost never move at a
Animating the clinic guys
A two part story
Jaded by sassy pugs
An emotional reaction
Gotta animate them all….?
Go forth and make cool stuff