my messy animation experiments ⚡
ok so this is where i mess around with css animations lol. some of these actually work, some are kinda broken but i'm keeping them anyway because i spent way too much time on them
weird morphing thing
this uses clip-path which is honestly confusing as hell. spent like 3 hours trying to figure out the coordinates and still don't really get it but hey it works! copied most of it from codepen tbh
Glowing Pulse
Combines brightness, blur, and drop-shadow filters to create a pulsing glow effect. The filter property is so cool - you can stack multiple effects!
Spinning Orbit
A small circle that orbits around an invisible center while rotating and changing colors. Used multiple transforms in sequence - this one hurt my brain but looks so cool!
Bouncing Scale
Bounces up and down while scaling and changing border-radius. The timing function makes it feel really bouncy - learned about easing from YouTube tutorials!
About These Animations 🤓
These animations are all pure CSS - no JavaScript needed! I learned most of these techniques from various online tutorials, Stack Overflow answers, and lots of trial and error. The hardest part was understanding how keyframes work and getting the timing right.
My favorite discovery was the clip-path property - you can create some really wild shapes and morphing effects with it. The coordinate system took me a while to understand, but now I'm obsessed with creating new shapes!