[英]CSS3 animation slideshow
Got a small img slideshow running with animation/keyframes, it has 4 images running 6 seconds each on a 24s infinite loop, The problem is that when it runs through once, the transition is fine, once it has gone through the 4 images and repeats, there is a good 2-3 seconds after an image fades out and the next one fades in. 得到了一个带有动画/关键帧的小型img幻灯片,它有4张图像,每张图像在24s无限循环中每6秒运行一次,问题是当它运行一次时,一旦经过4张图像并重复播放,过渡就很好了,则图像淡出大约需要2-3秒,然后下一个图像淡入。
First time using animation and keyframes so i'm not 100% what i've done wrong. 第一次使用动画和关键帧,所以我不是100%我做错了。 The slide show is running in a div called .slideshow I've taken out most prefixes for space and readability:
幻灯片在名为.slideshow的div中运行。我为空间和可读性删除了大多数前缀:
/* CSS */
.slideshow figure:nth-child(4) {
-webkit-animation: xfade 24s 0s infinite;
animation: xfade 24s 0s infinite;
}
.slideshow figure:nth-child(3) {
-webkit-animation: xfade 24s 6s infinite;
animation: xfade 24s 6s infinite;
}
.slideshow figure:nth-child(2) {
-webkit-animation: xfade 24s 12s infinite;
animation: xfade 24s 12s infinite;
}
.slideshow figure:nth-child(1) {
-webkit-animation: xfade 24s 18s infinite;
animation: xfade 24s 18s infinite;
}
@keyframes "xfade" {
0% {
opacity: 1;
}
14% {
opacity: 1;
}
16% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Not a duplicate, having a problem with a single image slideshow that loops fine for the first 24s, then a major 2-3 gap between images every time after.. 并非重复,而是有一个图像幻灯片放映的问题,该幻灯片在最初的24秒内循环良好,然后每次之后在图像之间间隔2-3个主要间隙。
Try changing the xfade
animation to 尝试将
xfade
动画更改为
@keyframes "xfade" {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Logically since the images are 4 the cycle should be 25%, 从逻辑上讲,由于图像是4,因此周期应为25%,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.