CSS3 Basic Animation

September 15, 2011

View Demo
Download

Hi guys, in this article we will discuss in general by doing examples with CSS Animation. The animation property is not supported in any browser, Firefox supports with the -moz-animation property, also Safari and Chrome support the CSS Animation, with the prefix -webkit-animation.

CSS Animation Properties

The animation property is composed by six properties animation, remember to specify animation-duration property, otherwise the duration is 0, the animation can not start.
For more details about the animation properties visit here.

Syntax

animation: name duration timing-function delay iteration-count direction;

@keyframes Rule

To make an animation we need to use @keyframes rule. The @keyframes rule is not supported in any browser, in the Firefox we use the prefix @-moz-keyframes, otherwise in Safari and Chrome we use the prefix @-webkit-keyframes.

The animation is done by changing the set of CSS styles, during the animation you can change the CSS styles several times, remember to specify the change in percent, or the keywords “from” and “to”, for the best result, you should always define both the 0% and the 100% selectors.

0% represents the beginning of the animation, 100% represents the end of animation.

Syntax

@keyframes { animationname keyframes-selector {css-styles;} }

Example Animation

Let’s create a simple animation of a ball that bounces off the walls up to original position. To view the sample animations, you’ll need the latest version of Firefox, Chrome or Safari. Safari provides the best viewing experience of CSS animation.

HTML

<div class="container">
<div class="box">
<div class="ball"></div>
</div>
</div>

CSS

.container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.box {
    width: 960px;
    background: #fff;
    height: 300px;
}

.ball {
    width: 50px;
    height: 50px;
    background: #00c6ff;
    border-radius: 50px;
    position: relative;
    -moz-animation: mymove 3s linear 2 alternate;
    -webkit-animation: mymove 3s linear 2 alternate;
}

@-moz-keyframes mymove /* Firefox */ {
    0% {
        -moz-transform: translate(0px,0px);
    }

    10% {
        -moz-transform: translate(150px,250px);
    }

    20% {
        -moz-transform: translate(450px,0px);
    }

    30% {
        -moz-transform: translate(700px,250px);
    }

    40% {
        -moz-transform: translate(910px,75px);
    }

    50% {
        -moz-transform: translate(800px,0px);
    }

    60% {
        -moz-transform: translate(500px,250px);
    }

    70% {
        -moz-transform: translate(400px,0px);
    }

    80% {
        -moz-transform: translate(300px,250px);
    }

    90% {
        -moz-transform: translate(150px,0px);
    }

    95% {
        -moz-transform: translate(100px,250px);
    }

    100% {
        -moz-transform: translate(0px,0px);
    };
}

@-webkit-keyframes mymove /* Safari & Chrome */ {
    0% {
        -webkit-transform: translate(0px,0px);
    }

    10% {
        -webkit-transform: translate(150px,250px);
    }

    20% {
        -webkit-transform: translate(450px,0px);
    }

    30% {
        -webkit-transform: translate(700px,250px);
    }

    40% {
        -webkit-transform: translate(910px,75px);
    }

    50% {
        -webkit-transform: translate(800px,0px);
    }

    60% {
        -webkit-transform: translate(500px,250px);
    }

    70% {
        -webkit-transform: translate(400px,0px);
    }

    80% {
        -webkit-transform: translate(300px,250px);
    }

    90% {
        -webkit-transform: translate(150px,0px);
    }

    95% {
        -webkit-transform: translate(100px,250px);
    }

    100% {
        -webkit-transform: translate(0px,0px);
    };
}

Conclusion

Finally, we created a simple animation using only CSS properties. In this example i have used the translate property, which is ideal for animation.

But remember you can use different CSS properties for when it concerns the animations, visit here for more details.

Share On