CSS转换/转换-"；“摇摇欲坠”；谷歌浏览器中的图像

最近我遇到了一个“不稳定的”屏幕，很可能是由CSS转换引起的。事实上，这只发生在Chrome浏览器上（可能也像一些ppl报道的那样Safari上）。 你知道我怎样才能使它看起来光滑吗？ 此外，你可能会注意到奇怪的白色块出现了几次，这在我应用转换之前也没有发生过，现在在新加载页面之后会发生一次或两次

这里有一个链接，您可以查看到底发生了什么：

CSS转换代码：

.heroEffects .bg {
    transform: scale(1);
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.bgimg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1);
    overflow: hidden;
    -webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    -moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("../img/gallery/slonecz.jpg");
    animation-name: backgroundchangeFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    -webkit-animation-name: backgroundchangeFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 15s;
}

---

事实上，我刚刚找到了一些让它正常工作的方法。 首先，添加-webkit转换样式：preserve-3d对闪烁元素的规则使它稍微工作了一点，但在我的例子中，它之后并没有完美地工作（来源：）

对我来说，真正起作用的是将动画持续时间从10秒增加到15秒，而不是三步过渡，我提出了以下内容：

@keyframes backgroundchangeFadeInOut {
    0% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    15% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    30% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    45% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    50% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    65% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    80% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    95% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    100% {
       background-image: url("../img/gallery/slonecz.jpg");
   }
}

看起来一次转换花费了很多时间，导致浏览器内存出现故障并闪烁。快速转换和在转换之间显示原始图像对我很好。希望有这样问题的人也能检查一下，这样我们就可以看看它是否是多病例解决方案

此外，在白色块的情况下，由于某种原因，它似乎是主体显示，暂时将主体背景不透明度更改为0，直到我找到另一种解决方法