Love is work and so is css

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.

Animating in CSS: @keyframes / transition

There 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

Danger

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.