多个图像 CSS 之间的淡入淡出

Question

多个图像 CSS 之间的淡入淡出

我正在尝试使用 css 在 3 个图像之间进行淡入淡出。

我是 @keyframes 的新手，所以我很难让它工作。

下面是 html 和 css 代码片段：

索引.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div id="cf">
            <img class="bottom" src="assets/1.png" />
            <img class="top" src="assets/2.png" />
                <img class="bottom" src="assets/3.png">
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

样式.css：

#cf {
    position: relative;
    height: auto;
    width: auto;
    margin: 0 auto;
}

#cf img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img {
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    animation-direction: alternate;
}

#cf img:nth-of-type(1) {
    animation-delay: 4s;
}

#cf img:nth-of-type(2) {
    animation-delay: 2s;
}

#cf img:nth-of-type(3) {
    animation-delay: 0;
}

@keyframes cf3FadeInOut {
    0% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    92% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Run Code Online (Sandbox Code Playgroud)

现在，动画表现得很奇怪，在随机的动画时间从一个图像闪烁到另一个图像。

Answer 1

Chr*_*oph 5

您已接近正确的解决方案。animation-direction: alternate;使动画在达到 100% 时“向后运行”。由于在关键帧中定义了奇数时间，这会导致过渡不均匀：

keyframe        0% 17% 25%  92%   100%  92% 25% 17%  0% 17% ... infinite
state          :1   1   0    0     1     0   0   1   1   1
time in state  :   17%      62%    0%       62%         34%
transition time:        8%      8%       8%      8%

Run Code Online (Sandbox Code Playgroud)

将关键帧简化为偶数次，您应该没问题。通过均匀的时间分布，您甚至根本不需要animation-direction。您可以通过更改animation-duration关键帧和animation-delay图像轻松调整时间。

keyframe        0% 17% 25%  92%   100%  92% 25% 17%  0% 17% ... infinite
state          :1   1   0    0     1     0   0   1   1   1
time in state  :   17%      62%    0%       62%         34%
transition time:        8%      8%       8%      8%

Run Code Online (Sandbox Code Playgroud)

#cf img {
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
/* if you only want to cycle a finite amount of times, 
   simply change 'infinite' with # of iterations you need */
    animation-iteration-count: infinite; 
    animation-duration: 6s;
    animation-direction: alternate; /* not strictly necessary */
    position:absolute;
}

#cf img:nth-of-type(1) {
    animation-delay: 5s;
}

#cf img:nth-of-type(2) {
    animation-delay: 3s;
}

#cf img:nth-of-type(3) {
    /* add some delay for the first picture as well */
    animation-delay: 1s;
}

@keyframes cf3FadeInOut {
    /* distributing times evenly */
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Run Code Online (Sandbox Code Playgroud)

严格地说，前两个过渡略有不同，因为它们过渡到图片opacity:1而不是褪色图片，并且时间略有不同，但与由此产生的代码复杂性相比，差异几乎不可见，而且我不值得付出努力。

归档时间：	8 年，7 月前
查看次数：	7208 次
最近记录：	8 年，5 月前