CSS3 自定义动画（animation）

除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有一种自由度更大的自定义动画，开发者甚至可以使用变形（transformation）和转换（transition）制作自定义动画，利用纯 CSS 制作出像 Flash 一样的效果。在实际使用中不难发现，变形和转换更适合做元素的交互，而自定义动画除了做交互外还能使到网页具有活力，有了自定义动画，利用 CSS 代替 Flash 才会更加现实。

首先看看 animation 的效果 —— Demo 。

一. animation 基础

animation 的参数与 transition 比较相似，如果之前了解过 transition 的童鞋应该会对 animation 的参数感觉很熟悉。具体的参数如下：

animation-name

动画名称，默认为 none

animation-duration

动画的持续时间，默认为 0

animation-timing-function

动画的过渡类型，参数可选值类似于 transition-timing-function ，默认为 ease ，具体如下：

• linear：线性过渡。相当于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease：平滑过渡。相当于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• ease-in：由慢到快。相当于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-out：由快到慢。相当于贝塞尔曲线(0, 0, 0.58, 1.0)
• ease-in-out：由慢到快再到慢。相当于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，number 在 [0, 1] 区间内取值

animation-delay

动画延迟的时间

animation-iteration-count

动画的循环次数，其值可以是一个正整数，表示循环次数，也可以设置为 infinite ，即无限循环，默认为 1

animation-direction

动画在循环中是否反向运动，normal 为正向方向，alternate 为向常与反向交替运动，具体为第偶数次正向运动，第奇数次向反方向运动，默认为 normal

animation-play-state

表示动画的状态，默认值为 running ，表示正在运动，paused 为暂停。但 w3c 正在考虑是否将该属性移除，并通过重设样式或其他方式表示动画的状态，因此不建议使用该属性。

以上这些参数都可以同时赋予多个值，只要注意各参数顺序对应即可，例如要为 #demo 指定两个动画，可以这样编写（大多数浏览器仍需通过私有属性才能支持 animation ，为了方便阅读，这里省略浏览器私有属性，按 W3C 标准写法编写。）

#demo {
	/* 指定动画名称 */
	animation-name: animation1, animation2;
	/* 指定动画时长 */
	animation-duration: 2s 1s;
}

这样 #demo 就会同时获得两个动画，但是，动画的具体过程还没有指定，实际上动画的具体内容并不在 animation 内指定，而是利用另一个属性 @keyframes 指定，@keyframes 指定了一个动画的名称和实际内容，而 animation 则负责为元素指定引用的动画，并对动画的时间、过渡类型等作出设置。这样把动画的引用和动画的实际内容分开设置，可以提高动画的独立性和利用率。

@keyframes 支持两种设置方式，分别用于简单动画和复杂的动画

例如，为 #demo 设置一个简单的线性动画，使到其 opacity 值由 0 线性过渡到 1，可以直接使用 from 和 to 指定初始和结束状态，

#demo {
	animation-name: animation1;
	animation-duration: 2s;
	animation-timing-function: linear; 
}

@keyframes animation1{
	from{opacity: 0; }
	to{opacity: 1; }
}

若对于复杂的动画，则需要使用 percentage ，percentage 即百分比，animation 支持使用“%”指定到某一个百分比时动画所执行到的效果，例如指定元素向右平移再向下平移，可以这样编写：

#demo {
	animation-name: animation1;
	animation-duration: 2s;
	animation-timing-function: linear; 
}

@keyframes animation1{
	0% {transform: translate(0); }
	20% {transform: translate(120px); }
	40% {transform: translate(240px); }
	60% {transform: translate(240px, 40px); }
	80% {transform: translate(240px, 80px); }
	100% {transform: translate(240px, 120px); }
}

也可以配合 from 和 to 使用：

#demo {
	animation-name: animation1;
	animation-duration: 2s;
	animation-timing-function: linear; 
}

@keyframes animation1{
	from {transform: translate(0); }
	20% {transform: translate(120px); }
	40% {transform: translate(240px); }
	60% {transform: translate(240px, 40px); }
	80% {transform: translate(240px, 80px); }
	to {transform: translate(240px, 120px); }
}

当然，开发者也可以合并 animation 的各个单独属性，直接用 animation 简写：

#demo {
	animation: animation1 2s linear;
}

@keyframes animation1{
	0% {transform: translate(0); }
	20% {transform: translate(120px); }
	40% {transform: translate(240px); }
	60% {transform: translate(240px, 40px); }
	80% {transform: translate(240px, 80px); }
	100% {transform: translate(240px, 120px); }
}

效果请浏览 Demo（请使用 Chrome、Firefox、Safari 或 Opera 浏览，下同）。

二. 动画的内容

animation 配合 transform 无疑能做出一些不错的动画，但 animation 的能力不仅限于此，W3C 提供给 animation 可用于做动画过程的 CSS 属性有很多种，包括了元素的宽度（width）、高度（height）、边距（margin）、背景（background）等重要属性，具体请浏览 W3C 官方说明。熟悉 jQuery 的童鞋会发现，animation 与 jQuery 的 animate() 方法很相似，但 animate() 只支持数值类型动画，而不支持如颜色值等字符串值，在这点上 animation 更有优势，并且是纯 CSS 实现，无须包含一个 jQuery 库。当然，与 jQuery 已经做好完善的浏览器兼容相比，CSS3 的 animation 则显得有点逊色，因此暂时还是建议把 animation 渐进增强地用在网页效果与交互加强中，关于这一点文章末尾会再作论述。

另外，transition 中的过渡属性可选值（transition-property）也是使用上面的值。

三. animation 与 transform 和 transition 的区别

很多的资料会把 transform 和 transition 同时直接归类为动画，的确，从很多实际使用的例子中看，transform 和 transition 都表现出动画的特征，但实际上，它们仍有很大的区别：

transform 和 transition 需要经过用户触发才会表现出动态的效果，这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类，也可以是 click、focus 等 JavaScirpt 事件，如果没有设置触发条件而直接给元素设置 transform 或 transition ，用户只能看到元素的终态而没有动画过程。animation 则无须触发条件，开发者只需为元素绑定动画即可。

另外，在旧版本的 animation 中，animation 、transform 以及 transition 都有一个重要的性质——过程执行完毕后会回撤，例如以 :hover 触发 transform ，在鼠标离开元素后动画自动反向播放，使到元素回到 transform 之前的状态，animation 也会在动画结束后回滚，但不会反向播放动画，而是直接跳到动画播放之前的动态。

但是，经过修订，animation 增加了一个很重要的属性 animation-fill-mode ，这个属性控制设置动画之外的状态，即元素在动画开始前后的状态是否根据动画设置中“0%”、“100%”的状态设置，animation-fill-mode 的值可以为 none、forwards、backwards 或 both ，默认为 none ，即动画过程中“0%”、“100%”的状态不会设置为元素开始和结束的状态，backwards 和 forwards 则分别设置开始和结束的状态，both 则同时设置两个的状态，例如上面平移元素的例子，若加入 forwards 属性，则在动画结束后元素会保留在 100% 时动画设置的位置而不回撤。读者可以根据下面的 Demo 对比两者的不同之处。

设置了 forwards 的 Demo 。

有了这个属性，animation 动画也就更加完整了，虽然没有了这个属性，开发者仍可以设置出自己需要的效果，但是 animation 是需要配合其他 CSS 属性设置才会有最终的效果，若没有了这个属性设置动画将会复杂很多。

四. 浏览器兼容

animation 的兼容性如下：

Chrome 13+、Firefox 5+、Safari 5.1+、Opera 12+、IE10+

其中最新版的 Chrome、Safari、Opera 以及 IE（Chrome 22.0.1229.94 , Firefox 17.0.1 , Safari 5.1.7 , Opera 12.12 , IE10）需要通过私有属性才能支持 animation ，Firefox 则支持 W3C 的标准写法。

虽然 animation 的浏览器支持情况仍稍有欠缺，但 animation 的效果真的十分出色，开发者不妨利用渐进增强的设计理念，把 animation 用在增强页面元素的效果或交互上，这样对于使用现代浏览器的用户来说无疑会提升他们的用户体验。

当然，如果 animation 中还使用了 transform 或 transition ，那么兼容性则需要考虑到 transform 或 transition 的浏览器兼容性。考虑到综合的情况，Kayo 建议使用如下的方式调用 animation （以简单动画为例子）：

#demo {
	-webkit-animation: animation1 2s linear;
	-moz-animation: animation1 2s linear;
	-o-animation: animation1 2s linear;
	animation: animation1 2s linear;
}

@-webkit-keyframes animation1{
	from{opacity: 0; }
	to{opacity: 1; }
}

@-moz-keyframes animation1{
	from{opacity: 0; }
	to{opacity: 1; }
}

@-o-keyframes animation1{
	from{opacity: 0; }
	to{opacity: 1; }
}

@keyframes animation1{
	from{opacity: 0; }
	to{opacity: 1; }
}

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/css3-animation.html