CSS3 动画
CSS3 动画功能允许您创建关键帧动画。
创建 CSS3 动画
在上一章中，您已经了解了如何制作简单的动画，例如通过 CSS3 转换功能将属性从一个值设置为另一个值。 然而，CSS3 过渡几乎不能控制动画如何随着时间的推移进行。
CSS3 动画通过基于关键帧的动画更进一步，允许您将 CSS 属性随时间的变化指定为一组关键帧，如 Flash 动画。 创建 CSS 动画是一个两步过程，如下例所示：
- 构建 CSS 动画的第一步是定义单个关键帧并使用关键帧声明命名动画。
- 第二步是使用
animation-name属性按名称引用关键帧，并添加animation-duration和其他可选的 动画属性 来控制动画的行为。
但是，没有必要在引用或应用之前定义关键帧规则。 以下示例将向您展示如何使用 CSS3 动画功能将 <div> 框从一个位置水平设置到另一个位置。
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
/* 标准语法 */
animation-name: moveit;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* 标准语法 */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}您必须至少指定两个属性 animation-name 和 animation-duration（大于 0），才能使动画发生。 但是，所有其他 动画属性 都是可选的，因为它们的默认值不会阻止动画的发生。
注意： 并非所有 CSS 属性都是可动画的。 通常，任何接受数字、长度、百分比或颜色值的 CSS 属性都是可动画的。
定义关键帧
关键帧用于指定动画各个阶段的动画属性值。 使用专门的 CSS 规则 — @keyframes 指定关键帧。 关键帧样式规则的关键帧选择器以百分比 (%) 或关键字 from（与 0% 相同）或 to（与 100% 相同）开头。 选择器用于指定沿动画持续时间构建关键帧的位置。
百分比代表动画持续时间的百分比，0%代表动画的起点，100%代表终点，50%代表中点，以此类推。 这意味着，2s 动画中 50% 的关键帧将是 1s 动画。
.box {
width: 50px;
height: 50px;
margin: 100px;
background: red;
position: relative;
left: 0;
/* Chrome, Safari, Opera */
-webkit-animation-name: shakeit;
-webkit-animation-duration: 2s;
/* 标准语法 */
animation-name: shakeit;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}
/* 标准语法 */
@keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}动画速记属性
创建动画时需要考虑许多属性。 但是，也可以在一个属性中指定所有动画属性以缩短代码。
animation 属性是一个简写属性，用于按列出的顺序一次设置所有单个动画属性。 例如：
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: repeatit 2s linear 0s infinite alternate;
/* 标准语法 */
animation: repeatit 2s linear 0s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}
/* 标准语法 */
@keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}注意：如果缺少或未指定任何值，则将使用该属性的默认值。 这意味着，如果缺少 animation-duration 属性的值，则不会发生过渡，因为它的默认值为 0。
CSS3 动画属性。
下表提供了所有动画相关属性的简要概述。
| 属性 | 说明 |
|---|---|
animation |
用于在单个声明中设置所有动画属性的简写属性。 |
animation-name |
指定应该应用于所选元素的 @keyframes 定义的动画的名称。 |
animation-duration |
指定动画完成一个动画周期所需的秒数或毫秒数。 |
animation-timing-function |
指定动画将如何在每个周期的持续时间内进行，即缓动函数。 |
animation-delay |
指定动画何时开始。 |
animation-iteration-count |
指定动画循环在停止之前应播放的次数。 |
animation-direction |
指定动画是否应在交替循环中反向播放。 |
animation-fill-mode |
指定 CSS 动画在执行前后应如何将样式应用于其目标。 |
animation-play-state |
指定动画是正在运行还是暂停。 |
@keyframes |
指定动画期间各个点的动画属性值。 |