Comma Separated WebKit Animation Keyframes

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.

Comments

Andre

# March 22, 2011

This is pretty cool, from what I gathered reading this post. The first set of percentage values tell your element to have an opacity of 1, while the second set tells your element to have an opacity of .75 over the course X amount of seconds via -webkit-animation…. Nice! I like it!

Aaron Stone

# March 22, 2011

Hey, this is actually more semantic when using it to mimic the on-and-off pulsating effect on buttons.

For example:

@-webkit-keyframes pulsate {
        0%, 50%, 100% {
                background-color: #82c7ff;
        }
        25%, 75%  {
                background-color: #49a7f3;
        }
}

#my-button {
  background-color: #49a7f3;
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  border: none;
  font-size: 22px;
  font-weight: bold;
}

#my-button:focus {
  -webkit-animation: pulsate 1s infinite;
}

If I’m wrong on any part, please feel free to correct me =)

redlex

# March 22, 2011

Thanks a lot for this very detailed article. I’ve just finished creating a new website using WordPress.http://colorfashion.co.cc/ I had to do quite a few hacks to make it perfect. This article will definitely help me for my next site.

Julian

# March 26, 2011

cool…
thanks to ‘@-webkit’ series :D

Avi

# March 31, 2011

very nice tips….

sahara

# April 3, 2011

very nice information! Thanks! :)

This comment thread is closed. If you have important information to share, please contact us.