一、示例
<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; // 你所希望的，動(dòng)畫執(zhí)行一次耗費(fèi)的時(shí)間
animation-timing-function:ease;// 以哪種方式動(dòng)畫
animation-delay: 1s;// 延遲多少秒后執(zhí)行
animation-iteration-count: infinite; // 動(dòng)畫執(zhí)行次數(shù)
animation-direction: normal; // 動(dòng)畫執(zhí)行方向(感覺不常用)
}
</pre>
二、animation屬性解析
1. animation-timing-function
規(guī)定了動(dòng)畫的速度曲線
w3c 的解釋是:
2. animation-iteration-count
可以是n(即次數(shù))，可以是infinite ([??nf?n?t] 無限的;[??t??re??n]循環(huán))
w3c 的解釋是
3. animation-direction
是否應(yīng)該要輪流反轉(zhuǎn)播放，IE9以及之前版本不支持這個(gè)屬性
w3c 的解釋是
4. @keyframes
執(zhí)行上面 scaleToSmall 這個(gè)動(dòng)畫
w3c 的解釋
寫兩個(gè)示例，便于理解
// 1. 勻速向下運(yùn)動(dòng)
@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() 階躍函數(shù)
animation-timing-function 中的還有一個(gè) steps() 函數(shù)
這是一個(gè)階躍函數(shù)
示例 step(num,start)
第一個(gè)參數(shù)： number類型，必須是整數(shù)；
第二個(gè)參數(shù)：start、end；
<pre>@keyframes circle {
0% {background: red} ；
50%{background: yellow} ；
100% {background: blue} ；
}</pre>
如 step(5,start);
那么，動(dòng)畫會(huì)在050%，階躍5次；50%100%，階躍5次；
step-start為start，動(dòng)畫會(huì)以下一幀的顯示效果來填充間隔動(dòng)畫，所以0% 到 50% 直接就顯示了黃色yellow
step-end為end，動(dòng)畫會(huì)以上一幀的顯示效果來填充間隔動(dòng)畫，所以0% 到 50% 直接就顯示了紅色red
