I love css. And well, to love something, it is not always rainbows 🌈 and sunshine ☀️
To love something...takes effort and work. And well, css sure is making me work.
@keyframes / transitionThere a different ways to do animations on the web css and js being the most common. Ideally, we'd ues the built in functionality of css. There are two major forms of this in @keyframes and the transition property.
Google these for greater detail but the idea is that @keyframes with the animation properties are explicit where the transition is more implicit.
So I made this cool little animation with @keyframes. Nice. And than I wanted to stop the animation after a tap. Still good.
But...
Than I wanted to use transitions to animate after that.
Play looping animation changing div height
User taps: Stop animation and set div height to final value
Transition will animate to final div height 😭 fail
Turns out moving directly from a keyframe animation to a transition doesn't work. It will just jump to the end. This I think is expected but was more than a bit of a bummer because it meant that I'd likely need a js animation library to do what I wanted when I REALLY just wanted to use basic css.
Sad days.
I'l leave you with this doodle.