History

Dym Sohin f132183c1d init		2023-10-06 23:12:53 +02:00
..
dist	init	2023-10-06 23:12:53 +02:00
src	init	2023-10-06 23:12:53 +02:00
README.markdown	init	2023-10-06 23:12:53 +02:00
license.txt	init	2023-10-06 23:12:53 +02:00

README.markdown

🚦Toggle animation with CSS & State Machines! Live collaborative coding with the @keyframers 2.32.0

_A Pen created at CodePen.io. Original URL: https://codepen.io/team/keyframers/pen/QWweedX.

State machines for a toggle? You bet! David Khourshid & Stephen Shaw recreate this perfect example of a state machine powered animation using CSS & JavaScript.

💡 Inspiration: https://dribbble.com/shots/9841408-Loading-switch-interaction
📺 Video: https://youtu.be/0Wx9QbRQYuI
💻 Code: https://codepen.io/team/keyframers/pen/QWweedX

Additional Resources:

Indeterminante Checkboxes https://css-tricks.com/indeterminate-checkboxes/

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

Like & subscribe on YouTube at https://youtube.com/keyframers
Buy web dev shirts, stickers & more at https://keyframe.rs/merch
Follow & tweet us at https://twitter.com/keyframers.
Support us on Patreon at https://patreon.com/keyframers

Topics covered:

State Machines
CSS Animation
Data Attributes