CSS Keyframe Animation Syntax

keyframe.css

/* 
    References: 
    http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
    https://developer.mozilla.org/en/css/css_animations

    Compatible with Firefox 5+, IE 10+, Chrome 6+, Safari 5+
*/

/* Declaration (add appropriate browser prefix accordinginly) */
@-webkit-keyframes animation-name {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@moz-keyframes animation-name {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes animation-name {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

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

/* Usage */
#box {
    -webkit-animation: animation-name 5s infinite;
    -moz-animation:    animation-name 5s infinite;
    -ms-animation:     animation-name 5s infinite;
    animation:         animation-name 5s infinite;
}


/* Example */
@keyframes growfont {
    0%, 100% {
        font-size: 10px;
    }
    
    50% {
        font-size: 12px;
    }
}

/* 
    animation:  
        [ <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]
        [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

*/

#box-infinite { animation: growfont 2s infinite; }
#box-infinite { animation: growfont 1s 2s alternate backwards; }

/*
    animation-properties:
    direction: normal, alternate, (reverse, alternate-reverse - these two are not supported in Chrome)
        - normal:
            The animation should play forward each cycle.
            In other words, each time the animation cycles, the animation will reset to the beginning state and start over again.
            This is the default animation direction setting.
        - alternate: 
            The animation should reverse direction each cycle.
            When playing in reverse, the animation steps are performed backward.
            In addition, timing functions are also reversed; for example, 
            an ease-in animation is replaced with an ease-out animation when played in reverse.
    delay: Xs, Xms
    duration: Xs, Xms
    fill-mode: forwards, backwards, both, none
    iteration-count: X
    timing-function: ease, 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)
*/
#box {
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 2s;
}

/* Combine transform, other css properties and animation */
@keyframes slidein-spinning {
    from {
        margin-left: 100%;
        width: 300%;
        -webkit-transform: rotate(0deg);
    }

    to {
        margin-left: 0%;
        width: 100%;
        -webkit-transform: rotate(0deg);
    }

    75% {
        font-size: 300%;
    }
}

#box {
    animation-duration: 3s;
    animation-name: slidein-spinning;
}


/* Multiple animations */
.animate-me {
    animation: first-animation 2s infinite, second-animation 1s, third-animation 1s 2s alternate backwards;
}