CSS 动画
CSS 动画
CSS 允许无需使用 JavaScript 或 Flash 即可实现 HTML 元素的动画！
在本章中您将了解以下属性：
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
浏览器对动画的支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 财产 | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画名称 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画持续时间 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画延迟 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画迭代次数 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画导演 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画计时功能 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画填充模式 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| 动画片 | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
什么是 CSS 动画？
动画可以让元素逐渐从一种风格转变为另一种风格。
您可以根据需要多次更改任意数量的 CSS 属性。
要使用 CSS 动画，首先必须为动画指定一些关键帧。
关键帧保存元素在特定时间将具有的样式。
@keyframes 规则
当您在 @keyframes 规则是，动画会在特定时间逐渐从当前风格转变为新风格。
要使动画正常工作，必须将动画绑定到元素。
以下示例将“示例”动画绑定到<div>元素。动画将持续 4 秒，并将逐渐改变元素的背景颜色<div>元素从“红色”变为“黄色”：
例子
/* 动画代码 */
@keyframes 示例 {
来自 {背景颜色：红色；}
至 {背景颜色：黄色；}
}
/* 应用动画的元素 */
div {
宽度：100px；
高度：100px；
背景颜色：红色；
动画名称：示例；
动画持续时间：4秒；
}
亲自尝试 »
笔记： 这animation-duration 属性定义动画需要多长时间才能完成。如果animation-duration 未指定属性时，不会发生动画，因为默认值为 0s（0 秒）。
在上面的例子中，我们使用关键字“from”和“to”（代表 0%（开始）和 100%（完成））指定了样式何时改变。
也可以使用百分比。通过使用百分比，您可以根据需要添加任意数量的样式更改。
以下示例将更改<div>动画完成 25％、50％ 以及 100％ 时元素：
例子
/* 动画代码 */
@keyframes 示例 {
0％{背景颜色：红色；}
25％{背景颜色：黄色；}
50％{背景颜色：蓝色；}
100％{背景颜色：绿色；}
}
/* 应用动画的元素 */
div {
宽度：100px；
高度：100px；
背景颜色：红色；
动画名称：示例；
动画持续时间：4秒；
}
亲自尝试 »
下面的例子将改变背景颜色和<div>动画完成 25％、50％ 以及 100％ 时元素：
例子
/* 动画代码 */
@keyframes 示例 {
0% {背景颜色：红色；左边：0px；顶部：0px；}
25% {背景颜色：黄色；左侧：200px；顶部：0px；}
50% {背景颜色：蓝色；左侧：200px；顶部：200px；}
75％{背景颜色：绿色；左侧：0px；顶部：200px；}
100％{背景颜色：红色；左侧：0px；顶部：0px；}
}
/* 应用动画的元素 */
div {
宽度：100px；
高度：100px；
位置：相对；
背景颜色：红色；
动画名称：示例；
动画持续时间：4秒；
}
亲自尝试 »
延迟动画
这 animation-delay 属性指定动画开始的延迟。
以下示例在开始动画之前有 2 秒的延迟：
也可以使用负值。如果使用负值，动画将像已经播放了一样开始 否 秒。
在以下示例中，动画将像已经播放了 2 秒一样开始：
设置动画应运行的次数
这 animation-iteration-count 属性指定动画运行的次数。
以下示例将运行动画 3 次后才停止：
下面的例子使用值“infinite”来让动画永远继续下去：
反向或交替循环运行动画
这 animation-direction 属性指定动画是否应正向播放、向后播放或交替播放。
animation-direction 属性可以具有以下值：
normal- 动画正常播放（向前）。这是默认设置reverse- 动画以反向播放（向后）alternate- 动画先正向播放，然后倒向播放alternate-reverse- 动画先向后播放，然后向前播放
以下示例将以相反方向（向后）运行动画：
下面的示例使用值“alternate”使动画先向前运行，然后向后运行：
下面的示例使用值“alternate-reverse”使动画先向后运行，然后向前运行：
指定动画的速度曲线
这 animation-timing-function 属性指定动画的速度曲线。
animation-timing-function 属性可以具有以下值：
ease- 指定动画以慢速开始，然后快速，然后缓慢结束（这是默认设置）linear- 指定从开始到结束速度相同的动画ease-in- 指定慢速启动的动画ease-out- 指定以缓慢的速度结束的动画ease-in-out- 指定慢速开始和结束的动画cubic-bezier(n,n,n,n)- 让你在三次贝塞尔函数中定义自己的值
下面的示例显示了一些可以使用的不同速度曲线：
例子
#div1 {动画计时函数：线性；}
#div2 {动画计时功能：ease;}
#div3 {动画计时功能：ease-in;}
#div4 {动画计时功能：ease-out;}
#div5 {动画定时函数：ease-in-out;}
亲自尝试 »
指定动画的填充模式
CSS 动画不会在播放第一个关键帧之前或播放最后一个关键帧之后影响元素。animation-fill-mode 属性可以覆盖此行为。
这 animation-fill-mode 属性指定动画未播放时（开始前、结束后或两者）目标元素的样式。
animation-fill-mode 属性可以具有以下值：
none- 默认值。动画在执行之前或之后不会对元素应用任何样式forwards- 元素将保留最后一个关键帧设置的样式值（取决于动画方向和动画迭代次数）backwards- 元素将获取第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留该值both- 动画将遵循向前和向后的规则，在两个方向上扩展动画属性
下面的例子让<div>动画结束时，元素保留最后一个关键帧的样式值：
下面的例子让<div>元素获取动画开始前（动画延迟期间）第一个关键帧设置的样式值：
下面的例子让<div>元素获取动画开始前第一个关键帧设置的样式值，并在动画结束时保留最后一个关键帧的样式值：
动画简写属性
下面的示例使用了六个动画属性：
使用简写可以实现与上面相同的动画效果 animation 财产：
CSS 动画属性
下表列出了@keyframes规则和所有CSS动画属性：
| 财产 | 描述 |
|---|---|
| @keyframes | 指定动画代码 |
| 动画片 | 用于设置所有动画属性的简写属性 |
| 动画延迟 | 指定动画开始的延迟 |
| 动画导演 | 指定动画是否应正向、反向或交替循环播放 |
| 动画持续时间 | 指定动画完成一个循环需要多长时间 |
| 动画填充模式 | 指定动画未播放时（开始前、结束后或两者）元素的样式 |
| 动画迭代次数 | 指定动画播放的次数 |
| 动画名称 | 指定@keyframes动画的名称 |
| 动画播放状态 | 指定动画是否正在运行或暂停 |
| 动画计时功能 | 指定动画的速度曲线 |
