freeCodeCamp 课程实战：用 CSS 动画让元素从左向右移动时逐渐淡出（opacity 关键帧）

freeCodeCamp 课程实战用 CSS 动画让元素从左向右移动时逐渐淡出opacity 关键帧【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文基于 freeCodeCamp 课程中的挑战文档 Create Visual Direction by Fading an Element from Left to Right 展开讲解如何在一个已有的keyframes位移动画中通过给50%关键帧添加opacity: 0.1来实现元素向右移动时逐渐淡出的视觉方向感。读完后你将掌握opacity属性在关键帧中的取值含义、如何在固定定位position: fixed元素上组合left与opacity两种属性做联动动画并理解该挑战在 freeCodeCamp Responsive Web Design 课程体系中前后知识的衔接关系。挑战目标为位移动画叠加淡出效果原始文档的描述部分--description--说明了任务背景本挑战要求你改变一个动画元素的opacity不透明度使其在到达屏幕右侧时逐渐变淡。文档原文指出在演示动画中这个带渐变背景的圆形元素会按照keyframes规则在动画进行到 50% 时移动到屏幕右侧。也就是说初始代码里已经存在一个位置移动的动画——球从视口左侧 20% 处出发在动画中点50%关键帧移动到 60% 处——本挑战要做的不是从零写动画而是在这个既有动画中叠加透明度变化让位置 透明度共同表达从左向右离去的视觉方向visual direction。任务指令--instructions--非常明确选中 id 为ball的元素在50%处添加值为 0.1 的opacity属性让元素在向右移动时逐渐淡去。对应的提示--hints--给出了课程测试用例的判定逻辑即keyframes fade规则必须在50%关键帧内同时包含left: 60%与opacity: 0.1两个属性的书写顺序不限assert.match(code,/keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi );从这条正则可以读出课程验收的两个要点opacity的值写作0.1或.1均可0?\.1表示前导0可选opacity: 0.1必须与left: 60%出现在同一个50%关键帧块内而不是写在0%或100%。初始代码seed逐行解析挑战的起始代码--seed-contents--如下共分为#ball样式规则和keyframes fade规则两部分style #ball { width: 70px; height: 70px; margin: 50px auto; position: fixed; left: 20%; border-radius: 50%; background: linear-gradient( 35deg, #ccffff, #ffcccc ); animation-name: fade; animation-duration: 3s; } keyframes fade { 50% { left: 60%; } } /style div idball/div逐项理解各属性的作用属性值作用width/height70px定义 70×70 的正方形基元border-radius50%把正方形变成圆形margin: 50px auto自动水平外边距在默认流中水平居中与left共同决定初始视觉位置position: fixed固定定位让元素相对浏览器视口定位使left: 20%表示视口宽度的 20%left: 20%水平偏移初始位置视口左侧 20% 处动画的起点background: linear-gradient(35deg, #ccffff, #ffcccc)线性渐变35° 方向上从浅青到浅粉的渐变填充即文档所称的gradient backgroundanimation-name: fade动画名把元素与下方名为fade的keyframes规则关联起来animation-duration: 3s动画时长一次完整动画周期为 3 秒这里有两个关键设计值得注意position: fixed是动画能移动的前提。CSS 的偏移属性left/right/top/bottom只有在元素具有定位如fixed、relative、absolute时才能通过改变数值产生位移效果。freeCodeCamp 同 block 的前一课 Create Movement Using CSS Animation 的原文正是这样概括的When elements have a specifiedposition, such asfixedorrelative, the CSS offset propertiesright,left,top, andbottomcan be used in animation rules to create movement. 本挑战的 seed 沿用了这一前提球是fixed定位left才能在20% → 60%之间被动画驱动。seed 的keyframes fade只有50%一个关键帧。这并非疏漏而是刻意留下的填空课程只要求你补opacity其余帧的行为交给 CSS 的插值机制下一节详述。参考解答在 50% 关键帧加入 opacity: 0.1挑战的参考解答--solutions--与 seed 的唯一差异就是在keyframes fade的50%关键帧中补上一行opacity: 0.1;style #ball { width: 70px; height: 70px; margin: 50px auto; position: fixed; left: 20%; border-radius: 50%; background: linear-gradient( 35deg, #ccffff, #ffcccc ); animation-name: fade; animation-duration: 3s; } keyframes fade { 50% { left: 60%; opacity: 0.1; } } /style div idball/div改动只有一行但效果是位移 淡出的联动动画前半程0% → 50%left从20%平滑插值到60%opacity从默认值1完全不透明插值到0.1几乎完全透明——球向右移动的同时越来越淡动画后半程50% → 100%由于没有100%关键帧CSS 会从50%的状态反向插值回到元素的静态样式left: 20%、opacity: 1即球向左飞回起点并重新变实。opacity的取值语义在 freeCodeCamp 本课系的 Decrease the Opacity of an Element 一课中有权威定义A value of 1 is opaque, which isnt transparent at all. A value of 0.5 is half see-through. A value of 0 is completely transparent.因此0.1处于接近完全透明的区间距离全透明 0 只差 10% 透明度选它而不是0的原因是保留一丝可见性让元素正在淡出离去的过程更自然若写opacity: 0元素会完全消失视觉上的方向感反而弱了。另外opacity作用于元素整体——无论是渐变背景还是内部文本会作为一个整体一起变透明这一点在上一课文档中也已说明The value given will apply to the entire element。只写一个 50% 关键帧动画为何仍然完整这是理解本挑战的核心原理。按 Learn How the CSS keyframes and animation Properties Work 一课的讲解keyframes规则通过给 0% 到 100% 之间的特定帧指定 CSS 属性来描述动画过程而元素不必显式声明0%和100%帧未显式声明的0%/100%状态默认取元素本身的样式值本例中即left: 20%、opacity: 1相邻关键帧之间或起始/结束状态与最近关键帧之间的属性值由浏览器自动线性插值。套到本挑战的具体数值上时间点leftopacity视觉状态0%起点20%元素静态值1元素静态值完全不透明停在视口左侧0% → 50%20% → 60% 插值1 → 0.1 插值向右移动且逐渐淡出50%中点60%显式声明0.1显式声明到达右侧几乎透明50% → 100%60% → 20% 插值0.1 → 1 插值返回起点并重新变实也就是说fade淡出这个动画名恰好名副其实left负责去opacity负责渐隐两者在同一段 0%→50% 区间内同步插值共同构成了从左向右淡出的视觉方向。动画属性的关联animation-name 与 keyframes 的衔接机制本挑战中animation-name: fade与keyframes fade的对应关系是整个动画系统的工作入口。按同 block 的入门课 Learn How the CSS keyframes and animation Properties Workanimation-name设置动画的名字供keyframes告知 CSS 哪些规则属于哪个动画animation-duration设置动画的持续时间keyframes用 0% 到 100% 的百分比帧精确描述动画过程中每帧的样式就像一部电影0% 是开场画面100% 是片尾字幕前的画面CSS 负责在给定时长内完成中间的过渡。该课给出的最小示例与本课结构一致#anim { animation-name: colorful; animation-duration: 3s; } keyframes colorful { 0% { background-color: blue; } 100% { background-color: yellow; } }把示例中的background-color换成left和opacity、把名字换成fade就得到了本课的骨架。该文档还强调You arent limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.——本课只用一个50%中间帧正是任意百分比帧用法的直接体现。在课程体系中定位本挑战本挑战id587d78a7367417b2b2512ae2位于 Applied Visual Design 模块。查看 applied-visual-design.json 的challengeOrder它在动画系列中的前后关系是Learn How the CSS keyframes and animation Properties Work —— 认识animation-name/animation-duration与keyframesUse CSS Animation to Change the Hover State of a Button 与 Modify Fill Mode of an Animation —— 动画的其他属性Create Movement Using CSS Animation —— 用top/left偏移属性制造位移本课的直接前置本课Create Visual Direction by Fading an Element from Left to Right—— 在位移之上叠加opacity渐变Animate Elements Continually Using an Infinite Animation Count —— 引入animation-iteration-count: infinite让本课的来回淡入淡出循环播放其后是变速动画variable rates、animation-timing-function关键字与贝塞尔曲线等进阶主题。该 block 属于 Responsive Web Design 课程superblock 结构见 responsive-web-design.jsonblock 元数据中标注helpCategory为HTML-CSSchallengeOrder中本课排在第 34 位共 44 个挑战处于视觉设计课程从静态样式走向动态表现的过渡位置前半程讲排版、色彩、渐变、定位后半程本课起系统展开 CSS 动画。可验证的自测要点如果你想在自己的环境复现并检验本挑战可以把 seed 代码--seed-contents--段原样粘贴到任意 HTML 文件观察球只左右往返移动但透明度不变的现象再按解答--solutions--段在50%关键帧内加入opacity: 0.1;确认以下行为与课程测试正则一致keyframes fade的50%块内同时存在left: 60%和opacity: 0.1顺序不限3 秒周期内球在 1.5 秒50% 时刻到达视口右侧 60% 处且几乎透明随后淡回并返回起点。课程测试的正则写法keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)本身就是一份验收清单动画名必须叫fade关键帧必须是50%两条属性必须共存于同一帧块——这也反向说明了 CSS 关键帧动画以帧块为单位组织属性的规则结构。小结这篇 freeCodeCamp 挑战文档虽然只有一行核心改动opacity: 0.1;但它串起了一条完整的知识链position: fixed使偏移属性可动画化 →animation-name/animation-duration建立元素与keyframes的关联 → 中间帧50%用属性插值描述动画过程 →opacity的 0~1 取值控制整体透明度 → 位移与透明度同帧同步变化形成视觉方向。掌握了这个模式后把opacity换成transform、background-color等任意可插值属性或将关键帧数量、animation-iteration-count做进一步变化就能派生出同 block 后续课程中的心跳、变速、贝塞尔曲线等更复杂的动画。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考