我有一个与动画延迟相关的问题。我有6张图片的列表,所以我想创建一个自动滑动的轮播效果。因此,我已经在CSS动画中让它们进行了平移。然而,图像运行的时间没有很好地计算,因此,在查看它时,图像会短暂重叠。我想要实现的是使图像不重叠并且平稳地循环运行。我已经创建了一个fiddle。
.banner ul {
list-style: none;
margin: 0;
padding: 0;
width: 300px;
height: 200px;
display: inline-block;
position: relative;
}
.banner ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: coverflow 9.5s ease infinite;
}
.banner ul li:nth-child(2) {
animation-delay: 1.5s;
}
.banner ul li:nth-child(3) {
animation-delay: 3s;
}
.banner ul li:nth-child(4) {
animation-delay: 4.5s;
}
.banner ul li:nth-child(5) {
animation-delay: 6s;
}
.banner ul li:nth-child(6) {
animation-delay: 7.5s;
}
.banner ul li:nth-child(7) {
animation-delay: 9s;
}
.banner ul li img {
width: 100%;
height: 100%;
}
@keyframes
coverflow {
0%, 10% {
opacity: 1;
transform: none;
z-index: 10;
}
25%, 35% {
opacity: 0.2;
transform: translate3d(-170px, 0, 0) scale(0.6);
}
50% {
opacity: 0;
transform: translate3d(-190px, 0, 0) scale(0.6);
}
60% {
opacity: 0;
transform: translate3d(190px, 0, 0) scale(0.6);
}
75%, 85% {
opacity: 0.2;
transform: translate3d(170px, 0, 0) scale(0.6);
}
}
这是 JSFiddle 示例:
https://jsfiddle.net/4anedqzp/2/非常感谢。