第7单元 animation动画属性（教案4：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称animation动画属性授课班级授课时间授课类型理实一体化、新授课、综合应用课授课地点机房（有网络，配备超星教学平台）授课学时40分钟*2学时教材分析本节是CSS动画模块的核心综合内容，承接前序transform变形、transition过渡属性，是实现复杂自动动画的关键。通过乡村主题综合案例，让学生掌握关键帧定义、动画参数配置及场景应用，兼具综合性和创新性，为网页动态效果开发筑牢基础。学情分析1.前置基础：已掌握CSS基础样式、坐标系、变形及过渡属性，能独立实现平滑交互效果，具备一定代码调试能力。

2.学情特点：动手意愿强烈，对自动循环动画兴趣浓厚，对关键帧逻辑、多参数组合易混淆，复杂动画时序控制能力较弱。

3.潜在衔接：需联动变形、过渡知识，构建完整CSS动画知识体系，提升复杂效果的设计与实现能力。教学目标【知识目标】：

1.掌握@keyframes关键帧的定义方法，理解动画时序逻辑。

2.掌握animation核心参数（动画名称、时长、时间函数等）及配置规则。

【能力目标】：

1.能独立定义关键帧，配置动画参数，实现自动循环动画效果。

2.能结合变形、过渡知识，制作乡村主题综合动画，排查常见错误。

【素质目标】：

1.培养创新设计思维和严谨的逻辑调试能力。

2.提升用动态技术呈现乡村文化的综合应用能力，践行技术赋能文化传播理念。教学重点1.@keyframes关键帧的定义及动画时序逻辑梳理。

2.animation核心参数配置及与transform属性的联动应用。教学难点1.多关键帧时序控制及动画方向、循环次数的参数适配。

2.变形、过渡与动画的综合运用，优化动画流畅度及视觉效果。教学准备1.硬件：机房计算机、投影仪、鼠标（便于精准调试）。

2.软件：超星教学平台（上传课件、实操模板、案例代码、错误案例集）、Chrome浏览器、VSCode。

3.素材：乡村主题图片（风景、作物）、动画效果演示视频、分层实操任务单、综合案例参考代码。教学方法1.主导方法：BOPPPS教学法。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、小组协作创新法。板书设计animation动画属性

1.关键帧：@keyframes名称{0%/from→100%/to}

2.核心参数：名称、时长、函数、延迟、方向、循环

3.综合：联动transform，优化流畅度二、教学设计教学环节教学内容师生活动设计意图/时间第一学时（40分钟）

环节一：导入（Bridge-in）1.案例展示：播放三组乡村主题动画效果（图片自动旋转缩放、作物缓慢位移、多元素组合动画），对比过渡效果。

2.问题引导：“这些无需触发的自动动画如何实现？与过渡效果有何区别？需要哪些核心配置？”

3.引出课题：animation动画属性，说明本节课核心是掌握关键帧定义与动画参数配置，实现复杂自动动画，衔接前三节知识。教师：1.超星平台循环演示案例，引导学生观察动画时序、循环效果。

2.结合过渡知识提问，唤醒旧知，明确动画与过渡的差异。

3.明确本节课实操重点和综合应用目标。

学生：1.观察案例，感知自动动画的应用价值，区分过渡与动画差异。

2.思考问题，关联旧知，明确学习方向。设计意图：以丰富案例激发创新兴趣，联动前置知识，自然引出课题，强化知识体系衔接。

时间：5分钟环节二：目标告知（Objective）1.知识目标：掌握关键帧定义、动画参数配置及时序逻辑。

2.能力目标：独立实现基础动画，能完成变形与动画的联动实操。

3.素质目标：培养创新设计思维和逻辑调试能力。

4.重难点提示：重点为关键帧定义与参数配置，难点为时序控制及综合应用。教师：1.结合课件罗列三维目标，用不同颜色标注重难点。

2.展示基础及综合实操成果示例，让学生明确学习预期。

学生：1.记录目标和重难点，梳理学习侧重点。

2.观察成果示例，激发实操与创新动力。设计意图：明确学习方向，让学生带着目标参与实操，清晰掌握课堂核心任务。

时间：3分钟环节三：前测（Pre-assessment）1.理论提问：“transition过渡需要触发条件吗？transform中translate和rotate的作用是什么？”

2.实操小任务（5分钟）：打开VSCode，创建文件，插入乡村图片，用过渡属性实现鼠标悬浮时平滑旋转45°、缩放1.2倍（时长0.5s）。

3.结果反馈：抽查4名学生作品，纠正参数错误，强化过渡与变形联动知识，为动画学习铺垫。教师：1.口头提问，快速检测前置知识掌握情况。

2.发布实操任务，巡视指导，记录共性问题（如参数顺序错误）。

3.点评作品，针对性强化旧知，衔接动画与过渡的差异点。

学生：1.回答问题，巩固旧知。

2.完成实操任务，排查过渡与变形联动漏洞。

3.聆听点评，修正作品，做好动画学习准备。设计意图：强化新旧知识衔接，确保学生具备动画学习的前置能力，同时调动动手积极性。

时间：7分钟（提问2分钟+实操5分钟）环节四：参与式学习（Participation）1.@keyframes关键帧定义（重点）：

（1）讲解语法：@keyframes动画名称{from/0%{样式1}；to/100%{样式2}；}，说明from对应起始状态、to对应结束状态，可添加中间关键帧（如50%）。

（2）示范实操：定义“rotateAnim”关键帧，实现乡村图片从0°旋转至360°，配合transform属性编写代码，演示关键帧时序逻辑。

（3）基础实操：学生独立定义关键帧，实现图片从原大小缩放至1.5倍再还原，教师巡视纠错（重点纠正关键帧语法错误）。

2.animation核心参数基础配置：

（1）讲解核心参数：animation:动画名称时长时间函数延迟方向循环次数，逐一说明各参数含义及取值（如循环次数infinite表示无限循环）。

（2）示范实操：给上述关键帧添加动画参数“animation:scaleAnim2sease0snormalinfinite;”，演示自动循环缩放效果，修改时长、循环次数展示差异。

（3）实操练习：学生给自身关键帧配置参数，调试时长（1s、3s）和循环次数，观察效果差异，小组内互相展示。教师：1.分步讲解关键帧语法和动画参数，结合演示让学生直观理解时序逻辑。

2.引导学生调试参数，感知不同取值的效果差异，重点纠正关键帧名称不匹配、参数遗漏等问题。

3.组织小组展示，激发参与感，及时解决共性问题。

学生：1.聆听讲解，观察演示，明确关键帧与参数配置规则。

2.独立完成基础实操，调试参数，感受动画效果差异。

3.小组内展示作品，交流配置心得，巩固知识点。设计意图：从核心语法入手，循序渐进开展实操，贴合职校生具象思维特点，突破关键帧定义与基础参数配置重点。

时间：25分钟（第一学时结束）第二学时（40分钟）

环节四：参与式学习（Participation）（续）3.动画参数进阶配置（难点突破）：

（1）重点讲解进阶参数：动画方向（animation-direction，如alternate往返播放）、动画填充模式（animation-fill-mode，如forwards保持结束状态），结合乡村图片动画演示不同取值效果。

（2）对比演示：分别演示normal（正向）、alternate（往返）方向的旋转动画，让学生直观感受差异，说明适用场景。

（3）实操练习：学生修改作品，添加进阶参数，实现图片往返旋转+缩放动画，保持结束状态，教师巡视指导难点。

4.综合应用（联动旧知）：

（1）讲解思路：结合transform变形（位移、旋转、缩放）、animation动画，实现多效果叠加动画；可搭配transition过渡优化流畅度。

（2）示范实操：实现乡村图片从左侧位移至右侧（translate）、同时旋转360°、缩放1.2倍的综合动画，配置往返循环、保持结束状态。

（3）小组协作实操：2人一组，结合乡村主题，设计并实现1个综合动画（需包含2种以上变形效果+2个动画参数），教师巡视指导创新与调试。教师：1.针对进阶参数难点，通过对比演示降低理解难度，引导学生结合场景选择参数。

2.联动旧知讲解综合应用思路，提供示范案例，启发学生创新。

3.组织小组协作，鼓励创意设计，重点帮扶学困生解决参数适配、效果叠加问题。

学生：1.对比进阶参数效果，突破难点，掌握参数适配方法。

2.跟随示范梳理综合应用思路，小组协作设计并实现动画，发挥创新思维。

3.交流设计理念与调试经验，提升综合应用能力。设计意图：聚焦难点突破，通过对比演示和小组协作，强化动画与旧知的联动，提升学生综合应用与创新能力，贴合理实一体化要求。

时间：20分钟环节五：后测（Post-assessment）1.理论提问：

（1）@keyframes关键帧中from和to分别对应什么状态？animation-direction:alternate表示什么效果？

（2）如何让动画无限循环播放？

2.综合实操任务（10分钟）：

（1）新建HTML文件，插入1张乡村作物图片，实现以下效果：定义关键帧，让图片从左侧（translateX(-50px)）位移至居中、旋转180°、缩放1.3倍，配置动画时长3s、匀速、延迟0.2s、往返循环、保持结束状态。

（2）添加注释，说明关键帧逻辑及各参数含义。

3.成果验收：抽查5名学生作品，点评关键帧定义准确性、参数适配性、效果流畅度，针对时序控制、参数冲突问题集中讲解。教师：1.口头提问，重点检测难点知识掌握情况。

2.发布综合实操任务，明确要求，巡视指导时重点解决参数冲突、时序控制问题。

3.点评作品，总结共性问题，强化知识点记忆，肯定学生创新点。

学生：1.回答理论问题，梳理知识点。

2.独立完成综合实操任务，综合运用所学知识，排查难点漏洞。

3.聆听点评，修正作品，深化对动画属性的理解。设计意图：通过综合实操检测学习效果，针对性强化重难点，确保学生掌握动画属性综合应用能力，达成教学目标。

时间：15分钟环节六：总结与延伸（Summary）1.课堂总结：

（1）梳理CSS动画模块知识体系：坐标系→transform变形→transition过渡→animation动画，明确各部分衔接逻辑。

（2）核心知识点回顾：关键帧定义、动画参数配置、综合应用思路，强调重难点及常见问题排查方法。

2.知识延伸：引导学生结合乡村主题，尝试用动画属性制作简单网页Banner；推荐超星平台拓展案例，鼓励自主探究多关键帧复杂动画。教师：1.用思维导图梳理完整知识体系，帮助学生构建逻辑框架。

2.重申核心重难点，发布拓展任务，鼓励自主探究。

学生：1.跟随总结回顾全模块知识，完善笔记，梳理逻辑体系。

2.明确拓展任务，借助超星平台自主提升，巩固学习成果。设计意图：梳理全模块知识体系，强化记忆，引导学生自主拓展，提升综合应用与探究能力。

时间：5分钟（第二学时结束）三、课后作业和教学反思课后作业1.完善