CSS 動畫學習筆記 Animation篇

首先了解一下animation的基本用法，使用其需要給動畫指定乙個週期持續的時間，以及動畫效果的名稱。可以看一下demo

注釋：這是乙個給透明和背景色屬性設定的乙個動畫過渡效果

實現很簡單（具體看到**中的注釋）：

1 .block_wrap

9 /*動畫效果，opacity為效果標題，@keyframes必須要寫*/

10 @keyframes opacity

12 25%

13 50%

14 100%

15 }

除了**中的注釋，另外還需要說一下，opacity 中，從 0%—100%，這是我們給動畫指定的乙個持續週期，指定了到哪個程度，動畫就按照裡面的屬性進行展示，這個週期是必須的！上面是乙個很簡單的動畫，重新整理一次頁面即展示一次，如果想要重複地展示動畫效果呢？簡單，只需要新增乙個infinite關鍵字，可以指定迴圈次數，將 infinite 關鍵字換成數字即可。

1 /*新增infinite關鍵字，使其可重複*/

注釋：這是乙個重複展示的動畫效果

動畫預設在展示完後回到初始狀態，有時想讓動畫定格在最後狀態，可以使用animation-fill-mode屬性，該屬性有三個值

使用：

/*直接在後面新增即可*/

animation: 1s opacity forwards;

下面看一下backwards的效果：

注釋：backwards的效果，簡單動畫時，和none差不多

1 .block_wrap

9 /*動畫效果，opacity為效果標題，@keyframes必須要寫*/

10 @keyframes opacity

14 }

可以使用上面這段**，更換每個值看一下效果。2 animation: 1s 1s opacity linear infinite forwards normal;

分開寫也是可以的

1 /*動畫標題*/

2 animation-name: opacity;

3 /*動畫持續時間*/

4 animation-duration: 1s;

5 /*動畫狀態變化速度*/

6 animation-timing-function: linear;

7 /*動畫延遲（delay）時間*/

8 animation-delay: 1s;

9 /*動畫狀態設定*/

10 animation-fill-mode:forwards;

12 animation-direction: normal;

13 /*迴圈次數*/

14 animation-iteration-count: infinite;

在了解animation的過程中，發現在使用animation時，往往配合著@keyframes，個人理解為，它是乙個專屬於動畫的class，它用來定義動畫的各個狀態，下來了解一下它的寫法，上述所用到的寫法

1 @keyframes opacity

5 }

1 @keyframes opacity

3 25%

4 50%

5 100%

6 }

@keyframes opacity 
50%     
}

另外，需要注意的是，fromto，它們其實就是 0%-100%的縮寫

它有兩個值

這是乙個很有意思的屬性，如若編寫乙個很複雜的動畫，並且動畫持續時間特長，配合上這個屬性，我們相當於用css製作乙個小動畫片。看一下這個屬性的效果：

10 /*動畫效果，opacity為效果標題，@keyframes必須要寫*/

11 @keyframes opacity

13 50%

14 }

15 /*當滑鼠放上來時，動畫才會進行*/

16 .block_wrap:hover

以上就是關於css animation的內容了，相信這篇文章的內容能夠滿足到大部分的動畫需求了。

另外，使用的時候，需要注意一些東西，那就是瀏覽器的相容問題。有些瀏覽器並不能夠很好相容，所以在使用時，寫法上要是這樣的

-ms-animation @-ms-keyframes /* ie 9 */

-moz- /* firefox */

-webkit- /* safari 和 chrome */

-o- /* opera */

CSS 動畫學習筆記 Animation篇

ReactNative動畫之Animated初識篇

css3的動畫特效之動畫序列（animation）

玩轉Jquery中的動畫效果 animate方法

CSS 動畫學習筆記 Animation篇

ReactNative動畫之Animated初識篇

css3的動畫特效之動畫序列（animation）

玩轉Jquery中的動畫效果 animate方法

相關推薦