CSS动画简介

作者: 阮一峰

日期: 2014年2月14日

现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。

但是,CSS动画除外,它实在太有用了。

本文介绍CSS动画的两大组成部分:transition和animation。我不打算给出每一条属性的详尽介绍,那样可以写一本书。这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不起某一个用法的时候,能够快速地找到提示。

我的主要参考资料是,2013年10月,Lea Verou在JSConf.Asia上面的演讲《CSS in the 4th Dimension》。那是一个非常棒的演讲,有视频幻灯片,强烈推荐。

第一部分:CSS Transition

1.1 基本用法

在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。

上面是一个演示,当鼠标放置于缩略图之上,缩略图会迅速变大。注意,缩略图的变大是瞬间实现的。下面是代码,相当简单。


img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}

transition的作用在于,指定状态变化所需要的时间。


img{
    transition: 1s;
}

上面代码指定,图片放大的过程需要1秒,效果如下。

我们还可以指定transition适用的属性,比如只适用于height。


img{
    transition: 1s height;
}

这样一来,只有height的变化需要1秒实现,其他变化(主要是width)依然瞬间实现,效果如下。

1.2 transition-delay

在同一行transition语句中,可以分别指定多个属性。


img{
    transition: 1s height, 1s width;
}

但是,这样一来,height和width的变化是同时进行的,跟不指定它们没有差别,效果如下。

我们希望,让height先发生变化,等结束以后,再让width发生变化。实现这一点很容易,就是为width指定一个delay参数。


img{
    transition: 1s height, 1s 1s width;
}

上面代码指定,width在1秒之后,再开始变化,也就是延迟(delay)1秒,效果如下。

delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果。

1.3 transition-timing-function

transition的状态变化速度(又称timing function),默认不是匀速的,而是逐渐放慢,这叫做ease。


img{
    transition: 1s ease;
}

除了ease以外,其他模式还包括

(1)linear:匀速

(2)ease-in:加速

(3)ease-out:减速

(4)cubic-bezier函数:自定义速度模式

最后那个cubic-bezier,可以使用工具网站来定制。


img{
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}

上面的代码会产生一个最后阶段放大过度、然后回缩的效果。

1.4 transition的各项属性

transition的完整写法如下。


img{
    transition: 1s 1s height ease;
}

这其实是一个简写形式,可以单独定义成各个属性。


img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

1.5 transition的使用注意

(1)目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。

(2)不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果

(3)transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。

1.6 transition的局限

transition的优点在于简单易用,但是它有几个很大的局限。

(1)transition需要事件触发,所以没法在网页加载时自动发生。

(2)transition是一次性的,不能重复发生,除非一再触发。

(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

第二部分:CSS Animation

2.1 基本用法

首先,CSS Animation需要指定动画一个周期持续的时间,以及动画效果的名称。


div:hover {
  animation: 1s rainbow;
}

上面代码表示,当鼠标悬停在div元素上时,会产生名为rainbow的动画效果,持续时间为1秒。为此,我们还需要用keyframes关键字,定义rainbow效果。


@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代码表示,rainbow效果一共有三个状态,分别为起始(0%)、中点(50%)和结束(100%)。如果有需要,完全可以插入更多状态。效果如下。

默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放。


div:hover {
  animation: 1s rainbow infinite;
}

也可以指定动画具体播放的次数,比如3次。


div:hover {
  animation: 1s rainbow 3;
}

这里还有一个心脏跳动的例子,可供参考。

2.2 animation-fill-mode

动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用animation-fill-mode属性。


div:hover {
  animation: 1s rainbow forwards;
}

forwards表示让动画停留在结束状态,效果如下。

animation-fill-mode还可以使用下列值。

(1)none:默认值,回到动画没开始时的状态。

(2)backwards:让动画回到第一帧的状态。

(3)both: 根据animation-direction(见后)轮流应用forwards和backwards规则。

2.3 animation-direction

动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为。

下面看一个例子,来说明如何使用animation-direction。假定有一个动画是这样定义的。


@keyframes rainbow {
  0% { background-color: yellow; }
  100% { background: blue; }
}

默认情况是,animation-direction等于normal。


div:hover {
  animation: 1s rainbow 3 normal;
}

此外,还可以等于取alternate、reverse、alternate-reverse等值。它们的含义见下图(假定动画连续播放三次)。

简单说,animation-direction指定了动画播放的方向,最常用的值是normal和reverse。浏览器对其他值的支持情况不佳,应该慎用。

2.4 animation的各项属性

同transition一样,animation也是一个简写形式。


div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

这是一个简写形式,可以分解成各个单独的属性。


div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
    animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

2.5 keyframes的写法

keyframes关键字用来定义动画的各个状态,它的写法相当自由。


@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

0%可以用from代表,100%可以用to代表,因此上面的代码等同于下面的形式。


@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

如果省略某个状态,浏览器会自动推算中间状态,所以下面都是合法的写法。


@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

甚至,可以把多个状态写在一行。


@keyframes pound {
  from,to { transform: none; }
  50% { transform: scale(1.2); }
}

另外一点需要注意的是,浏览器从一个状态向另一个状态过渡,是平滑过渡。steps函数可以实现分步过渡。


div:hover {
  animation: 1s rainbow infinite steps(10);
}

这里有一个非常神奇的例子,可以看到steps函数的用处。

2.6 animation-play-state

有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态。

上面动画中,如果鼠标移走,色块立刻回到动画开始状态。

如果想让动画保持突然终止时的状态,就要使用animation-play-state属性。


div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

上面的代码指定,没有鼠标没有悬停时,动画状态是暂停;一旦悬停,动画状态改为继续播放。效果如下。

2.7 浏览器前缀

目前,IE 10和Firefox(>= 16)支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀。

也就是说,实际运用中,代码必须写成下面的样子。


div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

(完)

留言(56条)

写的很清晰,为了成为一个full stack的工程师,后端开发也是要学学这个的。

"我不太爱写介绍CSS的文章,因为这不是网站开发的关键。" 刺痛我了。动画仅是css的一部分,高级布局等等,开发现代应用不可割裂...

CSS的却不是网站开发的关键,它是web用户体验的关键。

背景多样性、计算布局、动画。私人认为这三点才是CSS的主题。背景方面有多背景的支持,背景本身又不能太过依赖CSS,主要是图片,所以这点算是够了。布局的话只有calc算过得去,其余新增的所谓六大布局系统我只能呵呵。动画方面由于新增的伪类加入,所以还是可以赞的,就是配置太过繁琐,新手很难把握住动画的关键,这是个重型武器。

css3 真心强大,有些特效和动画可以用用js来做了.使用还简单

Lea Verou 是我的偶像呀,她还曾经加入过w3c

一直关注着峰哥博客,博客内容无所不包,但又篇篇精品;也不只一遍的翻阅博主翻译的「黑客与画家」,坚信编程是一种艺术创作,深受编程语言进化思想,虽是java出身,但更喜欢动态语言javsscript,python。
另附上翻译的css3动画的详细教程:http://stormhouse.github.io/posts/2013/animationzhuan/

听同事介绍你的文章,今日一见,实属震撼!我的个人网站正在开始架构,希望以后可以多向你请教。

又一篇好文

引用kejun的发言:

"我不太爱写介绍CSS的文章,因为这不是网站开发的关键。" 刺痛我了。动画仅是css的一部分,高级布局等等,开发现代应用不可割裂...

前端体验越发重要

1.2 transition-delay
在同一行transition语句中,可以分别指定多个属性。

1.6 transition的局限
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

这两处是不是有点矛盾呢?

阮一峰

这里有一个非常神奇的例子

感觉这个例子确实停奇妙,但是css:step(30,end)里的30还是依赖文本的长度,复用性不好,感觉不太优雅...

引用kejun的发言:

"我不太爱写介绍CSS的文章,因为这不是网站开发的关键。" 刺痛我了。动画仅是css的一部分,高级布局等等,开发现代应用不可割裂...

鄙人也觉得不太客观啊,客户端还是挺重要的吧,一个不好看或者体验不好的网站可能很难吸引用户去深入了解你强大的后台功能,否则为什么Ajax变得那么必须了呢

很不错,以后请您多发点关于技术和思想上的说说

你好,我看到一篇TDD的文章。它的英文比较难懂,不知阮大神能否翻译一下?
http://blog.testdouble.com/posts/2014-01-25-the-failures-of-intro-to-tdd.html

这文章我看完了。有人叫你是大神,我也觉得你是大神。

css3配合js,可以大幅优化静态页的显示效果,我用的jekyll生成的博客,就很依赖这个。

阮老师的博客看着不累,受益匪浅。有时间也介绍下css3在移动平台下的使用。

“因为感觉网站开发的关键还是在服务器端”
博主又调皮了。

《CSS in the 4th Dimension》上写的是reverse和alternate-reverse WORSE SUPPORT :(
您写的是“最常用的值是normal和reverse。浏览器对其他值的支持情况不佳,应该慎用。”
不太一样吧

引用心灵诊室的发言:

鄙人也觉得不太客观啊,客户端还是挺重要的吧,一个不好看或者体验不好的网站可能很难吸引用户去深入了解你强大的后台功能,否则为什么Ajax变得那么必须了呢

赞同.

是时候学HTML5和CSS3了,虽然一直做服务端程序

除了那句大家都看到的激进语言,其他文字都是有含金量的,很喜欢你的博客里的某些文章,感谢分享

html没有未来,未来是gopher!

“网站开发的关键还是在服务器端”
同意,不过还没有考虑好学习哪一种服务器端编程语言,当然,这是个次要的问题。
前端再怎么绚烂,也只是个架子而已,干货还是在服务器端啊。
全栈工程师,是不是就是前后端都精通的意思啊,嗯,朝着这个方向发展。
当然,或许这些都是层次太低的需求。那我希望能早日有更高层次的需求。

好文章,在它帮助下做了一个端午节的小游戏,谢过了。

网站开发的关键还是在服务器端,很难理解啊!

简单来说,网站现在都是数据处理,所以后台很重要,但是对于普通客户来说,界面的友好性更重要,一个优秀的站点设计不仅仅是数据处理,所以说,现在学界面设计的人越来越重要,以前属于旧社会,只要能干活就行,现在是奢饰品,还要求好看。

程序员的未来在前端,后台的程序逐渐被封装成了成熟的实现固定逻辑的产品或模块,真正需要变化的是交互界面,是适合各种审美的界面需求。

真是一篇完整、易读又严谨的入门好教程。感谢!

很好很值得学习。

经常看,写的很好,赞一个哈。

请问阮老师写了一堆animation效果,可以再加一个点击按钮才触发吗

(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
上边栗子有transition: 1s height, 1s width; 这不就是两个属性的变化吗?

大神就是大神,果然名不虚传。

请教一个问题:如果去后台请求一个服务并进行前端处理,需要耗费较长的时间。如何实现在等待处理的这段时间内加一个等待动画,而又不影响到前端的处理呢?

引用U的发言:

html没有未来,未来是gopher!

我就呵呵你了

学到了很多,感谢!很有帮助。

animation-fill-mode还可以使用下列值:
(2)backwards:让动画回到第一帧的状态
这个试了下没效果,怎么回事?

animation-fill-mode还可以使用下列值:

1、backwards: from处的关键帧规则被应用到元素,在动画开始之前。

2、forwards:to处的关键帧规则被应用到元素,在动画开始之后。

3、both: from处的关键帧规则被应用到元素,在动画开始之前,to处的关键帧规则被应用到元素,在动画开始之后。

通过设置 animation-delay 属性值,在chrome dev tool 中的animation面板中可以看到效果。

您好,关于animation-fill-mode属性值boldbackwards和both 的介绍,我查了资料,您说的应该是不准确的。


backwards:
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. The first relevant keyframe depends on the value of animation-direction.
both:
The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

根据 leaverou 的 Animatable,扩展了 Animate.css 的内容

https://lz5z.com/animatable

引用张道文的发言:

(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
上边栗子有transition: 1s height, 1s width; 这不就是两个属性的变化吗?

我的理解是,transition: 1s height;这算一条,transition: 1s height, 1s width; 这样就算两条了,不知道是不是这样

transition: 1s height, 1s 1s width;
=========
这个示例不够严谨,对于width延迟执行的1s无法让人知道是那个参数决定的。
应该以延迟2秒执行width为例:
transition: 1s height, 1s 2s width;

老师真是个天才。简洁易懂地传授知识,没人能超过你。

纠正一个细节:
"动画结束以后,会立即从结束状态跳回到起始状态。"

这个说法有点问题:动画结束之后,会回到元素的本来状态,而不是动画的起始状态。
比如,一个div width:200px,现在:
0% { width: 800px;height:800px }
50% { width: 100px ;height:100px}
100% { width: 400px; height:400px }

动画结束之后,width会回到200,而不是你说的起始状态800
可以参考demo:http://jsfiddle.net/shengbin_xu/m04cdmga/

我的理解是,transition: 1s height;这算一条,transition: 1s height, 1s width; 这样就算两条了,不知道是不是这样

我是在华清远见学习的!老师讲的很好!

@许:

这里面起始状态就是200px;不是0%吧,0%是关机键,起始状态会不会跟0%有补间动画

老师,关于transition我有两个疑问。
一个transition是不是可以触发多个动画。比如说 transition: 1s all;
另外一个就是您说的transition需要事件触发,页面加载的时候不能触发。但是在实际开发中,页面加载的onload本身就是一个事件,transition可以通过css选择器来控制触发。所以可以在页面加载的时候,给元素一个新的选择器,然后触发transition。这样做可以吗

jsfiddle.net连接超时了

图片显示不了了

transition需要事件触发,所以没法在网页加载时自动发生。
Q:可以利用document.onload 事件,添加class or style触发啊???
A: 可以这么实现。亲测

峰哥,图片挂了看不了了

挂加速器可以看图片和即时代码演示

引用孤风吊影的发言:

峰哥,图片挂了看不了了

确实看不了了, 您能帮忙解决下吗

无意间23年再次看见您的文章还是有很多收获,感谢!

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接