CSS3简单的动画

<style>
.demo{
        width:80px;
        height:80px;
        text-align:center;
        line-height:80px;
        background:#f80;
        border:3px solid #eee;
        color:#fff;
        -webkit-animation: animate 3s .5s ease infinite alternate;
        -moz-animation: animate 3s .5s ease infinite alternate;
    }
@-webkit-keyframes animate{
        from {
            background:#f00;
            -webkit-transform:translate(0px) rotate(0deg);
            }
        to {
            background:#33C;
            -webkit-transform:translate(200px) rotate(360deg);
            }
    }
@-moz-keyframes animate{
        from {
            background:#f00;
            -moz-transform:translate(0px) rotate(0deg);
            }
        to {
            background:#33C;
            -moz-transform:translate(200px) rotate(360deg);
            }
    }        
</style>