CSS3 动画效果

网页中除了使用javascript来定义网页动画效果外，还可以使用CSS3定义动画效果。

本章节主要讲解如何使用CSS3来定义动画，他们需要使用到那些属性。

在本章中，将学习如下属性：

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

浏览器对CSS动画的支持

并不是所有浏览器版本都支持CSS3的动画效果属性，表格中的数字注明了完全支持该属性的首个浏览器版本。

属性	Chrome	IE	Firefox	Safari	Opera
@keyframes	43.0	10.0	16.0	9.0	30.0
animation-name	43.0	10.0	16.0	9.0	30.0
animation-duration	43.0	10.0	16.0	9.0	30.0
animation-delay	43.0	10.0	16.0	9.0	30.0
animation-iteration-count	43.0	10.0	16.0	9.0	30.0
animation-direction	43.0	10.0	16.0	9.0	30.0
animation-timing-function	43.0	10.0	16.0	9.0	30.0
animation-fill-mode	43.0	10.0	16.0	9.0	30.0
animation	43.0	10.0	16.0	9.0	30.0

@keyframes 规则

创建CSS动画，必须遵循 @keyframes 规则。@keyframes 规则中指定了 CSS 样式，动画效果就是这些@keyframes中定义的样式的过渡。

定义完成@keyframes后，要将该规则定义在具体元素上，这样元素的动画效果才能展现。

例如下例中，定义了元素背景颜色的动画变化效果。

示例

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

解释：

1、animation-duration 属性定义了动画完成时间，该属性必须执行，否则默认时间为0，无动画效果。

2、关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）。

下例中使用百分比方式来定义每个节点的效果样式。

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

定义动画延时时间

animation-delay 属性用来规定动画开始的延迟时间。例如，下例中定义了在开始动画前有 2 秒的延迟。

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

注意：如果定义的延时为负值，则表示动画默认从已经开始的2秒处开始。

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

定义动画的运行次数

在CSS3中的 animation-iteration-count 属性指定动画应运行的次数。

例如，下面示例中定义了动画重复运行 3 次：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

如果希望动画不停的运行下去，可以通过设定animation-iteration-count的属性值为infinite来实现。

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

控制动画的播放方式

CSS3 中的 animation-direction 属性可以指定动画是向前播放、向后播放还是交替播放。

animation-direction 属性值：

• normal – 动画正常播放（向前），默认值
• reverse – 动画以反方向播放（向后）
• alternate – 动画先向前播放，然后向后
• alternate-reverse – 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

下面的例子使用值 "alternate" 使动画先向前运行，然后向后运行：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

下面的例子使用值 "alternate-reverse" 使动画先向后运行，然后向前运行：

示例

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

定义动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

• ease – 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
• linear – 规定从开始到结束的速度相同的动画
• ease-in – 规定慢速开始的动画
• ease-out – 规定慢速结束的动画
• ease-in-out – 指定开始和结束较慢的动画
• cubic-bezier(n,n,n,n) – 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

示例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none – 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards – 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
• backwards – 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
• both – 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值：

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

下例中在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

动画简写属性

下例使用六种动画属性：

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

以上的写法，效果和下面的写法等效：

div {
  animation: example 5s linear 2s infinite alternate;
}

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3