将 CSS 动画淡入到另一个动画中答案

【问题标题】：Fade In Out CSS animation into another animation将 CSS 动画淡入到另一个动画中
【发布时间】：2021-08-18 23:10:20
【问题描述】：

我正在尝试为我的天气应用创建加载动画。我想在一个循环中遍历 10 秒的一系列图像，这些图像将一个接一个出现并被下一个替换。我设法做到这一点没有任何问题，但现在我想为每个图像创建一个淡入淡出过渡。

这是我的尝试：

animation: changeEmojis 9s infinite linear;

        @keyframes changeEmojis {
            0% {
                background-image: url("src/emojis/sun.png");
                animation: fadeInOut 1s;
            } 11% {
                background-image: url("src/emojis/cloud.png");
                animation: fadeInOut 1s;
            } 22% {
                background-image: url("src/emojis/cloud-with-rain.png");
                animation: fadeInOut 1s;
            } 33% {
                background-image: url("src/emojis/thunder-cloud-and-rain.png");
                animation: fadeInOut 1s;
            } 44% {
                background-image: url("src/emojis/wind.png");
                animation: fadeInOut 1s;
            } 55% {
                background-image: url("src/emojis/cloud-with-snow.png");
                animation: fadeInOut 1s;
            } 66% {
                background-image: url("src/emojis/rainbow.png");
                animation: fadeInOut 1s;
            } 77% {
                background-image: url("src/emojis/comet.png");
                animation: fadeInOut 1s;
            } 88% {
                background-image: url("src/emojis/full-moon.png");
                animation: fadeInOut 1s;
            } 100% {
                background-image: url("src/emojis/sun.png");
                animation: fadeInOut 1s;
            }
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0;
            } 50% {
                opacity: 1;
            } 100% {
                opacity: 0;
            }
        }

基本上我试图在动画中放置一个动画。但它不起作用。

有什么想法吗？提前致谢！

【问题讨论】：

你能告诉我们你的淡出关键帧设置是什么吗？你是对的，动画不是动画属性，但不透明度是，所以你应该能够构建它。
@AHaworth 关键帧在这里，你必须向下滚动代码^^

标签： css animation css-animations fade keyframe

【解决方案1】：

如您所见，animation 本身不是可动画的，但没有什么能阻止您同时指定两个动画。 animation 属性允许您指定多个动画，用逗号分隔。

.weather {
  width: 100px;
  height: 100px;
  animation: changeEmojis 6s infinite linear, fadeInOut 2s linear -1s infinite;
  background-size: contain;
}

/* https://www.flaticon.com/packs/weather-163 */
@keyframes changeEmojis {
  0% {
    background-image: url('https://image.flaticon.com/icons/png/512/1163/1163763.png');
  } 33% {
    background-image: url('https://image.flaticon.com/icons/png/512/1163/1163730.png');
  } 67% {
    background-image: url('https://image.flaticon.com/icons/png/512/1163/1163764.png');
  } 100% {
    background-image: url('https://image.flaticon.com/icons/png/512/1163/1163763.png');
  } 
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  } 50% {
    opacity: 1;
  } 100% {
    opacity: 0;
  }
}

&lt;div class="weather"&gt;&lt;/div&gt;

这里的关键是指定持续时间，以便它们以您想要的方式重叠。在我的示例中，我只在 6 秒内使用了三个天气图标，这意味着 fadeInOut 动画必须每 2 秒发生一次。 -1 秒延迟确保动画从 opacity: 1 开始。

另一种方法是将fadeInOut 烘焙到changeEmojis 动画中，方法是在您当前定义的断点之间添加不透明断点。这会更明确一点，但不是可组合的。

【讨论】：