July 7, 2014 / IST / Tips & Tricks, Web Development.

css3animation-banner

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints along the way.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

  1. They’re easy to use for simple animations; you can create them without even having to know JavaScript.
  2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
  3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible.

When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector (element) by specifying at least these two properties:

  •  the name of the animation
  •  the duration of the animation

Basic Declaration & Usage

@-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+ */
}

For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above

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-functionease, 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 & delayXs or Xms
duration-countX
fill-modeforwards, backwards, both, none
animation-directionnormal, 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.

-webkit-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.

Browser Support

The numbers in the table specifies the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Property Internet ExplorerChromeFirefoxSafariOpera
@keyframes10.04.0 -webkit-16.0
5.0 -moz-
4.0 -webkit-15.0 -webkit-
12.1
12.0 -o-
animation10.04.0 -webkit-16.0
5.0 -moz-
4.0 -webkit-15.0 -webkit-
12.1
12.0 -o-

Simple Example:

#box-animation {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}