freeCodeCamp 响应式 Web 设计实战用 animation-fill-mode 让 CSS 动画结束后保留最终状态【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 课程中的挑战文档《Modify Fill Mode of an Animation》curriculum/challenges/english/blocks/applied-visual-design/58a7a6ebf9a6318348e2d5aa.md展开讲解animation-fill-mode: forwards的作用机制为什么 CSS 动画在结束后会“弹回”初始样式以及如何用一行声明让按钮在悬停期间保持高亮色。读完本文你将理解 CSS 动画的“填充模式”概念掌握在:hover动画场景中让动画终值持久的完整写法并了解该挑战在课程仓库中的组织方式与测试校验逻辑。1. 问题起点动画结束后按钮颜色“弹回”在 freeCodeCamp 的 Responsive Web Design响应式 Web 设计认证中applied-visual-designApplied Visual Design模块 的前两道相关挑战已经完成了基础铺垫Learn How the CSS keyframes and animation Properties Work介绍animation-name、animation-duration与keyframes的基本用法Use CSS Animation to Change the Hover State of a Button用keyframes让按钮的background-color在悬停时变为#4791d0。本文对应的挑战文档接着指出上一阶段代码存在的缺陷Thats great, but it doesnt work right yet. Notice how the animation resets after500mshas passed, causing the button to revert back to the original color. You want the button to stay highlighted.也就是说动画虽然定义了 500ms 的颜色渐变但动画播放完毕后元素的样式会立即回落到非动画状态button规则里的原始背景色#0F5897导致按钮在悬停时出现“高亮一下又变回去”的闪烁观感与“悬停期间持续高亮”的设计意图相悖。挑战给出的初始种子代码seed如下修改区域被注释明确标出style button { border-radius: 5px; color: white; background-color: #0F5897; padding: 5px 10px 8px 10px; } button:hover { animation-name: background-color; animation-duration: 500ms; /* Only change code below this line */ /* Only change code above this line */ } keyframes background-color { 100% { background-color: #4791d0; } } /style buttonRegister/button这段代码里几个关键点值得注意keyframes background-color只定义了100%一帧终帧为#4791d0没有定义0%帧。从源码结构看这是刻意的设计起始状态由元素自身的background-color: #0F5897提供CSS 引擎在动画期间负责从当前值插值到终帧值。animation-name: background-color将button:hover规则与同名keyframes规则关联起来——这一命名绑定关系在前一挑战587d78a7367417b2b2512adf.md中已做过系统讲解。animation-duration: 500ms规定动画持续 500 毫秒其中ms为毫秒单位1000ms 等于 1s。2. 核心解法animation-fill-mode: forwards挑战文档对问题的诊断结论是This can be done by setting theanimation-fill-modeproperty toforwards. Theanimation-fill-modespecifies the style applied to an element when the animation has finished.animation-fill-mode用于指定动画结束之后以及可选地动画开始之前应用哪些样式。取值为forwards时动画结束后元素会继续应用keyframes规则中最后一帧本例中为100%所定义的样式而不是回退到原始样式。在种子的修改区域内加入一行声明即可animation-fill-mode: forwards;完整的解题代码挑战文档--solutions--部分给出的标准答案为style button { border-radius: 5px; color: white; background-color: #0F5897; padding: 5px 10px 8px 10px; } button:hover { animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards; } keyframes background-color { 100% { background-color: #4791d0; } } /style buttonRegister/button此时的行为是鼠标悬停到按钮上动画播放 500ms 将背景色从#0F5897过渡到#4791d0500ms 后动画结束由于fill-mode: forwards按钮保持在#4791d0的高亮状态直到鼠标移出、:hover规则失效元素自然回到基础样式。这正是“按钮悬停高亮”这一常见交互所需要的语义动画只负责平滑过渡填充模式负责“守住”终值。3. 深入理解fill-mode 的工作机制与常用取值结合 CSS 动画模型可以进一步拆解这条声明为什么有效。CSS 动画的生命周期中动画“进行中”与“已停止”是两个阶段。动画停止后元素的样式默认遵循动画结束时的样式计算规则此时animation-fill-mode决定关键帧样式是否继续“渗透”到元素上。常用取值及其含义如下本挑战只用到了其一其余取值在后续课程挑战如“Create Visual Direction by Fading an Element from Left to Right”中会再次出现取值行为none默认动画结束/延迟期间不应用任何关键帧样式元素完全回到普通样式。本例“弹回原色”的根源forwards动画结束后持续应用最后一帧的样式直到动画元素被移除或不再匹配backwards在动画开始前延迟阶段应用第一帧的样式常用于animation-delay场景both同时具备forwards与backwards的效果本挑战中“只定义 100% 帧 forwards”的组合尤其值得品味如果 fill-mode 为默认的none那么动画结束后连100%帧的#4791d0都不会保留换成forwards后这个唯一被显式定义的终帧就成了“悬停期间按钮的稳态”。4. 挑战如何被自动校验该挑战的challengeType: 0从仓库源码看对应 challenge-types.ts 中的html 0属于“经典 HTML 挑战”viewTypes映射为classic视图、submitTypes为tests——即通过运行测试代码来判定是否通过。挑战文档的--hints--部分内嵌了三条正则断言它们就是判题依据assert.match(code,/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi); assert.match(code,/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi); assert.match(code,/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi );三条断言分别校验button:hover规则块内存在animation-fill-mode: forwards;本挑战的新增要求button:hover规则块内仍然存在animation-name: background-color;继承自前一挑战不能删改;button:hover规则块内仍然存在animation-duration: 500ms;同上。这种“增量式校验”体现了课程的设计思路每一道挑战只新增一条 CSS 声明但测试会同时守护已有声明不被破坏从而保证学习者沿着一小步、一小步地构建出完整正确的样式。断言使用的正则对空白字符做了宽松匹配\s*?因此属性的书写顺序、换行与缩进都不影响判题唯一硬性要求是三条声明都位于button:hover的选择器块之内。5. 在课程仓库中的位置与上下文该挑战文档的 frontmatter 记录了它的元数据id: 58a7a6ebf9a6318348e2d5aa title: Modify Fill Mode of an Animation challengeType: 0 forumTopicId: 301064 dashedName: modify-fill-mode-of-an-animation从 applied-visual-design.json 的challengeOrder数组可以确认58a7a6ebf9a6318348e2d5aa位于587d78a7367417b2b2512ae0Use CSS Animation to Change the Hover State of a Button之后、587d78a7367417b2b2512ae1Create Movement Using CSS Animation之前处于 CSS 动画小节的过渡位置先掌握悬停变色动画再补齐 fill-mode 让它行为正确随后进入位移、淡入淡出、无限循环等更丰富的动画场景。再往上一级看responsive-web-design.json 显示applied-visual-design是 Responsive Web Design 认证下第三个 block排在basic-html-and-html5与basic-css之后。挑战文档内的videoUrl字段则指向配套讲解视频scrimba 课程供学习者在动手前先观看概念演示。6. 小结症状button:hover上的颜色动画播放 500ms 后结束按钮背景色立即回落到#0F5897出现“高亮一下又弹回”的闪烁。根因animation-fill-mode默认取值为none动画停止后不保留任何关键帧样式。解法在button:hover中追加animation-fill-mode: forwards;使动画结束后持续应用keyframes background-color中100%帧定义的#4791d0悬停期间按钮保持高亮。工程佐证判题断言见挑战文档--hints--同时校验animation-fill-mode、animation-name、animation-duration三条声明确保增量修改不破坏既有动画配置。这条“一行 CSS 解决动画回弹问题”的实践是理解 CSS 动画生命周期延迟期 → 播放期 → 结束后填充期的一个最小完整案例也是本 block 后续animation-iteration-count、animation-timing-function等挑战的重要前置基础。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
freeCodeCamp 响应式 Web 设计实战用 animation-fill-mode 让 CSS 动画结束后保留最终状态【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 课程中的挑战文档《Modify Fill Mode of an Animation》curriculum/challenges/english/blocks/applied-visual-design/58a7a6ebf9a6318348e2d5aa.md展开讲解animation-fill-mode: forwards的作用机制为什么 CSS 动画在结束后会“弹回”初始样式以及如何用一行声明让按钮在悬停期间保持高亮色。读完本文你将理解 CSS 动画的“填充模式”概念掌握在:hover动画场景中让动画终值持久的完整写法并了解该挑战在课程仓库中的组织方式与测试校验逻辑。1. 问题起点动画结束后按钮颜色“弹回”在 freeCodeCamp 的 Responsive Web Design响应式 Web 设计认证中applied-visual-designApplied Visual Design模块 的前两道相关挑战已经完成了基础铺垫Learn How the CSS keyframes and animation Properties Work介绍animation-name、animation-duration与keyframes的基本用法Use CSS Animation to Change the Hover State of a Button用keyframes让按钮的background-color在悬停时变为#4791d0。本文对应的挑战文档接着指出上一阶段代码存在的缺陷Thats great, but it doesnt work right yet. Notice how the animation resets after500mshas passed, causing the button to revert back to the original color. You want the button to stay highlighted.也就是说动画虽然定义了 500ms 的颜色渐变但动画播放完毕后元素的样式会立即回落到非动画状态button规则里的原始背景色#0F5897导致按钮在悬停时出现“高亮一下又变回去”的闪烁观感与“悬停期间持续高亮”的设计意图相悖。挑战给出的初始种子代码seed如下修改区域被注释明确标出style button { border-radius: 5px; color: white; background-color: #0F5897; padding: 5px 10px 8px 10px; } button:hover { animation-name: background-color; animation-duration: 500ms; /* Only change code below this line */ /* Only change code above this line */ } keyframes background-color { 100% { background-color: #4791d0; } } /style buttonRegister/button这段代码里几个关键点值得注意keyframes background-color只定义了100%一帧终帧为#4791d0没有定义0%帧。从源码结构看这是刻意的设计起始状态由元素自身的background-color: #0F5897提供CSS 引擎在动画期间负责从当前值插值到终帧值。animation-name: background-color将button:hover规则与同名keyframes规则关联起来——这一命名绑定关系在前一挑战587d78a7367417b2b2512adf.md中已做过系统讲解。animation-duration: 500ms规定动画持续 500 毫秒其中ms为毫秒单位1000ms 等于 1s。2. 核心解法animation-fill-mode: forwards挑战文档对问题的诊断结论是This can be done by setting theanimation-fill-modeproperty toforwards. Theanimation-fill-modespecifies the style applied to an element when the animation has finished.animation-fill-mode用于指定动画结束之后以及可选地动画开始之前应用哪些样式。取值为forwards时动画结束后元素会继续应用keyframes规则中最后一帧本例中为100%所定义的样式而不是回退到原始样式。在种子的修改区域内加入一行声明即可animation-fill-mode: forwards;完整的解题代码挑战文档--solutions--部分给出的标准答案为style button { border-radius: 5px; color: white; background-color: #0F5897; padding: 5px 10px 8px 10px; } button:hover { animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards; } keyframes background-color { 100% { background-color: #4791d0; } } /style buttonRegister/button此时的行为是鼠标悬停到按钮上动画播放 500ms 将背景色从#0F5897过渡到#4791d0500ms 后动画结束由于fill-mode: forwards按钮保持在#4791d0的高亮状态直到鼠标移出、:hover规则失效元素自然回到基础样式。这正是“按钮悬停高亮”这一常见交互所需要的语义动画只负责平滑过渡填充模式负责“守住”终值。3. 深入理解fill-mode 的工作机制与常用取值结合 CSS 动画模型可以进一步拆解这条声明为什么有效。CSS 动画的生命周期中动画“进行中”与“已停止”是两个阶段。动画停止后元素的样式默认遵循动画结束时的样式计算规则此时animation-fill-mode决定关键帧样式是否继续“渗透”到元素上。常用取值及其含义如下本挑战只用到了其一其余取值在后续课程挑战如“Create Visual Direction by Fading an Element from Left to Right”中会再次出现取值行为none默认动画结束/延迟期间不应用任何关键帧样式元素完全回到普通样式。本例“弹回原色”的根源forwards动画结束后持续应用最后一帧的样式直到动画元素被移除或不再匹配backwards在动画开始前延迟阶段应用第一帧的样式常用于animation-delay场景both同时具备forwards与backwards的效果本挑战中“只定义 100% 帧 forwards”的组合尤其值得品味如果 fill-mode 为默认的none那么动画结束后连100%帧的#4791d0都不会保留换成forwards后这个唯一被显式定义的终帧就成了“悬停期间按钮的稳态”。4. 挑战如何被自动校验该挑战的challengeType: 0从仓库源码看对应 challenge-types.ts 中的html 0属于“经典 HTML 挑战”viewTypes映射为classic视图、submitTypes为tests——即通过运行测试代码来判定是否通过。挑战文档的--hints--部分内嵌了三条正则断言它们就是判题依据assert.match(code,/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi); assert.match(code,/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi); assert.match(code,/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi );三条断言分别校验button:hover规则块内存在animation-fill-mode: forwards;本挑战的新增要求button:hover规则块内仍然存在animation-name: background-color;继承自前一挑战不能删改;button:hover规则块内仍然存在animation-duration: 500ms;同上。这种“增量式校验”体现了课程的设计思路每一道挑战只新增一条 CSS 声明但测试会同时守护已有声明不被破坏从而保证学习者沿着一小步、一小步地构建出完整正确的样式。断言使用的正则对空白字符做了宽松匹配\s*?因此属性的书写顺序、换行与缩进都不影响判题唯一硬性要求是三条声明都位于button:hover的选择器块之内。5. 在课程仓库中的位置与上下文该挑战文档的 frontmatter 记录了它的元数据id: 58a7a6ebf9a6318348e2d5aa title: Modify Fill Mode of an Animation challengeType: 0 forumTopicId: 301064 dashedName: modify-fill-mode-of-an-animation从 applied-visual-design.json 的challengeOrder数组可以确认58a7a6ebf9a6318348e2d5aa位于587d78a7367417b2b2512ae0Use CSS Animation to Change the Hover State of a Button之后、587d78a7367417b2b2512ae1Create Movement Using CSS Animation之前处于 CSS 动画小节的过渡位置先掌握悬停变色动画再补齐 fill-mode 让它行为正确随后进入位移、淡入淡出、无限循环等更丰富的动画场景。再往上一级看responsive-web-design.json 显示applied-visual-design是 Responsive Web Design 认证下第三个 block排在basic-html-and-html5与basic-css之后。挑战文档内的videoUrl字段则指向配套讲解视频scrimba 课程供学习者在动手前先观看概念演示。6. 小结症状button:hover上的颜色动画播放 500ms 后结束按钮背景色立即回落到#0F5897出现“高亮一下又弹回”的闪烁。根因animation-fill-mode默认取值为none动画停止后不保留任何关键帧样式。解法在button:hover中追加animation-fill-mode: forwards;使动画结束后持续应用keyframes background-color中100%帧定义的#4791d0悬停期间按钮保持高亮。工程佐证判题断言见挑战文档--hints--同时校验animation-fill-mode、animation-name、animation-duration三条声明确保增量修改不破坏既有动画配置。这条“一行 CSS 解决动画回弹问题”的实践是理解 CSS 动画生命周期延迟期 → 播放期 → 结束后填充期的一个最小完整案例也是本 block 后续animation-iteration-count、animation-timing-function等挑战的重要前置基础。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
