CSS3简单的动画

时间：2014-10-05 21:56:49 收藏：0 阅读：334

果子狸有毒

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

<div class="demo">果子狸有毒</div>

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