先來了解 CSS animate的八大屬性,W3C school可以玩玩
http://www.w3school.com.cn/cssref/pr_animation.asp
animation: move 20s linear 0s infinite; -webkit-animation: move 20s linear 0s infinite; -o-animation: move 20s linear 0s infinite; -moz-animation : move 20s linear 0s infinite; -ms-animation : move 20s linear 0s infinite; /*---------名稱 / 動畫執行時間 / 速率 / 延遲幾秒 / 播放次數或循環---------*/ 支援度 : IE 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。 PS:IE 9 以及更早的版本不支持 animation 属性。 @keyframes 像是flash的關鍵影格,定義哪時要做哪些變化效果 http://www.w3school.com.cn/cssref/pr_keyframes.asp 定義move 要做啥動作 / 幫move 做關鍵影格 @keyframes move { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } 這邊的move就是剛剛上面 "animation: move 20s linear 0s infinite;" 的move--(繞口令) @keyframes是動作指令, 那誰要做這些動作就看哪些物件的css animation有提到啦 可以聽聽喜歡忍者的老外講解keyframes,順便練英聽 ( 默默打開字幕 )
@keyframes move {
from{ transform : translateX(0) } /*-----0% 的意思---------*/ to{ transform : translateX(500px) } /*-----100% 的意思---------*/ }
0 評論
發表回覆。 |