I added a fancy little animation to Caketop’s website. It is based on this snippet on CodePen:
Things I learned about CSS animation:
- When you specify multiple animations on an element, they all play at once. I expected them to play in sequence.
- You can’t use CSS variables to specify keyframe indices.
Those two things together seem to make it impossible to create a dynamic chain of animations purely in CSS. Instead, I had to resort to writing some TypeScript to generate my
@keyframes based on how many items I waned to animate. If you’d like, you can inspect the result of my efforts.
Other things I learned:
- CSS positioning is still very much an exercise in “throw shit at the browser until it does what you want” for me.
stringkeys, even if your
Recordkeys are typed as something else. Ugh.