CSS Animations For Frontend Engineers

CSS3 works in all modern browsers, desktop and mobile. It does not work in Microsoft browsers IE 9 and before.

CSS3 features animations, changes in element styles that morph from one value to another in a series of steps over time. Without JavaScript, animations begin when the page is loaded (after an optional delay, if you specify one).

Animation Demonstration

Animation
Demonstration

The Animated Div

The demo div, animation styles first: name and duration, top line. alternate means reverse directions, alternate iterations. linear is the timing function (default is ease).

#demo {
            animation: demo_anim 10s;
    -webkit-animation: demo_anim 10s;
            animation-direction: alternate;
    -webkit-animation-direction: alternate;
            animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
            animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    background: #fff8f0;
    border: #ffa0a0 ridge 5px;
    border-radius: 0 20px 0 50px;
    font-size: 12pt;
    height: 10%;
    left: 10%;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-align: center;
    top: 0px;
    white-space: nowrap;
    width: 25%;
}

The @Keyframes Rules

One plain, one for -webkit-. The only difference is the name of the rule (you copy the entire contents).

Start with 0% and end with 100%. Call these from and to if you prefer. Use as many intermediate frames as you like.

@keyframes demo_anim {
    0% { background-color: #fff8f0;
        border-color: #ffa0a0;
        left: 10%
        top: 0px;
        width: 25%;
        }
    10% { background-color: #dff8f0;
        border-color: #efa0b0;
        left: 50%;
        width: 25%; }
    20% { background-color: #bff8f0;
        border-color: #dfa0c0;
        left: 50%;
        width: 35%; }
    30% { background-color: #9ff8f0;
        border-color: #cfa0d0;
        left: 45%;
        width: 40%; }
    40% { background-color: #7ff8f0;
        border-color: #bfa0e0;
        left: 40%;
        width: 40%; }
    50% { background-color: #8ff8f0;
        border-color: #8fa0ff;
        left: 35%;
        width: 40%; }
    60% { background-color: #9ff8f0;
        border-color: #bfa0e0;
        left: 30%;
        width: 40%; }
    70% { background-color: #aff8f0;
        border-color: #cfa0d0;
        left: 25%;
        width: 30%; }
    80% { background-color: #cff8f0;
        border-color: #dfa0c0;
        left: 20%;
        top: -10px;
        width: 25%; }
    90% { background-color: #eff8f0;
        border-color: #efa0b0;
        left: 15%;
        top: 10px;
        width: 25%; }
    100% { background-color: #fff8f0;
        border-color: #ffa0a0;
        left: 10%;
        top: 0px;
        width: 25%; }
}

@-webkit-keyframes demo_anim {

	/* content same as above */

}

Feedback: MartinRinehart at gmail dot com

# # #