CSS动画中content属性URL无法平滑过渡的问题求助

问题根源 #

CSS的content属性属于不可动画属性，它只能在关键帧节点瞬间切换值，无法产生平滑过渡效果，所以你直接在@keyframes里切换content的URL，必然会出现瞬间跳转的情况。

可行替代方案 #

要实现图片的平滑切换，推荐通过控制元素的opacity（透明度）来做淡入淡出过渡，以下是两种常用实现方式：

方案1：使用两个叠加的img元素 #

<div class="image-container">
  <img src="https://www.imgacademy.com/sites/default/files/2009-stadium-about.jpg" class="fade-img" alt="Image 1">
  <img src="https://i.sstatic.net/2b4pE.jpg?s=64&g=1" class="fade-img" alt="Image 2">
</div>

/* 修正后的滚动条隐藏代码 */
body::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
}
body {
    overflow-y: scroll;
}
body::-moz-scrollbar {
    width: 0;
    background-color: transparent;
}
body::-ms-scrollbar {
    width: 0;
    background-color: transparent;
}

.image-container {
    position: fixed;
    bottom: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, 50%);
    /* 作为叠加图片的容器 */
    position: relative;
}

.fade-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    animation: imgFade 2s infinite forwards;
}
/* 第二张图延迟1秒启动动画，形成交替淡入淡出 */
.fade-img:nth-child(2) {
    animation-delay: 1s;
}

@keyframes imgFade {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

方案2：使用伪元素（适配必须用content的场景） #

如果坚持要用content属性，可以给容器设置两个伪元素，分别绑定两张图片，通过动画切换它们的透明度：

<div id="newImgID1" class="image-container"></div>

/* 滚动条隐藏代码同上 */

.image-container {
    position: fixed;
    bottom: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, 50%);
    border-radius: 0;
}

.image-container:before,
.image-container:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.image-container:before {
    background-image: url(https://www.imgacademy.com/sites/default/files/2009-stadium-about.jpg);
    animation: fadeBefore 2s infinite forwards;
}

.image-container:after {
    background-image: url(https://i.sstatic.net/2b4pE.jpg?s=64&g=1);
    animation: fadeAfter 2s infinite forwards;
}

@keyframes fadeBefore {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes fadeAfter {
    0%, 50% { opacity: 0; }
    51%, 100% { opacity: 1; }
}

额外修正点 #

1. 你原代码中opacity:10是错误写法，opacity取值范围为0-1，超过1会被默认视为1，需改为opacity:1。
2. -moz-body::-scrollbar和-ms-body::-scrollbar写法错误，正确格式应为body::-moz-scrollbar和body::-ms-scrollbar，前缀应加在伪元素前而非元素前。

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