0

我正在尝试实现与 JS setinterval/settimeout 类似的效果，但使用 CSS3。到目前为止，我已经达到了预期的效果，但只能使用 :hover。我怎样才能进行这项工作，以便动画每 3-4 秒运行一次，而无需悬停？

考虑：

<div id="crossfade">
    <img class="bottom" src="http://www.boohoo.com/content/ebiz/boohoo/resources/images    /topbanners/Offer_Strip_GBP_v1.jpg" />
    <img class="top" src="http://www.boohoo.com/content/ebiz/boohoo/resources/images/topbanners/Offer_Strip_EUR_v1.jpg" />
</div>

和：

#crossfade {
    position:relative;
    height:250px;
    width:400px;
}
#crossfade img {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#crossfade img.top:hover {
    opacity:0;
}

还有一个小提琴：http: //jsfiddle.net/qEwPb/

4

1 回答 1

1

从评论扩展：

您可以使用 CSS3动画

在线演示

#crossfade img {
    position:absolute;
    left:0;
}
#crossfade img.top {
    -webkit-animation-name:pulse;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:1s;
    -webkit-animation-direction:alternate;

    animation-name:pulse;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    animation-duration:1s;
    animation-direction:alternate;
}

@-webkit-keyframes pulse {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
@keyframes pulse {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

浏览器兼容性

调整animation-duration以适应您的需要。

编辑：

如果您想保持透明几秒钟，请使用以下内容：

img.top {
    animation-duration:5s;
}
@keyframes pulse {
    0% {
        opacity:1;
    }
    20% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
于 2013-09-25T11:48:51.953 回答