JavaScript-Free (CSS3) Animation

CSS Animation @keyframes rules

The design/development process starts by defining and naming an animation, then assigning that animation to an HTML element along with animation properties for things like duration, delay, and iterations, among other things.

Animations are launched when a display: none element is set to anything other than none or when a CSS selector is assigned to the element (using, say, a JavaScript click event). Animations end when the duration runs out, the iterations have all run, the "fill mode" is completed, or when the element is set to display: none.

Keyframes are defined using a special @keyframes rule that acts as a container for other animation rules. If you have worked with CSS "media queries" you are familiar with the construct: a CSS rule containing what appear to be CSS selectors (they're actually considered "keywords" here, not selectors), each containing a set of CSS attributes in its own set of curly braces. The format of @keyframes rules is something like this:


    @keyframes your-animation-name {

        from {
            css-attribute1: starting-value;
            css-attribute2: starting-value;
            css-attribute3: starting-value;
        }

        to {
            css-attribute1: ending-value;
            css-attribute2: ending-value;
            css-attribute3: ending-value;
        }

    }

NOTE: Remember what I said about prefixes? They apply to the @keyframes rule as well as CSS attributes. So, for example, @keyframes becomes @-webkit-keyframes for browsers that require -webkit- prefix. Don't forget!

In addition to the from and to keywords, you can specify percentages to represent state at any point of an animation. Percentages start at 0% and end at 100%:


    @keyframes your-animation-name {

        0% {
            css-attribute1: starting-value;
            css-attribute2: starting-value;
        }

        70% {
            css-attribute1: some-midpoint-value;
            css-attribute2: some-midpoint-value;
        }

        100% {
            css-attribute1: ending-value;
            css-attribute2: ending-value;
        }

    }

This gives you granular control over the timing of the animation and is completely independent of the animation's duration. If you have an animation that's five seconds long or 60 seconds long, the CSS attributes listed above at the 70% keyword will be applied. Note that 0% and from are the same, as is 100% and to.

A combination of from/to and percentage keywords is allowed:


    @keyframes your-animation-name {

        from {
            css-attribute1: starting-value;
            css-attribute2: starting-value;
        }

        70% {
            css-attribute1: some-midpoint-value;
            css-attribute2: some-midpoint-value;
        }

        to {
            css-attribute1: ending-value;
            css-attribute2: ending-value;
        }

    }

If no 0% or from keyword is specified, the "keyframe" will be automatically generated from the state of the element at the time the animation begins.

Note that @keyframes rules do not cascade. Only one @keyframes rule of a given name will be applied.

Now that some animations for CSS attributes are defined, it's time to see how to apply animations.