CSS幻灯片动画CPU占用过高与Safari兼容问题咨询

问题1：动画导致CPU负载过高的原因与优化方案 #

核心原因 #

• 全局通配符规则* { transition: all 0.3s ease; }给页面所有DOM元素的所有可变化属性绑定了过渡监听，任何元素属性变动都会触发全元素的过渡计算，哪怕是完全不可见的节点，浏览器需要持续执行重排重绘计算，直接拉高CPU占用。
• 3组幻灯片+对应大图的动画全程同时运行：即使幻灯片opacity: 0完全不可见，它的缩放动画依然在后台持续计算，浏览器需要同时处理3个100vh尺寸容器+3张大图的无限循环动画，没有做闲置暂停。
• 动画没有触发GPU硬件加速，部分内核下opacity和transform动画默认走CPU软件渲染，大图缩放的像素计算量极高。
• 代码存在低级笔误：选择器..slide:nth-child(1)多写了一个点，导致第一张幻灯片的动画延迟规则失效，时序错乱额外增加计算消耗；同时图片延迟的选择器逻辑完全错误，把动画绑定到了不存在的子节点上。
• 图片未设置object-fit: cover，如果原始图片分辨率远大于视口尺寸，缩放时的像素计算量会数倍增加。

修复方案 #

1. 直接删除全局通配符的transition: all规则，仅给确实需要过渡的元素单独绑定对应属性的过渡，绝对禁止用all关键字监听所有属性变化。
2. 给非激活状态的幻灯片设置animation-play-state: paused，仅在幻灯片可见阶段运行动画，避免3组动画全程空跑。
3. 给动画元素添加合成层提升规则，强制走GPU硬件加速：给.slide和.slide img添加will-change: opacity, transform，兼容旧WebKit内核补充-webkit-transform: translateZ(0)，注意不要给非动画元素加该规则避免显存浪费。
4. 修正所有选择器错误：删除多余的类选择器点，图片动画延迟的绑定规则改为.slide:nth-child(n) img，和父级幻灯片时序对齐。
5. 打开object-fit: cover配置，提前压缩图片分辨率，不要加载远超视口尺寸的原图。

问题2：Safari下动画故障、淡入淡出切换异常的原因与修复方案 #

核心原因 #

• Safari使用的WebKit内核和Firefox的Gecko内核对动画关键帧的容错逻辑不同：现有fade动画只定义了25%、40%两个节点的状态，0%、100%的透明度值未显式声明，Firefox会自动补全为0，但Safari对未定义关键帧的补间计算存在bug，会出现透明度跳变、淡入淡出时序错乱。
• WebKit内核对父子元素同时运行无限循环动画的场景存在合成层排序bug：父级跑淡入、子级跑缩放时，会出现层级错乱、透明度继承失效，表现为画面撕裂、glitch故障。
• 带overflow: hidden的绝对定位元素在Safari中运行transform动画时，存在边缘裁剪闪烁、内容渲染撕裂的已知问题，现有代码刚好触发该缺陷。
• 前缀配置不全：虽然给动画名加了-webkit-前缀，但动画内的transform属性未加WebKit前缀，部分旧版Safari无法正确识别属性值，直接跳过渲染。
• 错误的图片选择器导致动画时序错位：原代码用.slide img:nth-child(n)绑定延迟，实际每个幻灯片内只有1张图片，该选择器无法正确匹配节点，Firefox做了容错处理但Safari严格执行规则，导致图片缩放和父级淡入淡出完全错开。

修复方案 #

1. 补全所有关键帧的首尾状态，不要留未定义的节点，同步补全所有属性的WebKit前缀。
2. 给幻灯片显式设置z-index，在动画关键帧中同步切换层级，激活状态的幻灯片层级更高，解决WebKit合成层排序混乱问题；同时添加backface-visibility: hidden解决3D变换时的背面渲染闪烁。
3. 给.slide添加isolation: isolate创建独立层叠上下文，修复overflow: hidden配合transform动画的裁剪闪烁问题。
4. 修正图片选择器逻辑，确保图片缩放动画和父级幻灯片淡入动画的延迟、运行状态完全同步。

修正后的核心CSS代码 #

*{
    margin:0;
    padding:0;
}

body {
    background: #333;
    color: #ccc;
    position: relative;
}

.slide {
    border: 2px solid #555;
    height: 100vh;
    width: 100%;
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    z-index: 1;
    /* 开启硬件加速，创建独立层叠上下文 */
    will-change: opacity, transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
    -webkit-animation: fade 31s linear infinite;
    animation: fade 31s linear infinite;
    /* 默认暂停不可见幻灯片动画 */
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/* 修正选择器，同步绑定幻灯片和对应图片的动画时序 */
.slide:nth-child(1),
.slide:nth-child(1) img {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    z-index: 2;
}

.slide:nth-child(2),
.slide:nth-child(2) img {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

.slide:nth-child(3),
.slide:nth-child(3) img {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

.slide img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: zoom 31s linear infinite;
    animation: zoom 31s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.slide:nth-child(1) img,
.slide:nth-child(2) img,
.slide:nth-child(3) img {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.slide .text {
    margin: 0.3rem;
    padding: 1.5rem;
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    width: 50%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 1rem;
}

/* 补全关键帧所有状态 */
@-webkit-keyframes fade {
    0%, 100% {
        opacity: 0;
        z-index: 1;
    }
    25% {
        opacity: 1;
        z-index: 2;
    }
    40% {
        opacity: 0;
        z-index: 1;
    }
}

@keyframes fade {
    0%, 100% {
        opacity: 0;
        z-index: 1;
    }
    25% {
        opacity: 1;
        z-index: 2;
    }
    40% {
        opacity: 0;
        z-index: 1;
    }
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(1.0) translateZ(0);
        transform: scale(1.0) translateZ(0);
    }
    to {
        -webkit-transform: scale(1.3) translateZ(0);
        transform: scale(1.3) translateZ(0);
    }
}

@keyframes zoom {
    from {
        transform: scale(1.0) translateZ(0);
    }
    to {
        transform: scale(1.3) translateZ(0);
    }
}

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