CSS3 Click Chart | CSS3 Browser Support and Information

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 {
    -webkit-animation-name: bounceball;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: none;

    -moz-animation-name: bounceball;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: none;

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

@-webkit-keyframes bounceball {

    from {
        bottom: 0;
    }

    to {
        bottom: 60px;
    }

}

@-moz-keyframes bounceball {

    from {
        bottom: 0;
    }

    to {
        bottom: 60px;
    }

}

@keyframes bounceball {

    from {
        bottom: 0;
    }

    to {
        bottom: 60px;
    }

}

Live Demonstration

No Flash, no JavaScript.

Desktop Browser Support

Standard Syntax:
IE10+, Firefox 16+, Opera 12.1+

Vendor Prefix:
Chrome 4+, Safari 4+, Firefox 5+, IE10+, Opera 12+

Tools / Polyfills

Animation Fill Code
Sencha Animator
Westciv Animation Generator
Stylie CSS Animation Tool

Tutorials / Articles

An Introduction To CSS3 Keyframe Animations
Screencast: Intro to CSS Animations