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

评论列表

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O