影片：影片同過渡有些相似，格式如下
div{ animation:myfirst 5s; /*影片名 持續時間*/ -webkit-animation:myfirst 5s; /*Safari 與 Chrome*/ } @keyframes myfirst /*影片效果*/ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 與 Chrome */ { from {background: red;} to {background: yellow;} }
多屬性影片
@keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari 與 Chrome */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
無線回圈影片
div{ animation: myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/95286.html
標籤：Html/Css
上一篇：CSS3 過渡
下一篇：CSS3 2D轉換