CSS3簡單的動畫

標籤：style   blog   color   io   for   sp   div   c   on   

果子狸有毒

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

CSS3簡單的動畫