Grow your CSS skills. Land your dream job.

Comma Separated WebKit Animation Keyframes

Published by Chris Coyier

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

  1. Permalink to comment#

    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!

  2. 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 =)

  3. Permalink to comment#

    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.

  4. Permalink to comment#

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

  5. Permalink to comment#

    very nice tips….

  6. sahara
    Permalink to comment#

    very nice information! Thanks! :)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".