Crafting pure CSS animations with Easing Time
Easing Time: https://easing-time.mateuszjs.com
Final product of the tutorial: https://codepen.io/mateuszJS/full/Eag...
Here are couple of other animations created with Easing Time:
https://codepen.io/mateuszJS/full/vEX...
https://codepen.io/mateuszJS/full/vEX...
https://codepen.io/mateuszJS/full/qEa...
Feel free to let me know what would be best next feature to add to this tool :)
0:00 Real example
0:47 Let's add some CSS
2:41 Easing Time - first look
5:27 Add CSS for X axis animation
6:43 Create animation base on existing curve
8:17 Final touch-ups
9:28 More complex animations
Bluesky: https://bsky.app/profile/mateuszjs.bs...
Github: https://github.com/mateuszJS
Codepen: https://codepen.io/mateuszJS
Mastodon: https://mastodon.social/@mateuszjs
X: https://x.com/MateWalendzik