CSS Click Chart

Keyframe Animations

Allows for the creation of complex animations that incorporate timing, delay, timing functions, multiple keyframes, and more.

Specification

CSS3 Animations on W3C

Example Code

.result-animations {
  animation-name: bounceball;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0;
  animation-play-state: running;
  animation-fill-mode: none;
}

@keyframes bounceball {

  from {
    bottom: 0;
  }

  to {
    bottom: 60px;
  }

}

Live Demonstration

No Flash, no JavaScript.

Browser Support

Can I Use css-animation? Data on support for the keyframe-animations feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles