CSS animation 属性

一、示例

<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);
那么，动画会在0_{50%，阶跃5次；50%}100%，阶跃5次；
step-start为start，动画会以下一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了黄色yellow

step-end为end，动画会以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red