CSS gradient background渐变背景动画无法正常运行问题求助

问题排查与修复方案 #

• 最常见的原因：你当前定义的渐变背景默认尺寸和承载元素尺寸一致，修改background-position不会产生肉眼可见的变化。给.gb-layout-hero-1添加background-size: 400% 400%;属性即可，放大背景尺寸后位置移动才会显示出渐变动画效果。
• 检查@keyframes gradient的定义位置：不要把动画定义嵌套在其他选择器、媒体查询代码块内部，需要是全局可访问的顶层规则，否则浏览器找不到对应的动画配置。
• 排查样式覆盖问题：打开浏览器开发者工具，选中对应.gb-layout-hero-1元素，查看计算样式中的animation属性，确认你写的动画规则没有被更高优先级的规则（比如带!important的全局动画禁用规则、性能优化相关的prefers-reduced-motion适配规则）覆盖。
• 兼容旧版浏览器补充：如果需要适配旧版Webkit内核浏览器，可补充前缀版本的动画声明：

/* 给.gb-layout-hero-1补充前缀属性 */
-webkit-animation: gradient 16s linear infinite;
/* 补充前缀版本的动画定义 */
@-webkit-keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

• 你代码中filter属性是IE旧版本的渐变兼容规则，该属性不支持动画，如果你是在IE浏览器下测试，本身就无法实现渐变动画效果，建议在现代浏览器中验证。

内容的提问来源于stack exchange，提问作者Christopher Martin