我昨天寫三維正方體的時候,就用到了動畫的文法
今天就來系統複習一下
過渡transition有著它的局限性
雖然簡單,但是它只能在兩個狀態之間改變
並且它需要事件的驅動才能夠進行
不能夠自己運動
所以為瞭解決這樣的問題
我們需要animation動畫
動畫
若想實現動畫效果
僅僅有animation屬性是不夠的
我們還需要@keyframes規則
先來看一個例子
p class="demo"></p>
.demo { width: 100px; height: 100px; background-color: gold;}.demo:hover { animation: change 2s linear;}@keyframes change { 0% { background-color: red; } 50% { background-color: purple; } 100% { background-color: lime; }}
當滑鼠懸浮時,元素先變紅然後過渡到紫色有過渡到綠色
我們先來看看@keyframes 規則
keyframes
在@keyframes中,我們定義動畫主要畫面格
然後animation會按照keyframes主要畫面格裡我們指定的幀狀態進行過渡執行
0% - 100% 就代表動畫的時間過渡
規則中的0%和100%,
可以替換成from和to關鍵字
@keyframes xxx { from { ...... } to { ...... }}
如果我們省略了起始幀,瀏覽器會按照它最初的樣式進行過渡
@keyframes change { 100% { background-color: lime; }}
除此之外,我們還可以把相同的幀寫在一起像這樣
@keyframes change { from,to { background-color: red; } 50% { background-color: blue; }}
animation
animation是一個複合屬性,有以下子屬性
animation-name
指定keyframes動畫的名稱
animation-duration
指定動畫執行時間
animation-timing-function
指定動畫的速度曲線,預設“ease”緩動
animation-delay
指定動畫延遲時間,預設“0”無延遲
animation-iteration-count
指定動畫播放的次數,預設“1”執行1次
animation-direction
規定動畫執行方向,預設“normal”
這個複合屬性比我們的transition要複雜一些
前四個屬性就不多解釋了,類似於我們的transition
忘了的同學,戳這裡->傳送門
animation-iteration-count動畫播放次數我們除了填寫數字之外
還可以使用一個常用的關鍵字infinite無限迴圈
animation-direction除了normal以外還有如下屬性值
通過一個例子來解釋
.demo { width: 100px; height: 100px; background-color: gold;}.demo:hover { animation: change 1s 2 linear;}@keyframes change { to { width: 200px; }}
預設normal:
兩次測試動畫:
100px -> 200px
100px -> 200px
.demo:hover { animation: change 1s 2 linear reverse; /*改*/}
reverse:
兩次測試動畫:
200px -> 100px
200px -> 100px
.demo:hover { animation: change 1s 2 linear alternate; /*改*/}
alternate:
兩次測試動畫:
100px -> 200px
200px -> 100px
.demo:hover { animation: change 1s 2 linear alternate-reverse; /*改*/}
alternate-reverse:
兩次測試動畫:
200px -> 100px
100px -> 200px
animation-fill-mode
下面我要講的兩個屬性都不是animation的子屬性
所以不能寫在animation中
animation-fill-mode規定對象動畫時間之外的狀態,預設“none”
除了none以外還有如下屬性值
forwards
動畫完成後,保持最後一個屬性(定義在最後一幀)
backwards
在animation-delay指定時間內、動畫顯示之前,應用起始屬性(定義在第一幀)
both
應用forwards和backwards兩種模式
forwards
這個屬性還是蠻有用的
還是我們上面的例子
.demo:hover { animation: change 1s linear; /*改*/ animation-fill-mode: forwards; /*改*/}
我們發現1s之後,元素並沒有回到最初的100px,而是保持了我們最後一幀的200px狀態
backwards
理解這個屬性,我們需要先加一個延時
.demo:hover { animation: change 1s linear 1s; /*改*/ /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change { from { /*增*/ width: 150px; } to { width: 200px; }}
我就不配圖了
我們發現滑鼠懸浮後,1s後瞬間變為150px,然後再過渡到200px
hover-0s -> 1s -> 2s
100px ->瞬變150px –> 過渡到200px
現在增加backwards
.demo:hover { animation: change 1s linear 1s; /*改*/ animation-fill-mode: backwards; /*增*/}
這回我們發現滑鼠懸浮的一瞬間就變為15px,然後1s後過渡到200px
hover-0s -> 1s -> 2s
瞬變150px ->150px –> 過渡到200px
這就是backwards的作用,延遲前就應用第一幀動畫的樣式,然後準備過渡
animation-play-state
animation-play-state 指定動畫的運行或暫停。預設 “running”
除了running還有paused
利用這個屬性再配合js我們可以控制動畫的暫停和運行
demo.style.animationPlayState = "paused";
今天的動畫就先寫這麼多,感覺寫了很長時間
日後再總結動畫相關的效能問題