##问题描述
使用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);}
}