不能，必须用@keyframes+animation实现自动循环；transition仅响应状态变化，无法驱动无交互的持续明暗节奏。
filter: brightness() 能不能做自动循环动画
不能直接用 transition 实现循环，必须改用 @keyframes + animation。因为 transition 只响应状态变化（比如 hover），而明暗交替是无交互的持续节奏，得靠 CSS 动画驱动。
写一个基础的明暗循环动画
核心是定义两个关键帧：亮态和暗态，并控制循环行为。示例：
@keyframes brightness-pulse {
0%, 100% { filter: brightness(1.2); }
50% { filter: brightness(0.7); }
}
img.pulse {
animation: brightness-pulse 3s ease-in-out infinite;
}
要点说明：
-
0%和100%写相同值，确保首尾衔接不跳变 - 用
ease-in-out让明暗切换更自然，避免机械感 -
infinite是必须的，否则只播一次就停 - 别省略单位——
brightness(1.2)是合法的，brightness(120%)也行，但两者数值等价，推荐统一用无单位小数（语义更清晰）
为什么 brightness(0.7) 在深色背景下看起来“更闷”
人眼对暗部敏感，brightness(0.7) 并不是“保留 70% 明度”，而是把每个像素亮度乘以 0.7，导致阴影细节塌陷、发灰。尤其在深色背景或暗黑模式下，这种线性压缩会放大压抑感。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 亮色主题下，安全范围是
brightness(0.8)～brightness(1.3) - 暗色主题下，慎用低于
brightness(0.85)的值；如果非要压暗，优先调contrast(0.9)或grayscale(0.2)辅助，而不是一味降低 brightness - 若图片本身偏暗（如夜景图），循环动画中甚至可设
brightness(1)为暗态，靠对比度微调来制造节奏
动画卡顿或闪烁的常见原因
滤镜动画比 transform 或 opacity 更吃 GPU，尤其在低端设备或旧浏览器上容易掉帧或闪屏。
缓解方式：
- 给动画元素加
will-change: filter，提前提示浏览器提升图层 - 避免同时对多个大图运行不同周期的
brightness动画——浏览器难以批量优化 - 不要在
@keyframes里混用blur()和brightness()做循环，模糊计算开销大，易触发重绘抖动 - Safari 15.4 之前对
img标签的filter动画支持不稳定，可包裹一层<div> 并对容器应用动画 <p>真正难的是让明暗节奏贴合内容呼吸感，而不是参数堆砌。起始值、谷值、周期、缓动曲线——每个都影响观感，但浏览器不会报错，只会默默渲染出“奇怪的闪烁”。</p> </div>
