Comma Separated WebKit Animation Keyframes

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Another little thing I learned from Estelle at the SXSW 2011 CSS3: Beyond The Basics panel was that you can comma separate the keyframe values in a WebKit animation declaration. Let’s say you wanted to create a pulsing effect as an animation. One way to do that would be to have an animation which changes the opacity on 0% and 100% and then set the iteration-count to have it run a couple of times. But you can accomplish the same thing by making the pulsate animation have multiple value along a single iteration, like this:

@-webkit-keyframes pulsate {
        0%, 50%, 100% {
                opacity: 1;
        }
        25%, 75%  {
                opacity: 0.75;
        }
}

Arguably less flexible, since changing the iteration-count is pretty trivially easy, although if you literally have an animation named “pulsate” like I have above, I might argue it’s more semantically named to do it this way.

I’ve updated the WebKit Keyframe Animation Syntax snippet page to reflect this, and be much more complete in general.