最直接方法是用 CSS @keyframes 或 transition 配合 transform、opacity、filter 等硬件加速属性实现图片动效，避免 width/height 动画和内联样式操作，兼顾性能与维护性。
用 CSS 动画给 <img> 加动态效果最直接
HTML5 本身不提供“图片动态特效”标签或 API，所有视觉动效都靠 CSS（尤其是 @keyframes）或 JavaScript 驱动。直接在 <img> 上加 class，配一套动画规则就行，不用改 HTML 结构。
常见误区是试图用 <canvas> 或 <svg> 重绘图片来实现简单动效——过度设计，性能还差。除非要像素级控制（比如液态变形），否则纯 CSS 就够了。
-
transform+transition：适合悬停缩放、翻转、位移等一次性交互反馈 -
@keyframes+animation：适合循环呼吸光、浮动、渐显等持续动效 - 避免对
width/height做动画——触发布局重排，卡顿明显；优先用transform: scale()或opacity
filter 动态滤镜比 JS 操作 canvas 更轻量
想让图片有模糊、灰度、色相旋转、亮度变化等效果？filter 是 CSS 原生支持的硬件加速属性，改它比用 JS 操控 canvas 的 getImageData 快得多，也更易维护。
例如 hover 时加高斯模糊再叠加泛光：
立即学习“前端免费学习笔记（深入）”；
img.glow-on-hover {
transition: filter 0.3s ease;
}
img.glow-on-hover:hover {
filter: blur(2px) brightness(1.2) drop-shadow(0 0 8px rgba(255,220,0,0.6));
}
-
filter动画需配合transition或animation，不能直接写在伪类里就自动过渡 - 某些滤镜（如
blur()）在低端 Android WebView 中可能失效，建议加@supports (filter: blur(1px))条件包裹 - 慎用
hue-rotate()做大范围循环动画——人眼敏感，易眩晕
用 loading="lazy" 配合 opacity 动画防抖动
带动效的图片如果没加载完就触发动画，会出现“闪一下再动”的撕裂感。关键不是禁用懒加载，而是控制动画时机。
- 给
<img>加loading="lazy"和decoding="async"，提升首屏加载速度 - 初始设
opacity: 0; transform: scale(0.95)，监听img.onload或用IntersectionObserver触发animate-in类 - 不要依赖
document.ready——图片可能还没解码完成，得等img.naturalWidth > 0才算真正可用
JavaScript 控制动效节奏时别直接操作 style
需要根据滚动、鼠标位置或时间轴精细控制图片动效（比如视差滚动、跟随光标旋转）？用 JS 没问题，但别写 img.style.transform = `rotate(${deg}deg)`——频繁写内联样式会强制同步布局，掉帧严重。
正确做法是：
- 用
requestAnimationFrame节流更新，而非setTimeout或事件直触 - 把动效逻辑抽成 CSS 自定义属性，JS 只改
img.style.setProperty('--rotate', deg)，CSS 里用transform: rotate(var(--rotate)) - 对多个图片做同类型动效，用
will-change: transform提前提示浏览器升层，但别滥用——每个都加反而增加内存开销
动效是否流畅，往往不取决于用了多炫的算法，而在于是否避开强制同步布局、是否让浏览器知道你要动什么属性。很多“卡”是因为在 scroll 里反复读取 offsetTop 或写 style.left，这点比选什么动画库重要得多。
