Grow your CSS skills. Land your dream job.

animation

Last updated on:

The animation property is used to call and control an @keyframe animation. Like this:

.element-to-animate {
  animation: NAME-YOUR-ANIMATION 5s infinite;
}

Which refers to a keyframe like this:

@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

You'll need vendor prefixes to get good browser support:

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite;
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite;
  animation:         NAME-YOUR-ANIMATION 5s infinite;
}

At the time of this writing the three vendor prefixes used above are the only ones implemented. At this point it's likely that the non-prefixed version will start to get implemented soon without major changes, so you may want to consider using non-prefixed versions as well.

For the sake of brevity the rest of the code on this page will omit prefixes, but real world usage should use all the vendor prefixes.

Multiple steps

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
  animation: fontbulger 2s infinite;
}

If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate.

Calling keyframe animation with separate properties

#box {
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: 10;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
timing-function ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
duration & delay Xs or Xms
duration-count X
fill-mode forwards, backwards, both, none
animation-direction normal, alternate

Animation Shorthand

Just space-separate all the individual values. The order doesn't matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.

animation: test 1s 2s 3 alternate backwards

Combine transform and animation

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Multiple animations

You can comma-separate the values to declare multiple animations on a selector.

.animate-this {
   animation: 
     first-animation 2s infinite, 
     another-animation 1s;
}

More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
6+ 5+ 5+ 12+ 10+ TBD 4+

Comments

  1. Permalink to comment#

    THIS IS SO COOL THANKS

  2. Dan
    Permalink to comment#

    Nice

  3. Permalink to comment#

    Thank you for this explanation. Great Almanac!

  4. egasimus

    Hey,

    as far as I know, Opera has also implemented animations using the -o- -prefix. Maybe this calls for an update?

    Also, using the -webkit- prefix in your examples could possibly promote the bad practice of using -webkit- only. Maybe such examples need to be changed to the prefix-free version instead?

    Best regards,
    Adam Avramov

  5. Anonymouse
    Permalink to comment#

    Is there an example we can see in action?

  6. Permalink to comment#

    They are definitely great and better than other tutorials! Thanks, Chris!

  7. Lukas
    Permalink to comment#

    Hi Chris,
    I’m not sure if you’re aware, but @-ms-keyframes has never existed. IE10+ supports the @keyframes property, and < IE9 doesn’t support animation at all.

  8. Permalink to comment#

    hello sir,
    I want to run animation form{left:0}to{left:75px} then i want to stop my content at place left:75px; permanently until i move my mouse out. Is this possible???if yes then how?????? Please help

  9. I was wondering if there is other options instead of ‘alternate’. Please help!

    Alex Safayan

Leave a Comment

Current day month ye@r *

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