animation-name 動畫名稱，可以有多個值，用逗號隔開，表示綁定了多個動畫 animation-name屬性為動畫指定一個名稱 animation-name相容主流的瀏覽器，不過還是需要加首碼去相容 animation-name有兩個屬性值，分別是keyframename和none <!D ...
animation-name 動畫名稱，可以有多個值，用逗號隔開，表示綁定了多個動畫
animation-name屬性為動畫指定一個名稱
animation-name相容主流的瀏覽器，不過還是需要加首碼去相容
animation-name有兩個屬性值，分別是keyframename和none
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } div{ width:800px; height:800px; margin:0 auto; } .container{ position: relative; } .inner, .middle, .outer, .pic{ position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; } .inner{ background:url(source/circle_inner.png) center no-repeat; animation-name:circle_inner; } .middle{ background:url(source/circle_middle.png) center no-repeat; animation-name:circle_middle; } .outer{ background:url(source/circle_outer.png) center no-repeat; animation-name:circle_outer; } .pic{ background:url(source/pic.png) center no-repeat; } </style> </head> <body> <div class="container"> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="pic"></div> </div> </body> </html>
animation-duration 動畫持續時間 預設是0
animation-timing-function 動畫時間函數
animation-delay 動畫延遲時間
animation-delay 屬性定義動畫什麼時候開始，單位可以是秒（s）或毫秒（ms），允許負值，-2s使動畫馬上開始，但會跳過2s進入動畫
animation-iteration-count 動畫迴圈次數
animation-iteration-count: number | infinite 預設為1
animation-direction: normal | reverse | alternate | alternate-reverse 正常； 反向； 正反交替； 反正交替
alternate 和 alternate-reverse ，如果animation-itreation-count 不是設置成 infinite ，則只會執行一次就停止
animation-fill-mode 動畫延遲未執行時，或者動畫執行完畢後的停留狀態（動畫不能設置為迴圈，否則無法停止）
animation-fill-mode: none | forwards | backwards | both 無 結束狀態 開始狀態 看情況
animation-play-state: running | paused 動畫運行狀態：運行 | 暫停
animation 簡寫
animation: name duration timing-function delay iteration-count direction fill-mode play-state
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } div{ width:800px; height:800px; margin:0 auto; } .container{ position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; } .inner, .middle, .outer, .pic{ position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; } .container:hover div{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -ms-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused; } .inner{ background:url(source/circle_inner.png) center no-repeat; /*迴圈*/ -webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running; -moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running; -ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running; -o-animation:circle_inner 10s ease-in-out 1s infinite alternate running; animation:circle_inner 10s ease-in-out 1s infinite alternate running; /*不迴圈，填充效果*/ /*-webkit-animation:circle_inner 10s ease-in-out 1s forwards running; -moz-animation:circle_inner 10s ease-in-out 1s forwards running; -ms-animation:circle_inner 10s ease-in-out 1s forwards running; -o-animation:circle_inner 10s ease-in-out 1s forwards running; animation:circle_inner 10s ease-in-out 1s forwards running;*/ } .middle{ background:url(source/circle_middle.png) center no-repeat; -webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running; -moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running; -ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running; -o-animation:circle_middle 10s ease-in-out 1s infinite alternate running; animation:circle_middle 10s ease-in-out 1s infinite alternate running; } .outer{ background:url(source/circle_outer.png) center no-repeat; -webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running; -moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running; -ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running; -o-animation:circle_outer 10s ease-in-out 1s infinite alternate running; animation:circle_outer 10s ease-in-out 1s infinite alternate running; } .pic{ background:url(source/pic.png) center no-repeat; } @keyframes circle_inner{ 0%{ transform:rotateX(0deg); } 50%{ transform:rotateX(90deg); } 100%{ transform:rotateX(360deg); } } @keyframes circle_middle{ 0%{ transform:rotateY(0deg); } 50%{ transform:rotateY(90deg); } 100%{ transform:rotateY(360deg); } } @keyframes circle_outer{ 0%{ transform:rotateZ(0deg); } 50%{ transform:rotateZ(90deg); } 100%{ transform:rotateZ(360deg); } } </style> </head> <body> <div class="container"> <div class="inner"></div> <div class="middle"></div> <div class="outer"></div> <div class="pic"></div> </div> </body> </html>
動畫性能優化：
用position-fixed代替background-attachment
帶圖片的元素放在偽元素中
will-change
相容性IE13+ 感覺可以放棄了……
向下提示箭頭效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } div{ width:30px; height:30px; position: fixed; left:0; right:0; bottom:100px; margin:0 auto; cursor:pointer; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -webkit-animation:upDown 2s ease-in-out infinite; -moz-animation:upDown 2s ease-in-out infinite; -ms-animation:upDown 2s ease-in-out infinite; -o-animation:upDown 2s ease-in-out infinite; animation:upDown 2s ease-in-out infinite; } @-webkit-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @-moz-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @-ms-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @-o-keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } @keyframes upDown{ 0%{ bottom:100px; } 50%{ bottom:80px; } 100%{ bottom:100px; } } </style> </head> <body> <div>></div> </body> </html>
