Web前端开发任务式教程（HTML5+CSS3）（微课版） 课件模块8 元素过渡与动画

《Web开发任务式教程》

模块8元素过渡与动画《Web前端开发任务式教程》元素过渡与动画转换与动画能够设置特殊的网页效果，如元素造型、动画等，本模块介绍转换、过渡与动画属性，包括基本语法和典型应用。任务8.1掌握转换与过渡的语法任务8.2设计过渡效果任务8.3设计轮播图的动画元素过渡与动画学习目标【知识目标】1）掌握转换、过渡、动画属性的基本语法。2）掌握过渡设计动画的方法，以及过渡动画的应用场景。3）掌握关键帧设计动画的方法，以及关键帧动画的应用场景。【能力目标】1）能够使用动画设计网页欢迎效果。2）能够使用过渡设计幽灵按钮。3）能够使用关键帧设计轮播动画。《Web前端开发任务式教程》转换与过渡是CSS3的属性，能够设计一些特殊的网页效果，改善用户的交互式体验。本任务介绍转换与过渡属性的基本语法与用法，通过本任务的学习，应全面掌握转换与过渡属性的语法、用法及特点，并能基于转换与过渡属性设计元素造型和网页简单动画。元素过渡与动画任务8.1掌握转换与过渡的语法《Web前端开发任务式教程》元素过渡与动画8.1.1浏览器前缀转换、过渡、动画都是CSS3属性，早期版本浏览器对CSS3属性的支持程度不同，需要带浏览器前缀值才能支持，表8-1列出了浏览器与前缀值的对应关系。表8-1浏览器与前缀值的对应关系《Web前端开发任务式教程》前缀值浏览器-ms-IE浏览器-moz-Firefox浏览器-o-Opera浏览器-webkit-Chrome和Safari浏览器元素过渡与动画8.1.2转换属性1.transform属性transform属性定义元素的移动、缩放、旋转和倾斜，属性取值为转换函数。可以是二维（2D）或三维（3D）转换函数，二维转换函数如表8-2所示，三维转换函数如表8-3所示。表8-2二维转换函数《Web前端开发任务式教程》函数名说明matrix(n,n,n,n,n,n)定义2D转换，使用6个值的矩阵translate(x,y)定义2D转换，沿着X和Y轴移动元素translateX(n)定义2D/3D转换，沿着X轴移动元素translateY(n)定义2D/3D转换，沿着Y轴移动元素scale(x,y)定义2D缩放转换，参数x定义元素宽度的缩放比例，参数y定义元素高度的缩放比例，取值为负值表示反转元素后缩放scaleX(n)定义2D/3D缩放转换，参数n定义元素宽度的缩放比例，取值为负值表示反转元素后缩放scaleY(n)定义2D/3D缩放转换，参数n定义元素高度的缩放比例，取值为负值表示反转元素后缩放rotate(angle)定义2D旋转，参数angle为正值定义顺时针旋转的角度，为负值定义逆时针旋转的角度，单位为deg，表示度skew(x-angle,y-angle)定义2D倾斜转换，沿着X和Y轴包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第2个参数为空，则默认为0，参数为负表示向相反方向倾斜skewX(angle)定义2D倾斜转换，参数定义元素在X轴（水平方向）的倾斜角度skewY(angle)定义2D倾斜转换，参数定义元素在Y轴（垂直方向）的倾斜角度元素过渡与动画表8-3三维转换函数《Web前端开发任务式教程》函数名说明matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换，使用16个值的4x4矩阵translate3d(x,y,z)定义3D转换，沿着X轴、Y轴、Z轴移动元素translateZ(z)定义3D转换，沿着Z轴移动元素scale3d(x,y,z)定义3D缩放转换，参数x定义元素宽度的缩放比例，参数y定义元素高度的缩放比例，参数z定义元素Z轴的缩放比例，取值为负值表示反转元素后缩放scaleZ(z)定义3D缩放转换，沿着Z轴缩放，取值为负值表示反转元素后缩放rotate3d(x,y,z,angle)定义3D旋转rotateX(angle)定义沿X轴的3D旋转rotateY(angle)定义沿Y轴的3D旋转rotateZ(angle)定义沿Z轴的3D旋转perspective(n)定义3D转换元素距离视图的距离元素过渡与动画2.transform-origin属性transform-origin属性定义元素转换的基点位置。2D转换时，能够基于元素的x、y轴转换。3D转换时，还能基于元素的Z轴转换。各轴取值说明如表8-4所示。表8-4transform-origin属性《Web前端开发任务式教程》参数名取值说明x-axisleft、center、right、length、%定义基点被置于X轴的何处y-axistop、center、bottom、length、%定义基点被置于Y轴的何处z-axislength定义基点被置于Z轴的何处元素过渡与动画【例8-1】使用转换属性转换2张图像的显示位置，使其呈现一定的造型，造型效果如图8-1所示。《Web前端开发任务式教程》图8-1图像造型排列本例给出了所有浏览器的完整转换属性代码，本书后面仅给出Chrome和Safari浏览器的转换属性代码，请读者自行补充其他浏览器的转换属性代码。元素过渡与动画【例8-2】基于例5-13的形状绘制，使用伪元素与转换属性绘制如图8-2所示的红心造型。《Web前端开发任务式教程》图8-2红心造型元素过渡与动画8.1.3过渡属性过渡能够使元素属性在规定时间内平滑地由一种取值变化为另一种取值，产生动画效果。1.基本属性过渡基本属性有4个，相关说明如表8-5所示。表8-5过渡属性《Web前端开发任务式教程》属性名说明transition-property定义应用过渡效果的元素属性名称，取值说明如下。none：没有属性会获得过渡效果。all：默认值，所有属性都将获得过渡效果。property：应用过渡效果的元素属性名称列表，名称之间以逗号进行分隔transition-duration定义完成过渡效果需要花费的时间。取值为以秒或毫秒为单位的数值。默认值为0，表示没有过渡效果transition-timing-function定义过渡效果的速度曲线。取值说明如下。linear：使用同一个速度过渡，等于cubic-bezier(0,0,1,1)。ease：慢速开始，然后变快，慢速结束，等于cubic-bezier(0.25,0.1,0.25,1)，是默认过渡速度曲线。ease-in：以慢速开始的过渡，等于cubic-bezier(0.42,0,1,1)。ease-out：以慢速结束的过渡，等于cubic-bezier(0,0,0.58,1)。ease-in-out：以慢速开始和结束的过渡，等于cubic-bezier(0.42,0,0.58,1)。cubic-bezier(n,n,n,n)：使用cubic-bezier函数自定义过渡速度曲线transition-delay定义过渡效果延迟时间，也即过渡开始前的等待时间，取值为以秒或毫秒为单位的数值。默认值为0，表示过渡立即开始元素过渡与动画2.transition属性transition属性简写基本过渡属性，一般按照应用过渡效果的元素属性名、过渡效果完成需要花费的时间、过渡效果的速度曲线、过渡延迟时间的顺序依次设置。例如，设置一个针对元素宽度属性、用2秒完成的过渡效果的代码如下。transition:width2s;可以对元素的多个属性分别设置过渡的效果，称为过渡列表，过渡列表用逗号进行分隔。例如，设置元素宽度属性2秒完成过渡效果、高度属性3秒完成过渡效果的代码如下。transition:width2s,height3s;《Web前端开发任务式教程》过渡定义有两个必要要素，即过渡涉及的元素样式属性和完成过渡需要的时间。元素过渡与动画3.过渡的状态转换过渡涉及到元素样式属性的2种取值，每种取值设置在元素的某种状态上，在特定的条件下，元素从一种状态切换到另一种状态，完成样式属性值的变换，产生过渡动画。最常见的状态切换为从初始状态切换到鼠标悬停状态，所以，往往将元素样式属性的一种取值设置在元素本身，即初始状态上，另一种取值设置在元素的特定状态，例如鼠标悬停状态上。《Web前端开发任务式教程》过渡是元素本身的属性，所以过渡属性应定义在元素上，不要定义在元素的特定状态，例如鼠标悬停状态上，否则会出现意想不到的结果。元素过渡与动画【例8-3】使用过渡属性定义一个动画效果，div元素初始大小为120*120px，黄色背景，当鼠标悬停于div元素时，在2秒内完成属性值过渡，div元素的大小变为240*160px，颜色变为红色。图8-3a所示为div元素的初始显示效果，图8-3b为鼠标悬停后变化到的最终状态效果。a)初始显示效果b)过渡到的最终状态图8-3元素框模型与背景属性过渡《Web前端开发任务式教程》元素过渡与动画【例8-4】为例8-3的div元素增加文字，增加鼠标悬停样式，当鼠标悬停时div元素右移150px，字体放大到2em，字体动画有2秒的延时，在1秒内完成过渡，图8-4a所示为网页的初始效果，图8-4b为鼠标悬停后变化到的最终状态效果。a)初始显示效果b)过渡到的最终状态图8-4元素字号与转换属性过渡《Web前端开发任务式教程》元素过渡与动画过渡能够改善用户的交互体验，本任务基于过渡属性设计欢迎动画和幽灵按钮等典型网页效果，供网站开发参考。《Web前端开发任务式教程》任务8.2设计过渡效果元素过渡与动画8.2.1设计欢迎动画1.需求说明网站入口如果能有一个具有仪式感的欢迎动画将会很好地提升用户的体验，请设计一个如图8-5所示的动画，初始显示效果如图8-5a所示，当鼠标悬停于图像时开始动画，动画的最终显示效果如图8-5b所示。详细要求如下。1）当鼠标悬停于图像时背景立即切换到玫瑰花背景，且边框变为圆角。2）当切换到玫瑰花以后，玫瑰花用2s时间旋转360度。3）玫瑰花旋转完成后，文字用1s时间放大，并移到玫瑰花的中心。a)初始状态b)过渡到的最终状态图8-5 欢迎动画《Web前端开发任务式教程》元素过渡与动画2.项目创建与资源准备新建HTML项目，准备名字为“门.jpg”和“玫瑰花.jpg”的2个图像资源。3.HTML内容设计新建HTML文件，编写网页内容代码。4.CSS样式设计1）编写元素初始样式。2）编写鼠标悬停时，元素的最终样式。3）定义过渡属性，实现动画效果。《Web前端开发任务式教程》元素过渡与动画8.2.2设计幽灵按钮1.背景颜色变换的按钮1）初始时，按钮有边框，没有背景颜色，文字黑色显示，如图8-6a所示。2）当鼠标悬停于按钮时，按钮背景颜色柔和地切换到与边框一样的颜色，从而视觉上忽略掉元素的边框，单色显示按钮。动画结束时，绿色按钮的文字颜色修改为白色，显示效果如图8-6b所示，灰色按钮的文字颜色不作修改，仍为默认的黑色，如图8-6c所示。3）动画在0.5s时间内完成。a)初始显示

b)鼠标悬停于绿色按钮显示c)鼠标悬停于灰色按钮显示图8-6背景颜色变换的按钮《Web前端开发任务式教程》元素过渡与动画实施步骤1）新建HTML文件，编写网页内容代码。2）编写基本样式代码。3）编写鼠标悬停时按钮的样式。4）编写过渡属性代码。《Web前端开发任务式教程》元素过渡与动画2.魔幻效果按钮1）初始时，按钮背景颜色为蓝色，文字颜色为白色，如图8-7a所示。2）当鼠标悬停于按钮时，按钮背景颜色切换为透明色，文字颜色切换为蓝色。上边框从左到右逐渐变为蓝色，下边框从右到左逐渐变为蓝色，右边框从上到下逐渐变为蓝色，左边框从下到上逐渐变为蓝色。先上、下边框变换颜色，变换完成后左、右边框再变换，最终显示效果如图8-7b所示。3）动画完成时间自定义。a)初始显示

b)过渡到的最终状态图8-7魔幻按钮《Web前端开发任务式教程》元素过渡与动画实施步骤1）新建HTML文件，编写网页内容代码。2）编写基本样式代码。3）元素定位属性也可以产生动画效果，这里对元素定位属性使用过渡，编写子绝父相定位样式代码。4）编写鼠标悬停时的样式代码。5）编写过渡属性代码。《Web前端开发任务式教程》元素过渡与动画箭头效果按钮1）初始时，按钮不显示箭头，如图8-8a所示。2）当鼠标悬停于按钮时出现箭头，且箭头和文字同时左移，移动的距离不同。3）动画完成时间自定义。a)初始显示

b)过渡到的最终状态图8-8箭头效果按钮《Web前端开发任务式教程》元素过渡与动画实施步骤1）新建HTML文件，编写网页内容代码。2）编写基本样式代码。3）元素定位属性也可以产生动画效果，这里对元素定位属性使用过渡，编写子绝父相定位样式代码。4）编写鼠标悬停时的样式代码。5）编写过渡属性代码。《Web前端开发任务式教程》在任务7.2的第2个任务（7.2.2节）中，设计了轮播图的布局，本任务基于动画属性实现轮播图的动画，网页显示效果如图8-9所示。具体要求如下。1）能够轮播3幅图像，图8-9a和图8-9b为其中的2幅图像展示。2）底部水平线指示轮播图像在图库中的位置，与轮播图像位置对应的水平线蓝色显示，分别如图8-9a和图8-9b所示。3）左、右的小于号、大于号初始颜色为浅浅的蓝色，如图8-9a所示，当鼠标悬停于轮播图像时变为深蓝色，如图8-9b所示。a)第2幅图像b)第3幅图像，且鼠标悬停于轮播图像图8-9 轮播图动画展示元素过渡与动画任务8.3设计轮播图的动画《Web前端开发任务式教程》元素过渡与动画8.3.1动画关键帧@keyframes规则创建动画关键帧，一个时间节点定义元素的一组样式属性取值，由若干时间节点的若干组样式属性取值组成动画的帧。语法格式如下。@keyframesanimationname{keyframes-selector{css-styles;}}参数说明如表8-6所示。表8-6keyframes规则参数说明《Web前端开发任务式教程》参数名说明animationname定义动画的名称keyframes-selector定义动画的时间节点，是时间节点选择器，取值为时长的百分比数值，取值范围为0-100%。0%是动画的开始，100%是动画的完成。为了得到最佳的浏览器效果，应该始终定义0%和100%选择器。也可以取from（等于0%）与to（等于100%）2个值作为时间节点选择器，如果仅设置这两个时间节点，动画效果等价于过渡{css-styles}定义元素样式的声明块元素过渡与动画8.3.2动画属性与过渡一样，动画也能使元素样式属性从一种取值平滑地变化为另一种取值。但是，过渡只能给元素样式属性设置2个取值，即起始和终止值，还不够细腻。使用关键帧，动画能够为元素样式属性指定若干时间节点的取值，实现更为丰富的显示效果，从而取代图像动画、Flash动画和JavaScript动画，应用更为广泛。1.动画基本属性动画基本属性有6个，说明如表8-7所示。《Web前端开发任务式教程》元素过渡与动画表8-7动画基本属性《Web前端开发任务式教程》属性名说明animation-name定义绑定到元素的keyframes规则名称。该属性必须设置animation-delay定义动画延迟时间，取值为以秒或毫秒为单位的数值。允许负值，负值表示动画马上开始，且跳过规定时长的动画。正值定义动画开始前等待的时长，也即等待多少时间后再开始动画，默认值为0，表示立即开始动画animation-timing-function定义动画的速度曲线。取值说明如下。linear：使用同一个速度过渡，等于cubic-bezier(0,0,1,1)。ease：慢速开始，然后变快，慢速结束，等于cubic-bezier(0.25,0.1,0.25,1)，是默认动画速度曲线。ease-in：以慢速开始的动画，等于cubic-bezier(0.42,0,1,1)。ease-out：以慢速结束的动画，等于cubic-bezier(0,0,0.58,1)。ease-in-out：以慢速开始和结束的动画，等于cubic-bezier(0.42,0,0.58,1)。cubic-bezier(n,n,n,n)：使用cubic-bezier函数自定义动画速度曲线animation-iteration-count定义动画的播放次数，取值说明如下。n：播放指定次数的动画。infinite：无限次播放动画元素过渡与动画续表《Web前端开发任务式教程》属性名说明animation-direction定义动画的播放方向，取值说明如下。normal：默认值。动画正向播放，每个周期内动画向前播放，播放到结束后再从起点开始重新播放动画。alternate：动画交替正反向播放。在奇数次数（1、3、5…）正向播放，在偶数次数（2、4、6…）反向播放。反向播放时，动画按步后退，速度曲线也反向，如ease-in在反向时成为ease-out。alternate-reverse：动画反向交替正反向播放。与alternate取值的效果相反，在奇数次数反向播放，在偶数次数正反向播放animation-play-state定义动画的状态，取值说明如下。paused：暂停动画。running：播放动画animation-duration定义完成动画需要花费的时间。取值为以秒或毫秒为单位的数值。默认值为0，表示没有动画效果animation-fill-mode定义动画时间之外元素的样式，也即在动画执行之前和之后如何给动画的元素应用样式，取值说明如下。none：动画执行之前和之后不改变任何样式。forwards：元素保持动画最后一帧的样式。backwards：元素使用动画第一帧的样式。both：执行forwards和backwards的动作元素过渡与动画2.animation属性animation属性简写动画基本属性，一次设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction6个属性的值，属性取值之间用空格进行分隔。语法格式如下。animation:namedurationtiming-functiondelayiteration-countdirection;并不一定要设置全部6个属性的值，可以仅设置部分属性的值。其中，animation-name和animation-duration这2个属性的值必须设置，其余可以使用默认值。【例8-5】使用animation属性修改例8-3，实现同样的动画效果。