CSS3简单的动画

转载于 2014-10-05 20:32:00 发布 · 51 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fixbug/p/4007380.html

Fix Bug

<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>