background-position动画更可靠，因其为数值型属性，支持插值、平滑过渡与硬件加速；而background-image（如linear-gradient）非数值型，无法插值，直接动画会失效。

为什么 background-position 动画比 background-image 动画更可靠

因为 background-image 的值（如 linear-gradient()）是非数值型，浏览器无法在关键帧间插值，直接动画它会导致静止、跳变或完全不生效。而 background-position 是数值型属性，支持平滑过渡和硬件加速（尤其配合 transform 时），且触发的是重绘（repaint）而非重排（reflow），性能更可控。

必须同时设置的三个 CSS 属性

漏掉任意一个都会让动画失效或表现异常：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• background-image: linear-gradient(...) —— 提供渐变图层，不能用 background: 简写覆盖其他背景控制项
• background-size: 400% 100% —— 宽度拉伸为容器 4 倍，给 background-position 移动留出空间；高度保持 100% 避免垂直错位
• background-position: 0% 50% —— 初始值必须显式声明，否则部分浏览器（如 Safari）可能忽略动画起点

animation-timing-function 必须用 linear

任何缓动函数（ease、cubic-bezier(0.4, 0, 0.2, 1)）都会导致速度不均，破坏“流动”感。常见错误是复制按钮动画代码却没改 timing function，结果看起来像卡顿的传送带。

• 正确写法：animation: slideGradient 8s linear infinite
• 避免写成：animation: slideGradient 8s ease-in-out infinite
• 如果想加停顿感，应在 @keyframes 中用多个关键帧控制，而不是靠 easing

响应式与性能避坑点

用百分比单位（0% → 100%）而非像素值，否则在不同宽高比容器中位移距离不一致；但要注意：当容器尺寸动态变化（如 flex 子项缩放）时，background-size: 400% 100% 仍会按当前尺寸重新计算，可能造成动画突跳。

• 移动端低端设备上，建议将动画持续时间设为 ≥6s，降低帧率压力
• 长页面中慎用全屏 .hero { animation: ... }，可加 will-change: background-position 提前提示合成器，但仅在必要时启用
• 务必监听 @media (prefers-reduced-motion: reduce) 并关闭动画，这是 WCAG 2.1 强制要求

实际最易被忽略的是：**渐变方向与 background-size 比例的耦合关系**。比如用 to bottom 渐变却设 background-size: 100% 400%，那就要动画 background-position: 50% 0% → 50% 100%——方向和尺寸轴必须对齐，否则位移“跑偏”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！