HTML5+CSS3网页设计基础教程第16章.ppt

HTML5+CSS3网页设计基础教程 第16章 设计动画 第*页 第16章 设计动画 本章概述 本章的学习目标 主要内容 第*页 本章概述 CSS3中的动画功能可以用来做出在网页上运行的动画。CSS3中的动画功能主要包括Transitions和Animations，这两种功能都可以用来制作动画效果。其中，Transitions功能支持从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画；Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果，方便制作逐帧动画。 例如，利用Transitions功能，可以通过改变background-color属性值来让背景色从一种颜色平滑过渡到另一种颜色。 第*页 本章的学习目标 掌握过渡动画的制作方法，掌握过渡属性、过渡时间、过渡延迟时间、过渡效果的设置操作。 掌握3D动画制作方法，掌握动画名称、动画时间、动画播放方式、动画延迟时间、动画播放次数以及动画播放方向的设置操作。 掌握渐变效果制作，包括Webkit渐变、Mozilla渐变、Opera渐变和IE渐变。 能够应用CSS3的动画功能制作具有一定综合度的动画效果。 第*页 主要内容 16.1 过渡动画 16.2 3D动画 16.3 渐变效果 16.4 案例综合实战 16.5 本章小结 第*页 16.1 过渡动画 16.1.1 定义过渡属性 16.1.2 定义过渡时间 16.1.3 定义过渡延迟时间 16.1.4 定义过渡效果 第*页 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是可以指定元素的某一个属性值。 第*页 16.1.2 定义过渡时间 transition-duration是用来指定元素转换过程的持续时间，即设置从旧属性换到新属性花费的时间，单位为秒。该属性的语法格式如下： transition-duration ： time [, time]* 该属性的初始值为0，适用于所有元素以及:before和:after伪元素。在默认情况下，动画过渡时间为0秒，所以当指定元素动画时，会看不到过渡的过程，直接看到结果。 第*页 16.1.3 定义过渡延迟时间 transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。该属性的语法格式如下： transition-delay ： time [, time]* 该属性的取值time为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是0，也就是变换立即执行，没有延迟。 第*页 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曲线。 第*页 主要内容 16.1 过渡动画 16.2 3D动画 16.3 渐变效果 16.4