hue-rotate动画必须显式写出每个关键帧的完整filter值，浏览器不会自动插值；需用linear缓动、GPU加速，并确保作用对象具有可旋转的色相像素。
hue-rotate动画必须显式写出每个关键帧的filter值
CSS动画不会自动对filter里的hue-rotate()做数值插值——你写to { filter: hue-rotate(360deg); }，浏览器不会“算中间值”，而是直接跳转。不显式声明中间帧，动画就卡顿、跳变或根本不动。
正确做法是把filter当作整体属性来动画，每一帧都带完整函数调用：
@keyframes rainbow {
0% { filter: hue-rotate(0deg); }
25% { filter: hue-rotate(90deg); }
50% { filter: hue-rotate(180deg); }
75% { filter: hue-rotate(270deg); }
100% { filter: hue-rotate(360deg); }
}
-
360deg必须写全单位，不能省略或写成0deg——否则浏览器可能复用起始帧，导致最后一帧无变化 - 不能只写
hue-rotate(90deg)，漏掉filter:前缀，整个帧就失效 - 如果元素基础状态已有其他
filter（比如blur(1px)），动画帧里也得一并带上，否则会被清空
为什么hue-rotate动画看起来不匀速、颜色断层？
浏览器对hue-rotate()的插值不是按HSL色环线性进行的，尤其在红→紫、青→绿这类过渡区容易停留过久；再加上默认ease缓动会让开头结尾减速，视觉上就是“卡在某个色块不动”。
解决办法很具体：
立即学习“前端免费学习笔记（深入）”；
- 强制用
animation-timing-function: linear，禁用所有缓动 - 动画时长至少设为
4s，短于2s人眼明显感知跳跃 - 加
will-change: filter或transform: translateZ(0)触发GPU加速，否则软件渲染帧率掉到20fps以下，色相过渡糊成一片
哪些元素加hue-rotate动画会失效？
hue-rotate()作用于渲染后的像素层，不是“改颜色变量”。所以它对纯单色背景、纯边框、透明文字这些没效果——因为它们没有可旋转的色相信息。
能生效的典型场景：
- 带渐变的
background-image（哪怕只是linear-gradient(hsl(0,100%,50%), hsl(120,100%,50%))） - 图片（
img、background-image: url(...)） - SVG图形（
fill或stroke设了明确HSL/RGB值） - 文字但前提是
color用了hsl()或rgb()等有定义色相的值，不能是#000或transparent
常见误判：给div设了background-color: red再加hue-rotate，结果没变化——因为单色块不参与像素级滤镜合成，得换成background-image: linear-gradient(red, red)才有效。
悬停时用hue-rotate要注意叠加和重置
写img:hover { filter: hue-rotate(60deg); }看着简单，实际会清掉所有默认filter，包括可能存在的contrast()或brightness()，导致图片突然发灰或失真。
安全写法是hover状态里完整重申所有需要的滤镜：
img {
filter: brightness(1) contrast(1);
transition: filter 0.3s ease;
}
img:hover {
filter: brightness(1.05) contrast(1.1) hue-rotate(60deg);
}
- 旋转角度建议控制在±60deg内，大角度（如180deg）容易让肤色/文字变得刺眼
- iOS Safari 12.2+才稳定支持，老版本会直接忽略
filter，需备选方案（比如换class切CSS变量） - 如果图片带alpha通道，
hue-rotate不影响透明度，但旧Edge对半透明像素处理异常，务必实机测试
hue-rotate动画，核心就三件事：显式帧、线性缓动、GPU加速。其余都是围绕这三点打补丁。最容易被忽略的是——它不修颜色，只旋像素；没像素可旋，再漂亮的@keyframes也是静止的。 
