HTML5+CSS3网页设计实例教程课件ch12

第12章

变形、变换和动画本章概述本章的学习目标主要内容第12章变形、变换和动画本章概述第2页本章概述回顾网络的早期阶段，Flash和JavaScript是创建那些无法单独用HTML和CSS获得的效果的两种流行方法，例如，按钮翻转、流视频的创建以及跟随在鼠标周边的图片。但是随着HTML5中<video>、<audio>以及<canvas>等元素的出现，CSS3将创建这些效果的能力内置于CSS变形、变换和动画规范当中。利用CSS3规范就可以轻易地在浏览器中添加类似Flash的动画和用户界面效果。此外，由于硬件加速，尤其是在移动设备中的引入，CSS3是添加以前不可能实现的效果的可行选择。第2页本章概述回顾网络的早期阶段，Flash和JavaSc第3页本章的学习目标了解CSS的2D和3D变形的工具了解CSS的2D和3D变换的概念了解CSS的2D和3D动画的方法第3页本章的学习目标了解CSS的2D和3D变形的工具第4页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第4页主要内容12.1CSS的2D和3D变形第5页12.1CSS的2D和3D变形变形就是在空间上对元素进行平移、旋转、缩放和斜切等基本操作，如图12-1所示。产生变形的元素不会影响其他元素，只会与其他元素发生交叠，例如position:absolute，但是它仍然会占据其默认的位置。这对于改变元素的宽度、高度、边缘等十分有利，因为这样一来布局就不会因为变形而产生改变。例如2D变换：平移（24像素,24像素）、旋转(-205°)、缩放(.75)和斜切(-18°)。每个盒子的标签也随之进行了相同的和相反的变形。第5页12.1CSS的2D和3D变形变形就是在空间上对元变形属性和变形函数CSS的值和单位变形属性和函数transform属性perspective属性perspective-origin属性transform-origin属性transform-style属性backface-visibility属性第6页项目说明Integer可在前面加上可选的+或-符号的数值，例如-1Number包括小数在内的数值，前面可加上可选的+或-符号，例如.95Percentage后面紧跟%的数值，例如33.3%Lengths长度单位(如果长度是0，则是可选的)，例如24px。长度单位包括：相对单位：em、ex、ch、rem、vw、vh、vm绝对单位：cm、mm、in、px、pt、pcangles后面紧跟角度单位的数值，例如18deg。角度单位包括deg、grad、rad和turntimes后面紧跟时间单位的数值，例如400ms。时间单位包括ms和sCSS的值和单位变形属性和变形函数CSS的值和单位第6页项目说明Intege元素变形效果变形属性是这些变形的基础，它可以有一个或多个由空格分隔的2D/3D变形函数。如果有多个变形函数，它们将按顺序进行应用。移动元素缩放元素元素的斜切矩阵变换第7页元素变形效果变形属性是这些变形的基础，它可以有一个或多个由空修改变形对象用透视和transform:perspective()函数将3D对象置于透视角度使用perspective-origin属性修改透视原点用transform-origin修改变形使用transform-style进行3D或平面变换隐藏和显示变形元素的背面第8页修改变形对象用透视和transform:perspectiv浏览器对CSS变形的支持浏览器对2D变形的支持浏览器对3D变形的支持扩展浏览器对CSS2D变形的支持第9页浏览器对CSS变形的支持浏览器对2D变形的支持第9页CSS变形的不足CSS2D和3D变形还存在一些问题。下面是一些解决技巧。WebKit浏览器无法使具有display:inline;属性的元素产生变形。当在iOS中使用transform:rotate();时，产生旋转的图像的直线边会产生锯齿。在Firefox3.5-9中，transform:matrix();中的平移值被实现为长度，而不是规范中的数字。在Opera11.60中产生变形的文本不具有抗锯齿效果。由于性能原因，3D变形在WebKit浏览器中禁用了次级像素的抗锯齿功能。第10页CSS变形的不足CSS2D和3D变形还存在一些问题。下面是第11页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第11页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画第12页CSS变换CSS动画属性一个，多个(相同的属性)可枚举属性单独的，全部当在关键帧中声明值时使用单个属性计时函数是(相同的函数)延迟是(正值/负值)CSStoanimate元素在状态改变前后的样式(两个状态)元素在关键帧内的内在状态和规则(两个或多个状态)由何者应用状态中的CSS修改，JavaScript被声明后，由状态中的CSS修改，JavaScript使用备选状态的改变是即时的什么都不会发生可重复性否是CSS变换和CSS动画之间的区别12.2CSS变换和CSS动画第12页CSS变换CS第13页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第13页主要内容12.1CSS的2D和3D变形12.3CSS变换CSSTransitions模块具有控制现有CSS属性变化的能力，使其随着时间变化从一个值变为另一个值。可以通过状态中的CSS修改来应用这些变换。变换包括的伪类有：:link、:visited、:hover、:focus、:active、:disabled、:enabled和:checked，还包括使用@mediaqueries和JavaScript，例如通过向元素添加类来使用JavaScript。第14页12.3CSS变换CSSTransitions模块具有使用transition-property设置可变换的属性transition-property允许用默认值all为变换指定一个或者多个由逗号分隔的可设置动画的CSS属性。注意具有厂商前缀的属性也需要为transition-property加上对应的厂商前缀。针对CSS变换和CSS动画的可设置动画属性使用max-width和max-height模拟具有auto值的width和height第15页使用transition-property设置可变换的属性t使用transition-duration控制变换的持续时间transition-duration属性可以设置变换的持续时间，它接受以秒(s)或者毫秒(ms)为单位的时间值。第16页三个变换持续时间的比较使用transition-duration控制变换的持续时间transition-timing-function、三次贝塞尔曲线和steps()函数transition-timing-function属性基于Bézier曲线，就是沿着一条弧运动。第17页三次Bézier曲线具有弹性的三次Bézier值transition-timing-function、三次贝使用transition-delay推迟变换的起始时间transition-delay可以推迟变换受到触发后的起始时间。与transition-duration一样，它接受以秒或毫秒为单位的时间值，当值为正时，变换的延迟由值的数量决定；值为负时，动画会根据transition-delay的值跳转开始，就好像时间已经流逝一样。第18页使用transition-delay推迟变换的起始时间tra多个变换值和简写形式的变换属性所有变换属性都可以接受由逗号分开的多个值，这样可以让多个具有不同设置的属性同时产生变换。当每个transition-*属性使用多个值时，值的顺序十分重要，因为每个属性的值都是根据其顺序进行组合。第19页多个变换值和简写形式的变换属性所有变换属性都可以接受由逗号分简写变换属性时值的排序在使用变换属性时，保持值的顺序十分重要，对于多个变换而言，是由逗号分开的值按下面组合顺序：(1)transition-property(2)transition-duration(3)transition-timing-function(4)transition-delay第20页简写变换属性时值的排序在使用变换属性时，保持值的顺序十分重要浏览器对CSS变换的支持第21页对CSS变换的浏览器支持浏览器对CSS变换的支持第21页对CSS变换的浏览器支持CSS变换的不足变换中一些问题如下所示。在将变换应用于类似:hover的链接状态时，如果将变换应用为默认状态，这样一来链接状态就会修改变换。颜色变换是在RGBa空间中进行的，这样一来，如果用的是HSLa空间的话，就会产生无法预料的结果。使用非自左乘像素颜色插值的浏览器会间接地让具有alpha通道的颜色(例如RGBa和颜色透明度)产生变换。由于性能原因，对于文本变换或动画，浏览器关闭了次级像素抗锯齿功能(WebKit)或者完全不具有抗锯齿功能(Opera)，这样会使得文字看上去发白。如果不在设置另一个样式之前触发回溯或使用延时，就无法通过使用JavaScript修改属性来应用变换。第22页CSS变换的不足变换中一些问题如下所示。第22页第23页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第23页主要内容12.1CSS的2D和3D变形12.4使用CSS动画制作关键帧动画CSS动画在两个部分中进行添加，如下面的代码所示。(1)包含单个关键帧的@keyframes代码块，@keyframes代码块对动画进行定义和命名。(2)用于向元素添加已命名的@keyframes动画以及控制动画行为的若干animation-*形式的属性第24页12.4使用CSS动画制作关键帧动画CSS动画在两个部分一个简单动画实例一个使用animation-name和animation-duration的简单动画示例。第25页CSS中基于关键帧的动画一个简单动画实例一个使用animation-name和ani使用@keyframes控制动画@keyframes可以创建无法使用变换创建的动画。本例十分简单，和在前面使用变换一样容易，它仅仅是在初始状态和终止状态之间产生动画。第26页使用@keyframes控制动画@keyframes可以创建使用animation-timing-function属性的计时函数animation-timing-function和transition-timing-function的使用方式相同，并且接受的值也相同。使用动画展示这些值可以获得与使用变换和transition-timing-function同样的效果。此外，还可以针对动画的不同部分使用不同的计时函数。第27页使用animation-timing-function属性的使用animation-delay修改动画的起始方式animation-delay的时间值可以用来改变动画的起始时间，它和transition-delay一样方便。当值为正时，起始的延迟时间由值的数量决定；当值为负时，动画就会根据值的数量进行跳进，就好像这段时间已经过去了一样。第28页用animation-delay延迟或者跳进动画的起始时间使用animation-delay修改动画的起始方式anim控制动画运行次数当一段动画被触发后，默认情况下只会运行一次，然后会重置为初始状态。可以用animation-iteration-count让动画运行不止一次，或者用值infinite让动画不断运行，直至浏览器窗口被关闭。第29页控制动画运行次数当一段动画被触发后，默认情况下只会运行一次，结合animation-direction前面讲了如何用animation-iteration-count增加动画运行的次数，如果运行次数大于1，那么就可以用animation-direction控制后面偶数次的动画也是从头运行到尾(值normal)，还可以用值alternate使其反向运动。第30页结合animation-direction前面讲了如何用an控制元素在动画前后的表现用animation-fill-mode控制元素在动画前后的表现。除非动画正在运行，否则它不会产生任何效果。甚至在animation-delay的值为正时也是如此——任何起始关键帧的值都只会在延迟结束后才得到应用。这也意味着动画与CSS变形不同，默认情况下它会在动画结束时返回到其原有的样式，就好像动画触发器仍然在起作用一样。这归咎于animation-fill-mode属性的默认值是none，但是值forwards、backwards和both可以控制元素在动画前后的表现。第31页控制元素在动画前后的表现用animation-fill-mo暂停动画使用animation-play-state暂停动画。这个简单的属性具有默认值running，将其改为pause将会暂停动画。如果之后值再次改为running，那么动画就会从其暂停之处继续运行。第32页暂停动画使用animation-play-state暂停动画简略形式的动画属性以及用逗号分隔的animation-*值每个animation-*属性，可以用简略形式的动画属性同时指定几个值，简略形式的动画属性接受单个的animation-*属性的值（除animation-play-state外）。简略形式的动画属性应使用如下所示的顺序以避免出现可能的浏览器错误：(1)animation-name(2)animation-duration(3)animation-timing-function(4)animation-delay(5)animation-iteration-count(6)animation-direction(7)animation-fill-mode第33页简略形式的动画属性以及用逗号分隔的animation-*值每浏览器对CSS动画的支持作为Apple公司的又一个产品，CSS动画已经能够完全被WebKit浏览器Safari和Chrome支持。Firefox以及最新的InternetExplorer也已经增添了对CSS动画的支持，Opera也将加入这个阵营。然而，尽管有三种实现方式，但是添加无前缀版本的CSS动画还不够稳定。由于对于animation-*属性和@keyframes代码块而言都要用到浏览器前缀，加上三种渲染引擎与无前缀版本的代码，代码就会变得十分冗长。如果使用了带前缀的属性，那么在其他浏览器增加了带前缀的支持时，必须将它们加入代码当中。第34页浏览器对CSS动画的支持作为Apple公司的又一个产品，CS第35页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第35页主要内容12.1CSS的2D和3D变形第36页12.5CSS动画+JavaScript与变形一样，添加动画意味着必须决定在面对不支持动画的浏览器时如何处理。对于那些仅是增加视觉效果的小动画而言，就没有必要添加备选。但是，如果将动画作为用户体验的核心部分，就需要使用一种技术作为CSS动画的补充，JavaScript、Canvas、SMIL以及SVG，甚至AdobeFlash都可以成为这种技术。第36页12.5CSS动画+JavaScript与变形一第37页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第37页主要内容12.1CSS的2D和3D变形12.6本章小结在合适的场合使用2D变形能够巧妙地改进用户体验。CSS变换可以根据时间变化控制CSS状态的改变，如果没有这些变换的话，状态的改变会在瞬间发生。CSS变换提供了增加UI交互趣味性的易用工具。CSS3动画对于增强内容效果非常好。为了创建能产生动画的内容，还可以在canvas、SMIL+SVG、WebGL或Flash中自由选择。第38页12.6本章小结在合适的场合使用2D变形能够巧妙地改进用第12章

变形、变换和动画本章概述本章的学习目标主要内容第12章变形、变换和动画本章概述第40页本章概述回顾网络的早期阶段，Flash和JavaScript是创建那些无法单独用HTML和CSS获得的效果的两种流行方法，例如，按钮翻转、流视频的创建以及跟随在鼠标周边的图片。但是随着HTML5中<video>、<audio>以及<canvas>等元素的出现，CSS3将创建这些效果的能力内置于CSS变形、变换和动画规范当中。利用CSS3规范就可以轻易地在浏览器中添加类似Flash的动画和用户界面效果。此外，由于硬件加速，尤其是在移动设备中的引入，CSS3是添加以前不可能实现的效果的可行选择。第2页本章概述回顾网络的早期阶段，Flash和JavaSc第41页本章的学习目标了解CSS的2D和3D变形的工具了解CSS的2D和3D变换的概念了解CSS的2D和3D动画的方法第3页本章的学习目标了解CSS的2D和3D变形的工具第42页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第4页主要内容12.1CSS的2D和3D变形第43页12.1CSS的2D和3D变形变形就是在空间上对元素进行平移、旋转、缩放和斜切等基本操作，如图12-1所示。产生变形的元素不会影响其他元素，只会与其他元素发生交叠，例如position:absolute，但是它仍然会占据其默认的位置。这对于改变元素的宽度、高度、边缘等十分有利，因为这样一来布局就不会因为变形而产生改变。例如2D变换：平移（24像素,24像素）、旋转(-205°)、缩放(.75)和斜切(-18°)。每个盒子的标签也随之进行了相同的和相反的变形。第5页12.1CSS的2D和3D变形变形就是在空间上对元变形属性和变形函数CSS的值和单位变形属性和函数transform属性perspective属性perspective-origin属性transform-origin属性transform-style属性backface-visibility属性第44页项目说明Integer可在前面加上可选的+或-符号的数值，例如-1Number包括小数在内的数值，前面可加上可选的+或-符号，例如.95Percentage后面紧跟%的数值，例如33.3%Lengths长度单位(如果长度是0，则是可选的)，例如24px。长度单位包括：相对单位：em、ex、ch、rem、vw、vh、vm绝对单位：cm、mm、in、px、pt、pcangles后面紧跟角度单位的数值，例如18deg。角度单位包括deg、grad、rad和turntimes后面紧跟时间单位的数值，例如400ms。时间单位包括ms和sCSS的值和单位变形属性和变形函数CSS的值和单位第6页项目说明Intege元素变形效果变形属性是这些变形的基础，它可以有一个或多个由空格分隔的2D/3D变形函数。如果有多个变形函数，它们将按顺序进行应用。移动元素缩放元素元素的斜切矩阵变换第45页元素变形效果变形属性是这些变形的基础，它可以有一个或多个由空修改变形对象用透视和transform:perspective()函数将3D对象置于透视角度使用perspective-origin属性修改透视原点用transform-origin修改变形使用transform-style进行3D或平面变换隐藏和显示变形元素的背面第46页修改变形对象用透视和transform:perspectiv浏览器对CSS变形的支持浏览器对2D变形的支持浏览器对3D变形的支持扩展浏览器对CSS2D变形的支持第47页浏览器对CSS变形的支持浏览器对2D变形的支持第9页CSS变形的不足CSS2D和3D变形还存在一些问题。下面是一些解决技巧。WebKit浏览器无法使具有display:inline;属性的元素产生变形。当在iOS中使用transform:rotate();时，产生旋转的图像的直线边会产生锯齿。在Firefox3.5-9中，transform:matrix();中的平移值被实现为长度，而不是规范中的数字。在Opera11.60中产生变形的文本不具有抗锯齿效果。由于性能原因，3D变形在WebKit浏览器中禁用了次级像素的抗锯齿功能。第48页CSS变形的不足CSS2D和3D变形还存在一些问题。下面是第49页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第11页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画第50页CSS变换CSS动画属性一个，多个(相同的属性)可枚举属性单独的，全部当在关键帧中声明值时使用单个属性计时函数是(相同的函数)延迟是(正值/负值)CSStoanimate元素在状态改变前后的样式(两个状态)元素在关键帧内的内在状态和规则(两个或多个状态)由何者应用状态中的CSS修改，JavaScript被声明后，由状态中的CSS修改，JavaScript使用备选状态的改变是即时的什么都不会发生可重复性否是CSS变换和CSS动画之间的区别12.2CSS变换和CSS动画第12页CSS变换CS第51页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第13页主要内容12.1CSS的2D和3D变形12.3CSS变换CSSTransitions模块具有控制现有CSS属性变化的能力，使其随着时间变化从一个值变为另一个值。可以通过状态中的CSS修改来应用这些变换。变换包括的伪类有：:link、:visited、:hover、:focus、:active、:disabled、:enabled和:checked，还包括使用@mediaqueries和JavaScript，例如通过向元素添加类来使用JavaScript。第52页12.3CSS变换CSSTransitions模块具有使用transition-property设置可变换的属性transition-property允许用默认值all为变换指定一个或者多个由逗号分隔的可设置动画的CSS属性。注意具有厂商前缀的属性也需要为transition-property加上对应的厂商前缀。针对CSS变换和CSS动画的可设置动画属性使用max-width和max-height模拟具有auto值的width和height第53页使用transition-property设置可变换的属性t使用transition-duration控制变换的持续时间transition-duration属性可以设置变换的持续时间，它接受以秒(s)或者毫秒(ms)为单位的时间值。第54页三个变换持续时间的比较使用transition-duration控制变换的持续时间transition-timing-function、三次贝塞尔曲线和steps()函数transition-timing-function属性基于Bézier曲线，就是沿着一条弧运动。第55页三次Bézier曲线具有弹性的三次Bézier值transition-timing-function、三次贝使用transition-delay推迟变换的起始时间transition-delay可以推迟变换受到触发后的起始时间。与transition-duration一样，它接受以秒或毫秒为单位的时间值，当值为正时，变换的延迟由值的数量决定；值为负时，动画会根据transition-delay的值跳转开始，就好像时间已经流逝一样。第56页使用transition-delay推迟变换的起始时间tra多个变换值和简写形式的变换属性所有变换属性都可以接受由逗号分开的多个值，这样可以让多个具有不同设置的属性同时产生变换。当每个transition-*属性使用多个值时，值的顺序十分重要，因为每个属性的值都是根据其顺序进行组合。第57页多个变换值和简写形式的变换属性所有变换属性都可以接受由逗号分简写变换属性时值的排序在使用变换属性时，保持值的顺序十分重要，对于多个变换而言，是由逗号分开的值按下面组合顺序：(1)transition-property(2)transition-duration(3)transition-timing-function(4)transition-delay第58页简写变换属性时值的排序在使用变换属性时，保持值的顺序十分重要浏览器对CSS变换的支持第59页对CSS变换的浏览器支持浏览器对CSS变换的支持第21页对CSS变换的浏览器支持CSS变换的不足变换中一些问题如下所示。在将变换应用于类似:hover的链接状态时，如果将变换应用为默认状态，这样一来链接状态就会修改变换。颜色变换是在RGBa空间中进行的，这样一来，如果用的是HSLa空间的话，就会产生无法预料的结果。使用非自左乘像素颜色插值的浏览器会间接地让具有alpha通道的颜色(例如RGBa和颜色透明度)产生变换。由于性能原因，对于文本变换或动画，浏览器关闭了次级像素抗锯齿功能(WebKit)或者完全不具有抗锯齿功能(Opera)，这样会使得文字看上去发白。如果不在设置另一个样式之前触发回溯或使用延时，就无法通过使用JavaScript修改属性来应用变换。第60页CSS变换的不足变换中一些问题如下所示。第22页第61页主要内容12.1CSS的2D和3D变形12.2CSS变换和CSS动画12.3CSS变换12.4使用CSS动画制作关键帧动画12.5CSS动画+JavaScript12.6本章小结第23页主要内容12.1CSS的2D和3D变形12.4使用CSS动画制作关键帧动画CSS动画在两个部分中进行添加，如下面的代码所示。(1)包含单个关键帧的@keyframes代码块，@keyframes代码块对动画进行定义和命名。(2)用于向元素添加已命名的@keyframes动画以及控制动画行为的若干animation-*形式的属性第62页12.4使用CSS动画制作关键帧动画CSS动画在两个部分一个简单动画实例一个使用animation-name和animation-duration的简单动画示例。第63页CSS中基于关键帧的动画一个简单动画实例一个使用animation-name和ani使用@keyframes控制动画@keyframes可以创建无法使用变换创建的动画。本例十分简单，和在前面使用变换一样容易，它仅仅是在初始状态和终止状态之间产生动画。第64页使用@keyframes控制动画@keyframes可以创建使用animation-timing-function属性的计时函数animation-timing-function和transition-timing-function的使用方式相同，并且接受的值也相同。使用动画展示这些值可以获得与使用变换和transition-timing-function同样的效果。此外，还可以针对动画的不同部分使用不同的计时函数。第65页使用animation-timing-function属性的使用animation-delay修改动画的起始方式animation-delay的时间值可以用来改变动画的起始时间，它和transition-delay一样方便。当值为正时，起始的延迟时间由值的数量决定；当值为负时，动画就会根据值的数量进行跳进，就好像这段时间已经过去了一样。第66页用animation-delay延迟或者跳进动画的起始时间使用animation-delay修改动画的起始方式anim控制动画运行次数当一段动画被触发后，默认情况下只会运行一次，然后会重置为初始状态。可以用animation-iteration-count让动画运行不止一次，或者用值infinite让动画不断运行，直至浏览器窗口被关闭。第67页控制动画运行次数当一段动画被触发后，默认情况下只会运行一次，结合animation-direction前面讲了如何用animation-iteration-count增加动画运行的次数，如果运行次数大于1，那么就可以用animation-direction控制后面偶数次的动画也是从头运行到尾(值normal)，还可以用值alternate使其反向运动。第68页结合animation-direction前面讲了如何用an控制元素在动画前后的表现用animation-fill-mode控制元素在动画前后的表现。除非动画正在运行，否则它不会产生任何效果。甚至在animation-delay的值为正时也是如此——任何起始关键帧的值都只会在延迟结束后才得到应用。这也意味着动画与CSS变形不同，默认情况下它会在动画结束时返回到其原有的样式，就好像动画触发器仍然在起作用一样。这归咎于animation-fill-mode属性的默认值是none，但是值forwards、backwards和both可以控制元素在动画前后的表现。第69页控制元素在动画前后的表现用animation-fill-mo暂停动画使用animation-play-state暂停动画。这个简单的属性具有默认值