一、示例
<pre>
語法：
animation: name duration timing-function delay iteration-count direction;<br >
示例代碼：
div{
animation: scaleToSmall 3s ease 1s infinite normal;
}<br >
分開寫：
div{
animation-name: scaleToSmall; // 指名字，你自己來寫
animation-duration:3s; // 你所希望的，動畫執行一次耗費的時間
animation-timing-function:ease;// 以哪種方式動畫
animation-delay: 1s;// 延遲多少秒后執行
animation-iteration-count: infinite; // 動畫執行次數
animation-direction: normal; // 動畫執行方向(感覺不常用)
}
</pre>
二、animation屬性解析
1. animation-timing-function
規定了動畫的速度曲線
w3c 的解釋是:
2. animation-iteration-count
可以是n(即次數)，可以是infinite ([??nf?n?t] 無限的;[??t??re??n]循環)
w3c 的解釋是
3. animation-direction
是否應該要輪流反轉播放，IE9以及之前版本不支持這個屬性
w3c 的解釋是
4. @keyframes
執行上面 scaleToSmall 這個動畫
w3c 的解釋
寫兩個示例，便于理解
// 1. 勻速向下運動
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
// 2. 按階段變化
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
3. 一些重要的屬性
3.1 step() 階躍函數
animation-timing-function 中的還有一個 steps() 函數
這是一個階躍函數
示例 step(num,start)
第一個參數： number類型，必須是整數；
第二個參數：start、end；
<pre>@keyframes circle {
0% {background: red} ；
50%{background: yellow} ；
100% {background: blue} ；
}</pre>
如 step(5,start);
那么，動畫會在050%，階躍5次；50%100%，階躍5次；
step-start為start，動畫會以下一幀的顯示效果來填充間隔動畫，所以0% 到 50% 直接就顯示了黃色yellow
step-end為end，動畫會以上一幀的顯示效果來填充間隔動畫，所以0% 到 50% 直接就顯示了紅色red
