如何让自定义属性参与过渡动画？需要满足哪些条件？
围绕“如何让自定义属性参与过渡动画？需要满足哪些条件”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明需要注册属性（如@property）并指定初始值，或值类型已知，且过渡代理，不深入到注册方式细节。
核心关键词CSS custom property transition animation
面试知识索引 · 分类、标签与搜索
CSS · 动画面试题，44 道完整答案
CSS · 动画面试题第 1 页，显示第 1–44 题，共找到 44 道完整解析，可继续按分类、标签与关键词缩小范围。
44筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
当同时存在带 !important 和不带 !important 的规则时，默认的层叠优先级顺序是什么？
CSS !important 优先级怎么排？解释普通与重要声明的来源顺序、@layer 反转规则、内联样式和动画过渡的边界，并用可运行 HTML 示例定位样式冲突。
核心关键词CSS !important cascade precedence order - 0003
用 animation-play-state: paused 暂停动画时，如果中途修改关键帧，动画会如何表现？
围绕“用 animation-play-state: paused 暂停动画时，如果中途修改关键帧，动画会如何表现”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明暂停时修改关键帧对后续播放的影响，并关注状态保持与重排。
核心关键词CSS animation-play-state 暂停时修改关键帧 - 0004
交替动画中 animation-direction: alternate 与 reverse 分别如何改变关键帧的执行顺序？
本文对比 animation-direction 的 alternate 与 reverse 如何影响关键帧的执行顺序：alternate 奇偶轮交替，reverse 每轮都倒序；并通过场景、边界和误区给出判断依据。
核心关键词CSS animation-direction alternate 与 reverse 区别 - 0005
动画的 animationstart、animationend 与 animationiteration 事件分别在什么情况下触发？
围绕“动画的 animationstart、animationend 与 animationiteration 事件分别在”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明事件触发顺序与延迟影响以及循环,不讨论 JS API 监听方式。
核心关键词CSS animationstart animationend animationiteration 触发时机 - 0006
animation-fill-mode: backwards 与 both 在动画尚未开始时的样式表现有何差异？
本题解释 animation-fill-mode 中 backwards 与 both 在动画延迟期间的表现差异，核心结论是延迟期间两者相同，区别仅在动画结束后。通过具体场景和判断边界帮助理解如何选择。
核心关键词CSS animation-fill-mode backwards 与 both 区别 - 0007
如何让动画无限循环并且让元素在每次循环之间保持一定延迟？
本题说明animation-delay不能控制循环间隔，并给出将延迟并入动画时长、通过关键帧制造空转段的实现。同时指出状态未闭合时会产生跳变，可用animation-direction或二段式结构规避。
核心关键词CSS animation 无限循环 每次循环加延迟 - 0008
在关键帧动画中，关键帧选择器百分比与 from/to 如何对应？如果只有部分百分比会怎样？
围绕“在关键帧动画中，关键帧选择器百分比与 from/to 如何对应？如果只有部分百分比会怎样”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要讲清述 from/to 等价于 0%/100%，并补全缺失关键帧的插值行为。
核心关键词CSS keyframes 百分比 from to 对应关系 - 0009
animation-play-state: paused 与 animation-delay 中设置负值对动画开始时间的影响有何不同？
围绕“animation-play-state: paused 与 animation-delay 中设置负值对动画开始时”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较暂停状态保持与负延迟快进。
核心关键词CSS animation-play-state 与负 animation-delay 区别 - 0010
如何用 CSS 让动画进度与滚动位置联动？当前浏览器原生支持的注意事项是什么？
围绕“如何用 CSS 让动画进度与滚动位置联动？当前浏览器原生支持的注意事项是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕涉及 animation-timeline 与 scroll-timeline。
核心关键词CSS scroll-timeline 滚动驱动动画 - 0011
backdrop-filter 与 filter 有何区别？backdrop-filter 对元素背景的模糊近似原理是什么？
围绕“backdrop-filter 与 filter 有何区别？backdrop-filter 对元素背景的模糊近似原理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖区分作用于本身与背景。
核心关键词CSS backdrop-filter 与 filter 区别 - 0012
backface-visibility: hidden 在 3D 卡片翻转中解决什么问题？
围绕“backface-visibility: hidden 在 3D 卡片翻转中解决什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明防止背面显示镜面内容。
核心关键词CSS backface-visibility 卡片翻转 - 0013
在哪些情况下会创建独立的合成层？如何利用 will-change 提升动画性能？
围绕“在哪些情况下会创建独立的合成层？如何利用 will-change 提升动画性能”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖列出常见触发条件，并说明过度使用 will-change 反而带来内存开销。
核心关键词CSS will-change 合成层 创建条件 - 0014
conic-gradient 与 repeating-conic-gradient 在绘制饼图或仪表盘时有什么关键差别？
围绕“conic-gradient 与 repeating-conic-gradient 在绘制饼图或仪表盘时有什么关键差”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖明确一个渐变是否重复。
核心关键词CSS conic-gradient 与 repeating-conic-gradient 区别 - 0015
在 CSS 动画中频繁修改 CSS 自定义属性（属性）会导致性能问题吗？为什么推荐避免？
围绕“在 CSS 动画中频繁修改 CSS 自定义属性（属性）会导致性能问题吗？为什么推荐避免”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖指出修改自定义属性可能引发大量样式计算。
核心关键词CSS 动画中修改自定义属性 性能问题 - 0016
给图片应用 filter: grayscale() 后如何用 transition 实现平滑去色？会有什么性能瓶颈？
围绕“给图片应用 filter: grayscale() 后如何用 transition 实现平滑去色？会有什么性能瓶颈”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕强调过渡 filter 会持续重新计算像素，建议配合开关，不深入 GPU 加速原理。
核心关键词CSS filter grayscale 过渡动画 性能 - 0017
filter 属性会继承给子元素吗？实际中的视觉影响如何？
围绕“filter 属性会继承给子元素吗？实际中的视觉影响如何”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖明确 filter 不继承但在父级应用影响整个渲染。
核心关键词CSS filter 是否继承 子元素视觉影响 - 0018
给父元素设置 filter 会创建新的层叠上下文，这对固定定位的子元素有何影响？
围绕“给父元素设置 filter 会创建新的层叠上下文，这对固定定位的子元素有何影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 fixed 定位子元素被限制在父级层叠上下文内，不解释 z-index 排序规则。
核心关键词CSS filter 层叠上下文 fixed 子元素影响 - 0019
linear-gradient 的角度取值是如何影响颜色过渡方向的？请说明 0deg、90deg 的对应方向。
围绕“linear-gradient 的角度取值是如何影响颜色过渡方向的？请说明 0deg、90deg 的对应方向”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释角度与渐变线的方向关系。
核心关键词CSS linear-gradient 角度与渐变方向 - 0020
在 linear-gradient 中，如果多个色标处于同一位置，颜色会产生硬边效果，其原理是什么？
围绕“在 linear-gradient 中，如果多个色标处于同一位置，颜色会产生硬边效果，其原理是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释同一位置色标产生突变，不介绍具体实现技巧。
核心关键词CSS 渐变色标同位置 硬边效果原理 - 0021
如何用 conic-gradient 模拟圆环进度条？与 border-radius 结合时需要注意什么？
围绕“如何用 conic-gradient 模拟圆环进度条？与 border-radius 结合时需要注意什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕描述用 mask 或旋转实现缺口。
核心关键词CSS conic-gradient 圆环进度条 - 0022
当关键帧中设置了不可插值属性（如 display）时，浏览器如何处理？
围绕“当关键帧中设置了不可插值属性（如 display）时，浏览器如何处理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释不可插值属性会在关键帧处跳变，不覆盖自定义动画属性。
核心关键词CSS keyframes 不可插值属性 display 处理 - 0023
当元素同时使用 translate, scale, rotate 等多个变换时，它们应用的先后顺序如何影响最终结果？
围绕“当元素同时使用 translate, scale, rotate 等多个变换时，它们应用的先后顺序如何影响最终结果”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明书写顺序从右到左影响矩阵组合，不推导矩阵数学具体表达式。
核心关键词CSS transform 多函数顺序与矩阵乘法 - 0024
如何用 background-clip: text 为文字施加渐变颜色？有哪些兼容性注意事项？
围绕“如何用 background-clip: text 为文字施加渐变颜色？有哪些兼容性注意事项”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 clip 原理与需要加前缀或 fallback。
核心关键词CSS background-clip text 渐变文字 - 0025
在使用 prefers-reduced-motion 媒体查询覆盖动画时，为什么建议保留原样式而不直接删除 transition/animation？
围绕“在使用 prefers-reduced-motion 媒体查询覆盖动画时，为什么建议保留原样式而不直接删除 tran”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖从渐进增强角度解释提供静止替代方案，而不是简单禁用所有动效。
核心关键词prefers-reduced-motion 覆盖动画 可访问性 - 0026
radial-gradient 如何设置椭圆的中心与形状？ellipse 和 circle 的区别是什么？
围绕“radial-gradient 如何设置椭圆的中心与形状？ellipse 和 circle 的区别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比两个形状关键字及大小参数，不覆盖色标细节。
核心关键词CSS radial-gradient ellipse 与 circle 区别 - 0027
除了 transition 和 animation，如何将 prefers-reduced-motion 用于优化滚动行为或 JS 动画？
围绕“除了 transition 和 animation，如何将 prefers-reduced-motion 用于优化滚”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明在 CSS scroll-behavior 和 JS 中的联合使用，不覆盖完整媒体查询用法。
核心关键词prefers-reduced-motion 优化滚动与 JS 动画 - 0028
用 animation 实现打字机效果时，关键帧 steps() 与线性 transition 有什么核心区别？
围绕“用 animation 实现打字机效果时，关键帧 steps() 与线性 transition 有什么核心区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 steps 提供离散跳变，不覆盖具体打字效果代码。
核心关键词CSS steps() 打字机效果 - 0029
CSS 中 perspective 与 perspective-origin 对 3D 变换的可视效果有何影响？
围绕“CSS 中 perspective 与 perspective-origin 对 3D 变换的可视效果有何影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明观察点与消失点如何影响三维效果。
核心关键词CSS perspective 与 perspective-origin 3D 效果 - 0030
transform-origin 如何影响 rotate 或 scale 的变换效果？请用示例说明。
围绕“transform-origin 如何影响 rotate 或 scale 的变换效果？请用示例说明”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 transform-origin 如何作为变换的参考点。
核心关键词CSS transform-origin 对 rotate scale 的影响 - 0031
父元素 transform 会影响其子元素的固定定位或绝对定位吗？为什么？
围绕“父元素 transform 会影响其子元素的固定定位或绝对定位吗？为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 transform 使父级成为子元素的包含块，不覆盖 position 常规规则。
核心关键词CSS transform 父元素 fixed 定位包含块 - 0032
transform-style: preserve-3d 与 flat 对嵌套 3D 元素的呈现有什么不同？
围绕“transform-style: preserve-3d 与 flat 对嵌套 3D 元素的呈现有什么不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比子元素 3D 空间是否共享,不涉及 backface-visibility。
核心关键词CSS transform-style preserve-3d 与 flat 区别 - 0033
CSS 独立属性 rotate、scale、translate 与 transform 中的对应函数有何区别？如何优先选择？
围绕“CSS 独立属性 rotate、scale、translate 与 transform 中的对应函数有何区别？如何优”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较独立属性的书写顺序与变换覆盖行为。
核心关键词CSS rotate scale translate 独立属性与 transform 函数 - 0034
用百分比设置 translate 时，百分比是相对于元素自身尺寸还是父元素尺寸？
围绕“用百分比设置 translate 时，百分比是相对于元素自身尺寸还是父元素尺寸”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖确定百分比参考自身宽高。
核心关键词CSS translate 百分比 相对自身还是父元素 - 0035
在 transitionend 事件中，如何区分是哪个属性结束？如果过渡被取消会怎样？
围绕“在 transitionend 事件中，如何区分是哪个属性结束？如果过渡被取消会怎样”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖指出 propertyName 可区分，cancel 事件会触发，但不覆盖所有事件特性。
核心关键词CSS transitionend 事件 propertyName 判断 - 0036
如何让元素在其内容高度已知和未知时都能平滑展开/收起（transition height）？
本文解释CSS高度过渡的原理，对比已知高度与未知高度方案：固定height精确、max-height近似有计时误差、grid行技巧可自适应内容，并讨论min-height默认值阻止收缩、内容动态变化等边界。
核心关键词CSS transition height auto 平滑展开收起 - 0037
当元素在 transition 进行中又被修改时，浏览器如何计算新目标值？
围绕“当元素在 transition 进行中又被修改时，浏览器如何计算新目标值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明从当前插值点继续过渡而非重启。
核心关键词CSS transition 中断时如何计算目标值 - 0038
如何让元素的 width 与 opacity 在 transition 中分别使用不同的时长与缓动？
围绕“如何让元素的 width 与 opacity 在 transition 中分别使用不同的时长与缓动”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕演示用 transition 简写或长写按逗号分组实现独立控制，不比较动画关键帧的复杂情形。
核心关键词CSS transition 多属性不同时长缓动 - 0039
CSS transition 中 transition-property: all 与只列具体属性在性能上有何不同？
对比 transition-property 取 all 与显式列出属性的真实性能差异：浏览器按变更属性创建过渡，开销接近，差异在意外的过渡触发、时长不可拆分与维护风险。
核心关键词CSS transition-property all 性能差异 - 0040
如何在 CSS 中自定义 transition 或 animation 的速度曲线？cubic-bezier 的关键点数量有什么限制？
本文讲解 cubic-bezier 四个参数如何决定缓动曲线形状，包括 x 范围限制、y 可超出范围引起回弹，以及如何根据效果选择参数，避免常见误区。
核心关键词CSS cubic-bezier 自定义缓动曲线 - 0041
transition 只在哪些属性值变化时触发？请说明 display 从 none 到 block 是否过渡。
围绕“transition 只在哪些属性值变化时触发？请说明 display 从 none 到 block 是否过渡”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕限定可插值与不可插值属性，并解释 display 的切换行为常配合其他方式模拟。
核心关键词CSS transition 触发条件 display none 过渡 - 0042
如何利用 transition 结合 visibility 实现元素淡入淡出时可点击区域的延迟挂载？
围绕“如何利用 transition 结合 visibility 实现元素淡入淡出时可点击区域的延迟挂载”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 visibility 在过渡期间的可延迟特性，不覆盖其他不影响布局的属性。
核心关键词CSS transition visibility 淡入淡出 延迟挂载 - 0043
给一个按钮添加悬停微交互，选择用 transition 还是 animation？你基于什么判断？
围绕“给一个按钮添加悬停微交互，选择用 transition 还是 animation？你基于什么判断”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖从触发方式、控制能力等角度对比。
核心关键词CSS transition 与 animation 如何选择 - 0044
prefers-reduced-motion 媒体特性如何用于减少动画？其使用限制和最佳实践是什么？
本题讲解 prefers-reduced-motion 媒体特性的机制、实际场景与边界。用条件示例展示如何停止自动轮播、替换关键帧动画，并指出它不拦截 JS 生成的动画，需配合 matchMedia。讨论失效条件与开发代价。
核心关键词CSS prefers-reduced-motion media query