CSS的animation屬性使用實例講解

 　　一、animation的語法

　　1、@keyframes——插入關鍵幀

　　(1)FormTo形式：

　　CSS Code復制內容到剪貼板

　　@keyframes demo {

　　from {

　　Properties:Properties value;

　　}

　　Percentage {

　　Properties:Properties value;

　　}

　　to {

　　Properties:Properties value;

　　}

　　}

　　(2)百分比的形式：

　　CSS Code復制內容到剪貼板

　　@keyframes demo {

　　0% {

　　Properties:Properties value;

　　}

　　Percentage {

　　Properties:Properties value;

　　}

　　100% {

　　Properties:Properties value;

　　}

　　}

　　2、animation-name——定義動畫的名稱

　　animation-name: none | “動畫的名稱”;

　　(1)動畫的名稱是由Keyframes創建的動畫名，這裡必須和創建的動畫名保持一致。如果不一致,將不能實現任何動畫效果

　　(2)none為默認值，當值為none時，將沒有任何動畫效果

　　3、animation-duration

　　animation-duration: time (s)

　　animation-duration是指定元素播放動畫所持續的時間，取值為數值，單位為秒(s)，其默認值為“0”。

　　4、animation-timing-function

　　animation-timing-function:ease(緩沖) || ease-in(加速) || ease-out(減速) || ease-in-out(先加速後減速) || linear(勻速) || cubic-bezier(自定義一個時間曲線)

　　animation-timing-function是用來指定動畫的播放方式，具有以下六種變換方式：ease(緩沖);ease-in(加速);ease-out(減速);ease-in-out(先加速後減速);linear(勻速);cubic-bezier(自定義一個時間曲線)。

　　5、animation-delay

　　animation-delay: time(s)

　　animation-delay:是用來指定元素動畫開始時間。取值為數值，單位為秒(s)，其默認值為“0”。這個屬性和animation-duration使用方法是一樣的。

　　6、animation-iteration-count

　　animation-iteration-count:infinite || number

　　animation-iteration-count是指定元素播放動畫的循環次數，其取值為數字，默認值為“1”或者infinite(無限次數循環)。

　　7、animation-direction

　　animation-direction: normal || alternate

　　animation-direction是指定元素動畫播放的方向，如果是normal，那麼動畫的每次循環都是向前播放;如果是alternate，那麼動畫播放在第偶數次向前播放，第奇數次向反方向播放。

　　8、animation-play-state

　　animation-play-state:running || paused

　　animation-play-state主要是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused，其中running為默認值。這個屬性目前很少內核支持，所以只是稍微提一下。

　　二、animation事件接口

　　其實目前基本的就是三個事件而已：開始、迭代、結束。開始和結束都知道是什麼意思。至於這個迭代，由於animation中有個iteration-count屬性，它可以定義動畫重復的次數，因此動畫會有許多次開始和結束。但是真正的“開始”和“結束”事件是關於整個動畫的，他們只會觸發一次，而中間由於重復動畫引起的“結束並開始下一次”將觸發整個“迭代”事件。

　　這三個事件的標准名稱是：

　　開始：animationstart

　　迭代：animationiteration

　　結束：animationend

　　但是目前版本的Chrome需要加上webkit前綴，而且還要注意大小寫

　　開始：webkitAnimationStart

　　迭代：webkitAnimationIteration

　　結束：webkitAnimationEnd

　　最後是實例代碼和截圖

　CSS Code復制內容到剪貼板

1. <style>
2. @-webkit-keyframes test {
3. 0% {background:red;}
4. 25% {background:green;}
5. 50% {background:blue;}
6. 100% {background:red;}
7. }
8. @keyframes test {
9. 0% {background:red;}
10. 25% {background:green;}
11. 50% {background:blue;}
12. 100% {background:red;}
13. }
14. </style>
15. <script>
16. onload=function(){
17. var html=document.documentElement;
18. //定義事件回調函數
19. var start=function(){
20. console.log("start");
21. },iteration=function(e){
22. console.log(e);
23. },end=function(){
24. console.log("end");
25. };
26. //綁定事件
27. html.addEventListener("webkitAnimationIteration",iteration);
28. html.addEventListener("animationiteration",iteration);
29. html.addEventListener("webkitAnimationStart",start);
30. html.addEventListener("animationstart",start);
31. html.addEventListener("webkitAnimationEnd",end);
32. html.addEventListener("animationend",end);
33. //開始執行動畫
34. html.style.animation=
35. html.style.WebkitAnimation=
36. "test 1s linear 0s 3";
37. };
38. </script