《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第20课 动画效果的实现

203421第203421第课动画效果的实现的基基本本PAGE62020动画效果的实现第课PAGE720动画效果的实现第20动画效果的实现第课PAGE1

课题动画效果的实现课时2课时（90min）教学目标知识技能目标：（1）掌握关键帧的设置方法（2）了解动画效果的相关属性（3）掌握制作动画片段的方法思政育人目标：（1）培养学生掌握信息的思维，通过搜集的信息去解决问题（2）在学习中提高探索能力，帮助学生不断的提高探索意识教学重难点教学重点：关键帧的设置方法、动画效果的相关属性教学难点：制作动画片段的方法教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（24min）→活动环节（15min）第2节课：导入新知（4min）→知识讲解（24min）→课堂练习（13min）→课堂小结（2min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况知识预热

（4min）【教师】介绍动画效果的作用，引出新知识点使用transition属性只能在一个开始值与一个结束值之间添加过渡效果，无法设置中间值，而CSS3中的动画功能不仅可以制作出过渡效果，还可以通过设置关键帧制作变化多样的动画片段【学生】聆听、思考从动画效果的作用入手，让学生联想到网页中的动画操作，激发学生的求知欲知识讲解

（24min）【教师】提问学生问题【学生】思考、回答【教师】总结学生回答关键帧制作动画必须先设置关键帧，一个关键帧代表动画变化过程中的一个状态。在CSS3中，使用@keyframes命令定义关键帧，具体格式为：@keyframesname{selector{css-styles;}}其中，name表示动画名称；selector表示关键帧的时间位置，也就是动画时长的百分比，还可以使用参数from（等价于0%）和to（等价于100%）表示动画的开始和结束；css-styles表示对应关键帧的样式属性，可以设置多个属性。【教师】讲述动画效果相关属性动画效果相关属性1．动画名称在CSS3中，使用animation-name属性设置要应用的动画名称，具体格式为：animation-name:name|none;其中，name表示动画名称，属性值为想要应用的@keyframes动画名称，none表示不应用或取消动画。2．动画时间在CSS3中，使用animation-duration属性设置动画效果播放一次的时长，具体格式为：animation-duration:time;设置方法与transition-duration属性相同。3．动画的速度曲线在CSS3中，使用animation-timing-function属性设置动画效果的速度曲线，具体格式为：animation-timing-function:cubiczier(n,n,n,n)|liner|ease|

ease-in|ease-out;设置方法与transition-timing-function相同。4．延迟时间在CSS3中，使用animation-delay属性设置动画开始之前需要等待的时间，具体格式为：animation-delay:time;设置方法与transition-duration属性相同。5．播放次数在CSS3中，使用animation-iteration-count属性设置动画播放的次数，具体格式为：animation-iteration-count:number|infinite;其中，number表示动画播放的次数，属性值为正整数，默认值为1；infinite表示循环播放。【教师】演示【例10-7】操作流程，实现图10-21的效果制作带有动画效果的照片墙，页面效果如图10-21所示。图10-21照片墙的页面效果（1）在DW中打开本书配套素材“项目10”→“photo.html”文档，该文档中已经创建了div元素，并在其中插入了4个定义了样式的图像元素，页面效果如图10-22所示。图10-22照片墙的页面效果（2）在<style>标签中添加以下代码，设置鼠标指针移动至图像元素上时的动画效果。img:hover{animation:move1.5s;}/*设置鼠标指针移动至图像元素上时应用动画move，时长为1.5秒*/@keyframesmove{ 25%{transform:rotateY(5deg);}/*设置第一个关键帧的3D变形效果为绕y轴顺时针旋转5度*/ 75%{transform:rotateY(-5deg);}}/*设置第二个关键帧的3D变形效果为绕y轴逆时针旋转5度*//*该动画效果为：当鼠标指针移动至图像元素上时，图像元素在三维坐标系中先绕y轴顺时针旋转5度再逆时针旋转10度（先旋转5度变为rotateY(0)，再继续旋转5度），最后恢复原状，总时长共1.5秒*/【学生】聆听、思考、理解通过讲解知识点，让学生了解动画效果的基本功能活动环节

（15min）【教师】布置活动内容【学生】参与趣味活动【教师】多媒体播放小组动画，讲解小组内容【学生】聆听老师讲解，做好课堂笔记通过课堂练习，巩固所学知识，并将所学知识与实际相结合第二节课新知导入

（4min）【教师】复习之前所讲的内容，引出新的知识点前面的一节课，已经讲述了关键帧的操作以及动画效果的相关属性，包括动画名称、动画时间、动画的速度曲线、延迟时间和播放次数，本节课将充分利用已经学习的知识，制作动画片段【学生】聆听、思考通过对上节课知识点的复习，指出后续的操作流程，引出新的知识点预备知识

（26min）【教师】讲述制作动画片段制作动画片段使用关键帧不仅能够实现元素的动态效果，还能结合图像元素与背景属性等制作动画片段。（1）制作北极熊走路动画片段在DW中打开本书配套素材“项目10”→“animation.html”文档，该文档中已经创建好div元素并为其设置了背景图像，页面效果如图10-24所示。图10-24设置动画前的页面效果（2）文档中的div元素就是帧动画的“舞台”，使用关键帧设置其背景图像显示位置的变化，就能够制作出北极熊原地走路的动画效果。该动画使用的背景图像（宽度为1000px）如图10-25所示。图10-25div元素的背景图像（3）在<style>标签中添加以下代码，设置开始和结束的关键帧及样式。@keyframesmove{ 0%{background-position:00;}/*设置第一个关键帧的背景图像显示位置*/ 100%{background-position:-1000px0;}}/*设置第二个关键帧的背景图像显示位置向左侧移动1000px*/（4）该动画共8个动作，每个动作对应的背景图像区域占总宽度的八分之一，可设置该动画开始与结束关键帧之间共移动8次（浏览器自动将背景图像的移动过程分8次完成，每次移动125px）。在div{…}中添加以下代码，为div元素应用动画效果。animation:move1ssteps(8,end)infinite;/*为div元素应用动画move，时长为1秒，两个关键帧之间共8帧，以第一帧为动画开始，循环播放*/【学生】聆听、理解、思考【教师】询问学生，是否有不理解的地方【学生】提问、记录【教师】回答学生问题通过讲解知识点，让学生深刻了解制作动画片段的操作课堂练习

（13min）【教师】布置课堂练习内容为“书店简介”页面侧边栏中的链接文字设置动画本任务实施将通过为“书店简介”页面侧边栏中的链接文字

设置动画效果，练习为网页元素设置动画效果的方法【教师】分析课堂内容（1）在样式文档中添加以下代码，设置动画contain3的效果@keyframescontain3{ 20%{transform:rotateY(20deg);}/*设置第一个关键帧的3D变形效果为绕y轴顺时针旋转20度*/ 80%{transform:rotateY(-20deg);}}/*设置第二个关键帧的3D变形效果为绕y轴逆时针旋转20度*/（2）继续在样式文档中的#contain3ullia:hover{…}内添加以下代码，将动画contain3应用于侧边栏中的链接文字animation:contain31s;/*将动画contain3应用于侧边栏中的链接文字，时长为1秒*/【学生】完成课堂练习【教师】巡视课堂，对学生进行答疑和帮助【教师】公布课堂练习答案【学生】对照答案，修改自身内容通过课堂练习，加强对动画操作的熟练度课堂小结

（2min）【教师】简要总结本章的知识要点本节课学习了关键帧的设置方法、动画效果