纯CSS3交叉衰落

我正在开发一个纯CSS3图像间的交叉衰减器。我遇到的问题是，它只有两个图像，当第二个图像淡出时，它会淡出为白色，而不是直接返回到图像1

我的小提琴不是很好用：

嗨，请找到

---

您在html中提供了

id=“f1”

，但在css中没有使用它。

这使用了一种非常不同的方法，但从示例的外观来看，它可能正是您所需要的。这是一个纯css交叉淡入，它利用了当前浏览器淡入背景图像的方式

.image1{
    background-image:url(http://placehold.it/290x350);
}
.image1:hover{
    background-image:url(http://placehold.it/290x350/000000/ffffff);
}

---

在我的快速示例中，我所做的只是一个悬停效果，但您可以通过更改类名轻松地控制它。

事实证明，这是对CSS计时和动画代码放置的简单修复。我使用的代码在3幅图像中效果很好，但是在2幅图像中，我需要改变动画的持续时间，以消除淡入白色的效果。我还必须将动画信息（持续时间、迭代、名称等）放在JSFIDLE中：

守则的关键部分：

#f2 {
    z-index:999;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

---

1此解决方案可以改进。如果你使用真实的图像，你会清楚地看到最初有一个粗略的过渡。这是因为您将f2设置为999。改用这个：

#f1 {
    z-index:999;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

然后按如下所示更改动画位：

@-webkit-keyframes fade {
    0% {opacity: 1;}
    20% {opacity: 0;}
    33% {opacity: 0;}
    53% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes fade {
    0% {opacity: 1;}
    20% {opacity: 0;}
    33% {opacity: 0;}
    53% {opacity: 1;}
    100% {opacity: 1;}
}

---

这将转换为#f1而不是#f2，这意味着动画从一开始就是平滑的。

该链接是否不符合您的要求或无法为您打开？唯一的问题是这不是交叉淡入效果。这些图像现在似乎只是淡出为白色，而不是淡出以显示下一张图像。有什么想法吗？

@-webkit-keyframes fade {
    0% {opacity: 1;}
    20% {opacity: 0;}
    33% {opacity: 0;}
    53% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes fade {
    0% {opacity: 1;}
    20% {opacity: 0;}
    33% {opacity: 0;}
    53% {opacity: 1;}
    100% {opacity: 1;}
}