为了使图像正确地淡入和淡出，需要计算百分比和时间，以使其看起来不错，如下所述，或者只是给每个图像一个
@keyframes自己的规则。
对于“ n”幅图像，您必须定义：
- a =一幅图像的演示时间
- b =交叉衰落的持续时间
- 总的动画持续时间当然是t =（a + b）* n
动画延迟= t / n或= a + b
关键帧百分比：
- 0％
- a / t * 100％
- （a + b）/ t * 100％= 1 / n * 100％
- 100％-（b / t * 100％）
- 100％
.crossfade > div { animation: imageAnimation 8s linear infinite; backface-visibility: hidden; background-size: cover; background-position: center center; color: transparent; height: 100%; left: 0; position: fixed; top: 0; width: 100%;}.crossfade { height: 500px;}@keyframes imageAnimation { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; }}.crossfade div:nth-of-type(1) { background-image: url(http://placehold.it/200/f00); animation-delay: 6s;}.crossfade div:nth-of-type(2) { background-image: url(http://placehold.it/200/0b0); animation-delay: 4s;}.crossfade div:nth-of-type(3) { background-image: url(http://placehold.it/200/00f); animation-delay: 2s;}.crossfade div:nth-of-type(4) { background-image: url(http://placehold.it/200/ff0); animation-delay: 0;}<div > <div></div> <div></div> <div></div> <div></div></div>
