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

HTML5+CSS3网页设计基础教程第16章设计动画第1页第16章设计动画本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础教程第16章设计动画第2页本章概述CSS3中的动画功能可以用来做出在网页上运行的动画。CSS3中的动画功能主要包括Transitions和Animations，这两种功能都可以用来制作动画效果。其中，Transitions功能支持从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画；Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果，方便制作逐帧动画。例如，利用Transitions功能，可以通过改变background-color属性值来让背景色从一种颜色平滑过渡到另一种颜色。HTML5+CSS3网页设计基础教程第16章设计动画第3页本章的学习目标掌握过渡动画的制作方法，掌握过渡属性、过渡时间、过渡延迟时间、过渡效果的设置操作。掌握3D动画制作方法，掌握动画名称、动画时间、动画播放方式、动画延迟时间、动画播放次数以及动画播放方向的设置操作。掌握渐变效果制作，包括Webkit渐变、Mozilla渐变、Opera渐变和IE渐变。能够应用CSS3的动画功能制作具有一定综合度的动画效果。HTML5+CSS3网页设计基础教程第16章设计动画第4页主要内容16.1过渡动画16.23D动画16.3渐变效果16.4案例综合实战16.5本章小结HTML5+CSS3网页设计基础教程第16章设计动画第5页16.1过渡动画16.1.1定义过渡属性16.1.2定义过渡时间16.1.3定义过渡延迟时间16.1.4定义过渡效果HTML5+CSS3网页设计基础教程第16章设计动画第6页16.1.1定义过渡属性transition-property属性用来定义转换动画的CSS属性名称，如background-color属性。该属性的语法格式如下：transition-property：none|all|[IDENT][','IDENT]*transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。HTML5+CSS3网页设计基础教程第16章设计动画第7页16.1.2定义过渡时间transition-duration是用来指定元素转换过程的持续时间，即设置从旧属性换到新属性花费的时间，单位为秒。该属性的语法格式如下：transition-duration：time[,time]*该属性的初始值为0，适用于所有元素以及:before和:after伪元素。在默认情况下，动画过渡时间为0秒，所以当指定元素动画时，会看不到过渡的过程，直接看到结果。HTML5+CSS3网页设计基础教程第16章设计动画第8页16.1.3定义过渡延迟时间transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。该属性的语法格式如下：transition-delay：time[,time]*该属性的取值time为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认大小是0，也就是变换立即执行，没有延迟。HTML5+CSS3网页设计基础教程第16章设计动画第9页16.1.4定义过渡效果transition-timing-function的值允许开发人员根据时间的推进去改变属性值的变换速率，也就是定义过渡动画的效果，其基本语法格式如下：transition-timing-function：ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(number,number,number,number)[,ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(number,number,number,number)]*transition-timing-function有6个可能值：►ease：过渡效果逐渐变慢。默认值。►linear：匀速过渡效果。。►ease-in：加速过渡效果。►ease-out：减速过渡效果。►ease-in-out：过渡效果首先是加速，然后减速。►cubic-bezier：该值允许自定义一个时间曲线，即特定的cubic-bezier曲线。HTML5+CSS3网页设计基础教程第16章设计动画第10页主要内容16.1过渡动画16.23D动画16.3渐变效果16.4案例综合实战16.5本章小结HTML5+CSS3网页设计基础教程第16章设计动画第11页16.23D动画16.2.1定义动画名称16.2.2定义动画时间16.2.3定义动画播放方式16.2.4定义动画延迟时间16.2.5定义动画播放次数16.2.6定义动画播放方向16.2.7控制播放状态16.2.8翻转的图片HTML5+CSS3网页设计基础教程第16章设计动画第12页16.2.1定义动画名称animation-name用来定义一个动画的名称，基本语法格式如下：animation-name:none|IDENT[,none|IDENT]*;其中，IDENT是由Keyframes创建的动画名，换句话说，此处的IDENT要和Keyframes中的IDENT一致，如果不一致，将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外，这个属性和前面所介绍的transition一样，可以同时附几个animation给一个元素，只需要用逗号“，”隔开。HTML5+CSS3网页设计基础教程第16章设计动画第13页16.2.2定义动画时间animation-duration用来指定元素播放动画所持续的时间长短，基本语法格式如下：animation-duration:time[,time]*其中，time为数值，单位为s（秒），其默认值为0。这个属性和transition中的transition-duration使用方法一样。HTML5+CSS3网页设计基础教程第16章设计动画第14页16.2.3定义动画播放方式animation-timing-function是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式，基本语法格式如下：animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(number,number,number,number)[,ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(number,number,number,number)]*和transition中的transition-timing-function一样，animation-timing-function具有以下6种变换方式：ease、ease-in、ease-out、ease-in-out、linear和cubic-bezier，使用方法与transition相同。HTML5+CSS3网页设计基础教程第16章设计动画第15页16.2.4定义动画延迟时间animation-delay用来指定元素动画开始时间，即动画延迟播放时间，基本语法格式如下：animation-delay:time[,time]*其中，time为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。HTML5+CSS3网页设计基础教程第16章设计动画第16页16.2.5定义动画播放次数animation-iteration-count用来指定元素播放动画的循环次数，基本语法格式如下：animation-iteration-count:infinite|number[,infinite|number]*其中，取值number为数字，其默认值为1；infinite为无限次数循环。HTML5+CSS3网页设计基础教程第16章设计动画第17页16.2.6定义动画播放方向animation-direction用来指定元素动画播放的方向，基本语法格式如下：animation-direction:normal|alternate[,normal|alternate]*其中，有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，其作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。HTML5+CSS3网页设计基础教程第16章设计动画第18页16.2.7控制播放状态animation-play-state主要用来控制元素动画的播放状态，基本语法格式如下：animation-play-state:running|paused[,running|paused]*其中，主要有running和paused两个值。running为默认值。他们的作用就类似于音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。HTML5+CSS3网页设计基础教程第16章设计动画第19页16.2.8翻转的图片本节借助animation属性来设计自动翻转的图片效果，该效果模拟2D平面中实现3D翻转，在这个动画中，图片在X轴上逐渐压缩，然后水平翻转图片，在2D平面中做出3D翻转效果。详情见【例16-5】翻转的图片。HTML5+CSS3网页设计基础教程第16章设计动画第20页主要内容16.1过渡动画16.23D动画16.3渐变效果16.4案例综合实战16.5本章小结HTML5+CSS3网页设计基础教程第16章设计动画第21页16.3渐变效果16.3.1线性渐变在Webkit下的应用16.3.2线性渐变在Mozilla下的应用16.3.3线性渐变在Opera下的应用16.3.4线性渐变在IE下的应用HTML5+CSS3网页设计基础教程第16章设计动画第22页16.3.1线性渐变在Webkit下的应用Webkit是第一个支持渐变的浏览器引擎，其支持渐变的方法如下：-webkit-linear-gradient([point||angle,]?stop,stop[,stop]*)//新的写法-webkit-gradient(type,point[,radius]?,point[,radius]?[,stop]*)//传统写法webkit-gradient是webkit引擎对渐变的实现参数，一共有5个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如lefttop（左上角）和leftbottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.