css -- Animation 動畫 · 前端知識 -- 學習整理

>[success] # CSS Animation 1. **transition** 只能定義**開始狀態和結束狀態**，不能定義中間狀態，也就是說只有兩個狀態，舉個例子從200寬度到400寬度，不能先200在220在400 2. **transition**不能重復執行，除非一再觸發動畫 3. **transition**需要在特定狀態下會觸發才能執行，比如某個屬性被修改了想擺脫上面說的局限就可以使用**Animation**，它可以指定關鍵幀，即可以對動畫過程中指定多種效果 >[danger] ##### 使用可以指定關鍵幀因此需要配合**keyframes**定義動畫序列，然后在執行剛才配置的動畫、持續時間、動畫曲線、延遲、執行次數、方向等 * 定義了一個叫 `go` 的動畫效果，其中百分數含義是**0%表示動畫的第一時刻，100%表示動畫的最終時刻**，也可直接設置**from和to** 表示**from相當于0% to相當于100%** ~~~ @keyframes go { 0% { /*起始位置，等價于 form*/ transform: translate3d(0, 0, 0) ; } 25% { transform: translate3d(800px, 0, 0); } 50% { transform: translate3d(800px, 400px, 0); } 75% { transform: translate3d(0, 400px, 0); } 100% { transform: translate3d(0, 0, 0); /*100% 相當于結束位置 to*/ } } ~~~ * 定義完動畫執行定義的動畫使用**animation屬性** * **animation-name**：指定執行哪一個關鍵幀動畫 * **animation-duration**：指定動畫的持續時間 * **animation-timing-function**：指定動畫的變化曲線 * **animation-delay**：指定延遲執行的時間 * **animation-iteration-count**：指定動畫執行的次數，執行infinite表示無限動畫 * **animation-direction**：指定方向，常用值normal和reverse * **animation-fill-mode**：執行動畫最后保留哪一個值 * **none**：回到沒有執行動畫的位置 * **forwards**：動畫最后一幀的位置 * **backwards**：動畫第一幀的位置 * **animation-play-state**：指定動畫運行或者暫停（在JavaScript中使用，用于暫停動畫） * 綜合案例 ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; /*animation: go 2s ease 0s infinite alternate; 引用動畫*/ animation: go 2s infinite; /*引用動畫*/ /*animation:動畫名稱動畫時間運動曲線何時開始播放次數是否反方向;*/ /*動畫名稱是自己定義的 go google*/ /*infinite 無限循環*/ /*一般情況下，我們就用前2個 animation: go 2s*/ } /*@keyframes go {} 定義動畫*/ @keyframes go { 0% { /*起始位置，等價于 form*/ transform: translate3d(0, 0, 0) ; } 25% { transform: translate3d(800px, 0, 0); } 50% { transform: translate3d(800px, 400px, 0); } 75% { transform: translate3d(0, 400px, 0); } 100% { transform: translate3d(0, 0, 0); /*100% 相當于結束位置 to*/ } } /* 動畫結束之后會返回原來的位置！！！*/ </style> </head> <body> <div></div> </body> </html> ~~~