Question

我正在处理图像之间的纯CSS3交叉推子。我遇到的问题是它只有两个图像，当第二个图像淡出时，它会淡化为白色而不是直接回到图像1。

我不是那么努力的小提琴就在这里：http://jsfiddle.net/uQU6y/2/

.item img {
    position:absolute;
    left:0;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

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

#f2 {
    -webkit-animation-delay: -4s;
}

Answer 1

您好，请找jsfiddle 你在html中给了id="f1"但你没有在css中使用它。

Answer 2

这使用了一种非常不同的方法，但从您的示例的外观来看，它可能正是您所需要的。 http://jsfiddle.net/ericjbasti/uQU6y/4/这是一个纯粹的css交叉渐变，它利用了当前浏览器淡化背景图像的方式。

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

对于我的快速示例，所有即时通讯都是悬停效果，但您可以通过更改类名轻松控制它。

Answer 3

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

#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，这意味着动画从开始就是平滑的。

Answer 4

事实证明，这是对CSS时间和动画代码放置的简单修复。我使用过的代码很适合3张图片但是对于2我需要改变动画的持续时间才能将淡入淡出去除。我还必须放置动画信息（持续时间，迭代，名称等）。这里是JSfiddle：http://jsfiddle.net/uQU6y/7/

代码的关键部分：

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

纯CSS3交叉淡入淡出

4 个答案: