加快CSS交叉淡入淡出动画

时间:2016-01-27 14:32:59

标签: html css css3

我有一种交叉淡化图像的方法,但它太慢了。我喜欢过渡所需的时间......但过渡本身太慢,需要加速。我已经尝试了许多事情无济于事,一些帮助和一点解释将不胜感激。另请注意,由于浏览器的支持,我喜欢这种方法。提前谢谢!

#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 }
}

包括小提琴 https://jsfiddle.net/joelssk/eoq5q8ne/

0 个答案:

没有答案