为啥这个 CSS @keyframes 规则不交叉淡入淡出?

Posted

技术标签:

【中文标题】为啥这个 CSS @keyframes 规则不交叉淡入淡出?【英文标题】:Why is this CSS @keyframes rule not cross-fading?为什么这个 CSS @keyframes 规则不交叉淡入淡出? 【发布时间】:2019-02-28 16:01:26 【问题描述】:

我正在尝试创建一个非常简单的幻灯片,在每个图像之间交叉淡入淡出。问题是图像在下一张图像开始淡入之前淡出。

我希望每张图像淡入 1 秒,再保持 10 秒,然后淡出 1 秒 - 总共 12 秒。

@keyframes 的计算方法是将动画持续时间除以 100,得到每秒 1.81%。

动画延迟为 11 秒,这引起了我的困惑,因为下一张图像应该随着最后一张图像淡出而淡入。

如果有人能说明我做错了什么,我将不胜感激。

html

<!doctype html>
<html>
    <body>
        <main>
            <div id="cf">
                <img src="https://placeimg.com/640/480/animals">
                <img src="https://placeimg.com/640/480/nature">
                <img src="https://placeimg.com/640/480/tech">
                <img src="https://placeimg.com/640/480/people">
                <img src="https://placeimg.com/640/480/sepia">
            </div>
        </main>
    </body>
</html>

CSS:

@keyframes crossFade
    0%opacity: 0;
    1.81%opacity: 1;
    18.18%opacity: 1;
    19.98%opacity: 0;
    100%opacity: 0;


#cf img
    position:absolute;
    left:0;
    opacity: 0;
    animation-name: crossFade;
    animation-duration: 55s;
    animation-iteration-count: infinite;


#cf img:nth-last-of-type(1)
    animation-delay: 0s;


#cf img:nth-last-of-type(2)
    animation-delay: 11s;


#cf img:nth-last-of-type(3)
    animation-delay: 22s;


#cf img:nth-last-of-type(4)
    animation-delay: 33s;


#cf img:nth-last-of-type(5)
    animation-delay: 44s;

Codepen 链接: https://codepen.io/Musicky/pen/YgyOPm

【问题讨论】:

如果你将持续时间除以 100,你如何得到 1.81% 【参考方案1】:

我更改了您的百分比和持续时间。这将像您期望的那样显示。

您可能想要调整第一个过渡开始时的长度,但您的原件没有重叠。当事物可整除时,对事物进行计时会更简单。不是说做不到,而是更难实现

@keyframes crossFade
    0%opacity: 0;
    10%opacity: 1;
    20%opacity: 1;
    30%opacity: 0;
    100%opacity: 0;

#cf img
    position:absolute;
    left:0;
    opacity: 0;
    animation-name: crossFade;
    animation-duration: 60s;
    animation-iteration-count: infinite;

#cf img:nth-last-of-type(1)
    animation-delay: 0s;

#cf img:nth-last-of-type(2)
    animation-delay: 10s;

#cf img:nth-last-of-type(3)
    animation-delay: 20s;

#cf img:nth-last-of-type(4)
    animation-delay: 30s;

#cf img:nth-last-of-type(5)
    animation-delay: 40s;
<div id="cf">
    <img src="https://placeimg.com/640/480/animals">
    <img src="https://placeimg.com/640/480/nature">
    <img src="https://placeimg.com/640/480/tech">
    <img src="https://placeimg.com/640/480/people">
    <img src="https://placeimg.com/640/480/sepia">
</div>

【讨论】:

@WillHammond 如果此回复解决了您的问题,请将其标记为已接受的答案,以便其他发现此问题的人也知道如何解决他们的问题

以上是关于为啥这个 CSS @keyframes 规则不交叉淡入淡出?的主要内容,如果未能解决你的问题,请参考以下文章

CSS3@keyframes规则和animation动画

text CSS @keyframes规则

CSS3 动画

css-@keyframes动画

CSS 动画总结

@keyframes规则