Archive for the ‘keyframes’ Category

Animate to Different End States Using One Set of CSS Keyframes

Posted on: No Comments
I have recently live coded a pure CSS random rainbow particle explosion. There's a source in the middle of the screen, and rainbow particles shoot out with different speeds at different moments and then fade out. It might seem like the kind of thing th...

Swapping State with CSS Keyframes

Posted on: No Comments
Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop. No tweening between the state, just a straight swap. I was wondering how to go about this other day, and Sarah Drasner showed me that you can use r...

CSS Keyframe Animation with Delay Between Iterations

Posted on: No Comments
Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it's not-so-straightforward, but doable. You need to fake it. Nope There is an animation-delay property, but tha...