自定义属性能做过渡动画吗？需要什么条件？
未注册的 CSS 自定义属性按普通 token 序列处理，浏览器通常无法在两个值之间连续插值。用 @property 声明语法类型、继承规则和初始值后，颜色或长度变量才可参与平滑过渡；渐变背景是否跟着变化还取决于引用位置。
核心关键词CSS custom property transition animation
面试知识索引 · 分类、标签与搜索
CSS · 动画面试题，44 道完整答案
CSS · 动画面试题第 1 页，显示第 1–44 题，共找到 44 道完整解析，可继续按分类、标签与关键词缩小范围。
44筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
当同时存在带 !important 和不带 !important 的规则时，默认的层叠优先级顺序是什么？
!important 影响声明在 CSS 级联中的优先级，但不能只和选择器权重相比。来源与层叠层先决定重要声明的竞争顺序，重要层的排序还会反转；内联样式、动画与过渡各有位置，排查覆盖失败时需逐层比较。
核心关键词CSS !important cascade precedence order - 0003
动画暂停期间修改了 @keyframes，恢复播放后表现会变吗？
暂停动画后改动同名关键帧，不会自动重启动画，但当前进度处的计算结果可能立即变化。区分冻结时间与冻结画面、修改关键帧与更换动画名，并给出用浏览器开发工具观察位置跳变的方法。
核心关键词CSS animation-play-state 暂停时修改关键帧 - 0004
animation-direction 的 alternate 和 reverse 有什么区别？
animation-direction 控制关键帧的播放方向。reverse 每轮倒着播，alternate 奇偶轮交替方向。搞清四种取值和缓动曲线反转的关系，动画方向就不会搞反。
核心关键词CSS animation-direction alternate 与 reverse 区别 - 0005
animationstart、animationend、animationiteration 这三个事件分别在什么时候触发？
animationstart、animationiteration 与 animationend 分别对应动画开始、新一轮循环和正常结束。正延迟会推迟开始事件，循环动画每轮未必都触发结束事件；动画被取消时还要考虑 animationcancel，监听逻辑不能只等最后一帧。
核心关键词CSS animationstart animationend animationiteration 触发时机 - 0006
animation-fill-mode 设成 backwards 和 both 有什么区别？
animation-fill-mode: backwards 会让元素在正延迟期间采用起始关键帧样式，动画结束后回到原样；both 同时具备 backwards 与 forwards 的效果。负延迟、动画方向和实际第一帧会改变视觉结果，不能简单把它理解成“永远显示 0% 帧”。
核心关键词CSS animation-fill-mode backwards 与 both 区别 - 0007
怎么让无限循环的动画在每两轮之间有一段停顿？
animation-delay 只发生在第一轮开始前，循环之间不会自动空出间隔。需要周期性停顿时，可把动作集中在关键帧前半段，让后半段保持同一状态；若停顿时长需动态变化，则适合用脚本控制播放状态。
核心关键词CSS animation 无限循环 每次循环加延迟 - 0008
@keyframes 里 from 和 to 跟百分比选择器是什么关系？
关键帧中的 from 与 to 分别对应 0% 和 100%，中间可用任意百分比指定状态；端点缺失时，浏览器会依据元素的基础样式补齐。多个同名 @keyframes 规则的覆盖与同规则里重复百分比的合并不同，动画结果要分开判断。
核心关键词CSS keyframes 百分比 from to 对应关系 - 0009
animation-play-state 暂停和负 animation-delay 跳过有什么区别？
paused 把动画冻结在当前帧，随时可以恢复继续播。负 delay 让动画跳过开头一段直接从中间开始，跳过的部分不会再播。两者对动画的影响完全不同，一个是暂停，一个是快进。
核心关键词CSS animation-play-state 与负 animation-delay 区别 - 0010
怎么用纯 CSS 让动画跟着滚动条走，而不是按时间播放？
用 animation-timeline 把动画和滚动位置绑在一起，滚到哪动画就播到哪。讲解 scroll() 和 view() 两种时间线的区别、写法，以及浏览器兼容和常见坑。
核心关键词CSS scroll-timeline 滚动驱动动画 - 0011
backdrop-filter 和 filter 有什么区别？毛玻璃效果怎么实现？
filter 模糊元素自身，backdrop-filter 模糊元素背后的内容。讲解毛玻璃效果的写法、背景为何要留出透明度、模糊范围与性能开销，以及旧浏览器不支持时的降级方案。
核心关键词CSS backdrop-filter 与 filter 区别 - 0012
做 3D 卡片翻转效果时，backface-visibility 解决的是什么问题？
卡片翻转 180 度后背面会透出正面的镜像内容，backface-visibility: hidden 就是把背面藏起来。讲解 3D 卡片翻转的完整结构、父容器的 perspective 设置，以及常踩的坑。
核心关键词CSS backface-visibility 卡片翻转 - 0013
什么情况下元素会被提升为独立合成层？will-change 怎么用才对？
3D 变换、will-change、固定定位等都会触发合成层提升。讲解合成层的原理、will-change 的正确用法和常见的滥用问题，以及怎么在 DevTools 里检查层数。
核心关键词CSS will-change 合成层 创建条件 - 0014
conic-gradient 和 repeating-conic-gradient 有什么区别？怎么用它们画饼图？
conic-gradient 沿圆心扫一圈画完，repeating-conic-gradient 自动重复填满 360 度。讲解用锥形渐变画饼图的写法、色块硬边技巧、与径向渐变的区别，以及常见的角度换算错误。
核心关键词CSS conic-gradient 与 repeating-conic-gradient 区别 - 0015
CSS 动画里频繁改自定义属性，为什么会卡？
CSS 自定义属性在动画中频繁修改会触发样式重算和布局回流，导致掉帧。了解浏览器对自定义属性和原生属性的处理差异，掌握用 @property 注册后走合成层的优化方案。
核心关键词CSS 动画中修改自定义属性 性能问题 - 0016
用 transition 做 grayscale() 的去色动画，性能上要注意什么？
给图片加 filter: grayscale() 后用 transition 平滑去色的写法很简单，但 filter 过渡每帧都要重新计算像素，图片大或数量多时容易掉帧。了解 will-change 提升合成层和限制作用域的优化手段。
核心关键词CSS filter grayscale 过渡动画 性能 - 0017
filter 不是继承属性，为什么子元素也跟着模糊了？
filter 在 CSS 规范里是非继承属性，子元素不会自动获得父元素的 filter 值。但父元素的 filter 作用于整个渲染结果，子元素作为其中一部分自然受影响。搞清渲染时机和继承的区别，才能正确给子元素做豁免。
核心关键词CSS filter 是否继承 子元素视觉影响 - 0018
给父元素加了 filter，子元素的 fixed 定位为什么失效了？
父元素设了 filter 后会创建新的层叠上下文，同时改变 fixed 定位子元素的包含块。子元素不再相对于视口定位，而是相对于带 filter 的父元素。了解哪些属性会产生同样的副作用，以及实际项目中的解决方案。
核心关键词CSS filter 层叠上下文 fixed 子元素影响 - 0019
linear-gradient 里 0deg 是朝上还是朝右？角度怎么影响渐变方向？
linear-gradient 的角度以元素正上方为 0deg，顺时针旋转。0deg 从下往上渐变，90deg 从左往右，180deg 从上往下。掌握角度和方向关键字的对应关系，能快速判断渐变走向。
核心关键词CSS linear-gradient 角度与渐变方向 - 0020
linear-gradient 里两个色标写在同一位置，为什么会出现硬边？
线性渐变会在相邻色标之间插值；两个不同颜色的色标落在同一位置时，插值区间消失，颜色会出现硬边。条纹背景和进度条分段可以用这个特点实现，色标顺序、百分比位置和透明色叠加则决定边界是否如预期。
核心关键词CSS 渐变色标同位置 硬边效果原理 - 0021
怎么用 conic-gradient 做一个圆环进度条？
conic-gradient 能沿角度分出扇形，配合圆角可形成饼图；中心再遮一层圆或使用 mask 就得到圆环进度。数值变化可驱动色标位置，边缘锯齿、超出范围和可访问文本仍要处理。
核心关键词CSS conic-gradient 圆环进度条 - 0022
关键帧动画里写了 display 这种不可插值的属性，浏览器会怎么处理？
关键帧中写入不可平滑插值的属性时，动画会按离散规则切换，而不是产生连续变化。display 与 visibility 的切换时机不完全一样；做淡出或退出效果时，通常需要把透明度动画与元素最终隐藏的时间点协调起来。
核心关键词CSS keyframes 不可插值属性 display 处理 - 0023
transform 里同时写 translate、rotate、scale，顺序不同结果为什么不一样？
transform 中多个变换函数会按矩阵顺序组合；先写 rotate 再写 translate，与反过来写会得到不同轨迹。父子坐标系和变换原点还会影响视觉结果，排查“位移方向不对”时应先看函数次序。
核心关键词CSS transform 多函数顺序与矩阵乘法 - 0024
怎么用 CSS 让文字显示渐变色？
渐变文字通常把 linear-gradient 作为背景，再用 background-clip: text 裁到字形内，并让文字填充透明。缺少其中一步可能只看到普通文字或整块背景；浏览器前缀、选中态和暗色模式还会影响最终可读性。
核心关键词CSS background-clip text 渐变文字 - 0025
用 prefers-reduced-motion 覆盖动画时，为什么不该直接删除 transition？
系统开启减少动态效果后，页面应减少大幅位移、闪烁或自动播放，必要的状态反馈仍可保留。prefers-reduced-motion 媒体查询可切换时长或替换动画形式；只把动画时长改成极短值，可能影响依赖动画结束事件的代码。
核心关键词prefers-reduced-motion 覆盖动画 可访问性 - 0026
radial-gradient 里 ellipse 和 circle 有什么区别？怎么控制渐变的中心和大小？
radial-gradient 可用 circle 或 ellipse 约束渐变形状，用 at 调整中心点，再用 closest-side、farthest-corner 等关键字决定终点。容器长宽变化会改变椭圆的观感；背景位置和渐变中心也不能当成同一个参数。
核心关键词CSS radial-gradient ellipse 与 circle 区别 - 0027
除了 CSS 动画，prefers-reduced-motion 还能用在滚动行为和 JS 动画上吗？
减少动态效果的偏好不只影响 CSS 动画，还涉及平滑滚动、脚本驱动的过渡和第三方动画库。CSS 可用媒体查询覆盖相关属性，JavaScript 可借助 matchMedia 读取并监听变化；设置切换后运行中的动画也应得到处理。
核心关键词prefers-reduced-motion 优化滚动与 JS 动画 - 0028
用 CSS 做打字机效果时，steps() 和线性过渡有什么区别？
steps() 把连续时间切成离散跳变，常用于打字机效果和逐帧精灵图；它不会像 linear 那样在两帧之间平滑插值。步数、跳变发生在区间起点还是终点，以及文字宽度与字符数是否匹配，都会影响最后一帧。
核心关键词CSS steps() 打字机效果 - 0029
perspective 和 perspective-origin 怎么影响 CSS 3D 变换的视觉效果？
CSS perspective 决定三维变换的透视强度：距离值越小，近大远小越明显；perspective-origin 则改变观察中心。父元素设置 perspective 与元素自身使用 perspective() 函数的作用范围不同，翻转卡片时还要检查背面可见性。
核心关键词CSS perspective 与 perspective-origin 3D 效果 - 0030
transform-origin 怎么影响旋转和缩放的效果？
transform-origin 决定 rotate、scale 等变换围绕哪里进行，同样旋转角度，中心点与左上角作为原点会画出不同路径。百分比原点相对元素自身盒子计算，变换后的视觉位移还与元素尺寸有关。
核心关键词CSS transform-origin 对 rotate scale 的影响 - 0031
父元素设了 transform，子元素的 fixed 定位为什么失效了？
父元素应用 transform 后会为固定定位后代建立新的包含块，position: fixed 子元素可能不再固定于视口，而是跟随父组件。需要视口级弹层时，可把元素通过 Portal 移出该祖先，或避免在祖先上施加变换。
核心关键词CSS transform 父元素 fixed 定位包含块 - 0032
preserve-3d 和 flat 对嵌套 3D 变换的效果有什么区别？
transform-style: preserve-3d 让子元素保留在父元素的三维空间中，flat 则把它们压到父元素平面。翻牌与立方体效果需要检查父子两级的设置；某些会产生分组绘制的属性也可能迫使结果变平。
核心关键词CSS transform-style preserve-3d 与 flat 区别 - 0033
CSS 独立的 rotate、scale、translate 属性和 transform 里的函数有什么区别？
独立的 rotate、scale、translate 属性可分别过渡，并按固定次序与 transform 组合；它们不等同于随意调换 transform 函数顺序。迁移旧动画时要检查最终变换矩阵、级联覆盖和目标浏览器支持情况。
核心关键词CSS rotate scale translate 独立属性与 transform 函数 - 0034
translate 里的百分比到底是相对自身还是相对父元素？
translate 百分比是相对元素自身的宽高，不是父元素。translateX 百分比参照自身宽度，translateY 参照自身高度。这个特性常用于不知道元素尺寸时的居中定位。
核心关键词CSS translate 百分比 相对自身还是父元素 - 0035
transitionend 事件怎么判断是哪个属性结束的？过渡被取消还会触发吗？
transitionend 会按实际完成过渡的属性分别触发，可用 propertyName 过滤需要等待的那一个。过渡被中途取消可能触发 transitioncancel 而没有 transitionend；时长为零、元素被移除或目标值未改变时，也不能盲等结束事件。
核心关键词CSS transitionend 事件 propertyName 判断 - 0036
为什么 height 从 0 到 auto 不能做过渡？怎么实现平滑展开收起？
height 从 0 到 auto 通常缺少可直接插值的明确终点，展开面板需要选择替代策略。max-height 技巧会让时长随内容变化，Grid 行高方案依赖布局结构；支持 interpolate-size 的环境可直接处理固有尺寸，但仍要考虑兼容性。
核心关键词CSS transition height auto 平滑展开收起 - 0037
过渡进行到一半又改了目标值，浏览器怎么处理？
过渡未完成就更换目标值，浏览器通常从当前插值状态转向新目标，反向过渡还可能采用缩短后的时长。按钮连续悬停或抽屉快速开合会暴露这一点；若看到状态跳动，应确认是过渡被打断还是动画被重新创建。
核心关键词CSS transition 中断时如何计算目标值 - 0038
怎么让一个元素的 width 和 opacity 用不同的过渡时长和缓动？
同一元素的透明度和位移可以分别指定过渡时长、缓动曲线和延迟，transition 简写里的逗号会形成多组属性设置。列表长度不一致时值会循环匹配；面板开合时应对照计算后的样式，确认每项声明落到了预期属性上。
核心关键词CSS transition 多属性不同时长缓动 - 0039
transition-property 写 all 和只列具体属性，性能上有区别吗？
对比 transition-property 取 all 与显式列出属性的实际差异：浏览器只为变化属性创建过渡，帧开销接近；真正区别在意外过渡触发、时长不可拆分和维护风险。
核心关键词CSS transition-property all 性能差异 - 0040
cubic-bezier 四个参数分别控制什么？
cubic-bezier() 的四个数定义控制点；两个 x 坐标必须在 0 到 1 之间，y 坐标可以越界并产生回弹或超冲。ease 等关键字对应固定曲线，自定义动效时要同时观察起步、收尾和中段速度，不能只看总时长。
核心关键词CSS cubic-bezier 自定义缓动曲线 - 0041
CSS transition 什么时候会触发？display 变化能过渡吗？
transition 需要同一元素的计算后样式发生变化，并且浏览器能识别变化前后的状态。颜色、透明度等属性可插值，display 等离散属性要配合 transition-behavior: allow-discrete；入场还常需 @starting-style 给出起始状态。
核心关键词CSS transition 触发条件 display none 过渡 - 0042
为什么淡出动画要同时用 opacity 和 visibility？
只把元素 opacity 降为零，透明区域仍可能接收点击和焦点。把 visibility 的切换延后到淡出完成，可让退出动画结束后再隐藏；重新显示时延迟规则也要配套调整，否则元素可能先不可见再突然出现。
核心关键词CSS transition visibility 淡入淡出 延迟挂载 - 0043
transition 和 animation 怎么选？
transition 适合按钮悬停、面板开合这类在两种状态间切换的效果；animation 适合多关键帧、循环或自动播放。两者的触发方式、暂停控制和结束状态处理不同，选型应取决于动效是否需要独立时间线。
核心关键词CSS transition 与 animation 如何选择 - 0044
怎样用 prefers-reduced-motion 照顾不适合动画的用户？
prefers-reduced-motion: reduce 表示用户偏好减少非必要运动。可以在该条件下关闭持续位移、缩放、视差等容易造成不适的动画，或换成更温和的淡入；不要假定所有动画都必须彻底删除。
核心关键词CSS prefers-reduced-motion media query