我有一种交叉淡化图像的方法,但它太慢了。我喜欢过渡所需的时间......但过渡本身太慢,需要加速。我已经尝试了许多事情无济于事,一些帮助和一点解释将不胜感激。另请注意,由于浏览器的支持,我喜欢这种方法。提前谢谢!
#crossfade > img {
position: absolute;
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
max-width: none;
max-height: none;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 75s linear infinite 0s;
-moz-animation: imageAnimation 75s linear infinite 0s;
-o-animation: imageAnimation 75s linear infinite 0s;
-ms-animation: imageAnimation 75s linear infinite 0s;
animation: imageAnimation 75s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;s
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 45s;
-moz-animation-delay: 45s;
-o-animation-delay: 45s;
-ms-animation-delay: 45s;
animation-delay: 45s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: linear; }
5% { opacity: 1;
-webkit-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: linear; }
5% { opacity: 1;
-moz-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: linear; }
5% { opacity: 1;
-o-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: linear; }
5% { opacity: 1;
-ms-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: linear; }
5% { opacity: 1;
animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}