keyframes 背景轮播 首次加载轮播出现闪烁如何解决

Question

##问题描述
使用keyframes制作背景轮播效果，第一次加载切换中间出现白色闪烁，第二遍轮播就没有问题了；
backface-visibility:hidden;
transform-style: preserve-3d; 使用后无效果

##代码

body{
            background: url(img/background1.jpg);
            animation-name:myfirst;
            animation-duration:12s;
            /*变换时间*/
            animation-delay:2s;
            /*动画开始时间*/
            animation-iteration-count:infinite;
            /*下一周期循环播放*/
            animation-play-state:running;
            /*动画开始运行*/
            backface-visibility:hidden;
            -webkit-backface-visibility: hidden;
            /*隐藏转换的元素的背面-无效*/
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d; 
            /*使被转换的元素的子元素保留其 3D 转换-无效*/
        }
        @keyframes myfirst
        {
            0%   {background:url(img/background1.jpg);}
            34%  {background:url(img/background2.jpg);}
            67%  {background:url(img/background3.jpg);}
            100% {background:url(img/background1.jpg);}
        }

Answer 1

由于图片加载，会导致有短暂的空白期，可以预先加载好图片，方法很多，给个最简单的：
css直接一次性加载：

background: url("img/4.jpg"),url("img/5.jpg"),url("img/6.jpeg"),url("img/7.jpg");