css3 使用animation實現動畫效果

標籤：key   tran   top   ack   class   通過   mat   ram   latex   

  .rotation {            -webkit-animation-name: rotation;            -webkit-animation-duration: 30s;            -moz-animation-name: rotation;            -moz-animation-duration: 30s;        }#sun {    background: url("http://img.mukewang.com/55ade004000106c202010201.png") no-repeat;    position: absolute;    z-index: 1;    top: -30px;    height: 201px;    width: 201px;    right: 40%;}  @-webkit-keyframes rotation {        0% {    transform: translateX(0) translateY(0);        }100% {    transform: translateX(-2000px) translateY(400px);}            /*？*/        }                @-moz-keyframes rotation {            /*？*/            0% {    transform: translateX(0) translateY(0);}100% {    transform: translateX(-2000px) translateY(400px);}        }

　　

animation-name:是動畫幀的設定 通過關鍵字keyframes 進行設定

duration設定動畫完成的時間
本例中有一個div ID sum 顯示一個太陽落山的效果

css3 使用animation實現動畫效果