HTML5+CSS3网页设计基础教程第16章-设计动画

1、第1页第16章 设计动画本章概述 本章的学习目标主要内容第2页本章概述CSS3中的动画功能可以用来做出在网页上运行的动画。CSS3中的动画功能主要包括Transitions和Animations，这两种功能都可以用来制作动画效果。其中，Transitions功能支持从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画；Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果，方便制作逐帧动画。例如，利用Transitions功能，可以通过改变background-color属性值来让背景色从一种颜色平滑过渡到另一种颜色。第3页本章的学习目标掌握过渡动画的制作

2、方法，掌握过渡属性、过渡时间、过渡延迟时间、过渡效果的设置操作。掌握3D动画制作方法，掌握动画名称、动画时间、动画播放方式、动画延迟时间、动画播放次数以及动画播放方向的设置操作。掌握渐变效果制作，包括Webkit渐变、Mozilla渐变、Opera渐变和IE渐变。能够应用CSS3的动画功能制作具有一定综合度的动画效果。第4页主要内容16.1 过渡动画16.2 3D动画 16.3 渐变效果16.4 案例综合实战16.5 本章小结 第5页16.1 过渡动画16.1.1 定义过渡属性16.1.2 定义过渡时间16.1.3 定义过渡延迟时间16.1.4 定义过渡效果第6页16.1.1 定义过渡属性tr

3、ansition-property属性用来定义转换动画的CSS属性名称，如background-color属性。该属性的语法格式如下：transition-property ： none | all | , *transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。第

4、7页16.1.2 定义过渡时间transition-duration是用来指定元素转换过程的持续时间，即设置从旧属性换到新属性花费的时间，单位为秒。该属性的语法格式如下：transition-duration ： , * 该属性的初始值为0，适用于所有元素以及:before和:after伪元素。在默认情况下，动画过渡时间为0秒，所以当指定元素动画时，会看不到过渡的过程，直接看到结果。第8页16.1.3 定义过渡延迟时间transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。该属性的语法格式如下：transition-

5、delay ： , * 该属性的取值为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是0，也就是变换立即执行，没有延迟。第9页16.1.4 定义过渡效果transition-timing-function的值允许开发人员根据时间的推进去改变属性值的变换速率，也就是定义过渡动画的效果，其基本语法格式如下：transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-be

6、zier(, , , ) , ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )* transition-timing-function有6个可能值：ease：过渡效果逐渐变慢。默认值。linear：匀速过渡效果。ease-in：加速过渡效果。ease-out：减速过渡效果。ease-in-out：过渡效果首先是加速，然后减速。cubic-bezier：该值允许自定义一个时间曲线，即特定的cubic-bezier曲线。第10页主要内容16.1 过渡动画16.2 3D动画 16.3 渐变效果16.4 案例

7、综合实战16.5 本章小结 第11页16.2 3D动画 16.2.1 定义动画名称16.2.2 定义动画时间16.2.3 定义动画播放方式16.2.4 定义动画延迟时间16.2.5 定义动画播放次数16.2.6 定义动画播放方向16.2.7 控制播放状态16.2.8 翻转的图片第12页16.2.1 定义动画名称animation-name用来定义一个动画的名称，基本语法格式如下： animation-name: none | IDENT,none | IDENT*;其中，IDENT是由Keyframes创建的动画名，换句话说，此处的IDENT要和Keyframes中的IDENT一致，如果不一致

8、，将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外，这个属性和前面所介绍的transition一样，可以同时附几个animation给一个元素，只需要用逗号“，”隔开。第13页16.2.2 定义动画时间animation-duration用来指定元素播放动画所持续的时间长短，基本语法格式如下：animation-duration: ,*其中，为数值，单位为s（秒），其默认值为0。这个属性和transition中的transition-duration使用方法一样。第14页16.2.3 定义动画播放方式animation-timing-function是指元素

9、根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式，基本语法格式如下：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) , ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )* 和transition中的transition-timing-function一样，animation-timing-function具有以下6种变换方式：ease、e

10、ase-in、ease-out、ease-in-out、linear和cubic-bezier，使用方法与transition相同。第15页16.2.4 定义动画延迟时间animation-delay用来指定元素动画开始时间，即动画延迟播放时间，基本语法格式如下：animation-delay: ,*其中，为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。第16页16.2.5 定义动画播放次数animation-iteration-count用来指定元素播放动画的循环次数，基本语法格式如下：animation-iteration-count:

11、infinite | , infinite | * 其中，取值为数字，其默认值为1；infinite为无限次数循环。第17页16.2.6 定义动画播放方向animation-direction用来指定元素动画播放的方向，基本语法格式如下：animation-direction: normal | alternate , normal | alternate* 其中，有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，其作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。第18页16.2.7 控制播放状态animation-p

12、lay-state主要用来控制元素动画的播放状态，基本语法格式如下：animation-play-state:running | paused , running | paused* 其中，主要有running和paused两个值。running为默认值。他们的作用就类似于音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。第19页16.2.8 翻转的图片本节借助animation属性来设计自动翻转的图片效果，

13、该效果模拟2D平面中实现3D翻转，在这个动画中，图片在X轴上逐渐压缩，然后水平翻转图片，在2D平面中做出3D翻转效果。详情见【例16-5】翻转的图片。第20页主要内容16.1 过渡动画16.2 3D动画 16.3 渐变效果16.4 案例综合实战16.5 本章小结 第21页16.3 渐变效果16.3.1 线性渐变在Webkit下的应用16.3.2 线性渐变在Mozilla下的应用16.3.3 线性渐变在Opera下的应用16.3.4 线性渐变在IE下的应用第22页16.3.1 线性渐变在Webkit下的应用Webkit是第一个支持渐变的浏览器引擎，其支持渐变的方法如下：-webkit-linea

14、r-gradient( | ,? , , * )/新的写法-webkit-gradient(, , ?, , ? , *)/传统写法webkit-gradient是webkit引擎对渐变的实现参数，一共有5个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为

15、起点，0.5为中点，1为结束点；第二个表示该点的颜色。第23页16.3.2 线性渐变在Mozilla下的应用Firefox浏览器从3.6版本开始支持渐变设计。Gecko引擎定义了两个私有函数，分别用来设计线性渐变和径向渐变。基本语法格式如下：-moz-linear-gradient( | ,? , , * )定义渐变起始点，取值包含数值、百分比，也可以使用关键字。参数定义直线渐变的角度。参数定义步长。第24页16.3.3 线性渐变在Opera下的应用线性渐变在Opera下的使用语法如下：-o-linear-gradient( | ,? , , ); /* Opera 11.10+ */其中的各

16、项参数与Mozilla下的渐变参数相同。例如，要在Opera浏览器下实现如图16-8所示的渐变效果，代码如下：background: -o-linear-gradient(top,#ccc, #000);第25页16.3.4 线性渐变在IE下的应用IE依靠滤镜实现渐变，语法格式如下：filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE*/-ms-filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE8+*/其中，参数startColorstr表示起点的颜色，endColorstr表示终点颜色。Gradien