Keyframe CSS Animation

Basic Declaration & Usage👽

@keyframes name-of-animation {
  0%    { opacity: 0; }
  20%   { opacity: 1; }
  80%   { opacity: 0; }
  100%  { opacity: 1; }
}

.animate-this-element {
  animation: name-of-animation 5s infinite;
}

You can use any number of “stops” in the @keyframe animation, and it’s one of the main strengths of keyframe animations. While CSS transition is only from one state to another, a keyframe animation can interpolate between many different states during its timeline.

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

Calling keyframe animation with separate properties😊💟

.box {
 animation-name: bounce;
 animation-duration: 4s; /* or: Xms */
 animation-iteration-count: 10;
 animation-direction: alternate; /* or: normal */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 2s; /* or: Xms */
}

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;
}

steps()

The steps() function controls exactly how many keyframes will render in the animation timeframe. Let’s say you declare:

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time.

.move {
  animation: move 10s steps(10) infinite alternate;
}

The math works out nicely there. Every one second, the element will move 10px to the left and 10px down, until the end of the animation, and then again in reverse forever.

This can be great for sprite-sheet animation like this demo by samurai.

Old Vendor Syntaxes☝💖

@-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; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}