使用 CSS 动画更改背景图像

【问题标题】：Change background-image with CSS animation使用 CSS 动画更改背景图像
【发布时间】：2019-07-10 08:18:35
【问题描述】：

如何让这个类在 div 在视口中 2 秒后更改其背景图像？这对我来说没有改变：

.cover-gradient {
  background-image: none;
}

.cover-gradient:after {
  opacity: 1;
  transition: 0.3s;
  animation: fadeMe 2s linear;
}

@keyframes fadeMe {
  0% {
    background-image: none;
  }
  100% {
    background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
  }
}

谢谢。

【问题讨论】：

为什么要申请:after？只需应用于元素

标签： html css animation transition viewport

【解决方案1】：

在 CSS 中制作动画时，您需要在两个相似的值之间制作动画。

例如，这将起作用：

max-height: 0px; 和 max-height: 100px;

这不会：

max-height: none; 和 max-height: 100px;

但是，出于性能原因，建议在 animating in CSS 时使用 opacity 和 transform 属性

.cover-gradient {
  height: 100vh;
  width: 100vw;
  opacity: 0;
  animation: fadeMe 0.3s linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
}

@keyframes fadeMe {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

https://jsfiddle.net/hellogareth/j3ytzq52/22

【讨论】：