为什么CSS背景过渡不平滑？

Question

我正在尝试为我的标题背景图像设置动画，但过渡并不像我在教程中看到的那样顺利。 （忽略渐变）

animation: slide 10s infinite;
@keyframes slide {
    0% {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
            ),url("imgs/header-1.jpg");
    }

    33% {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
            ),url("imgs/header-2.jpg");
    }

    67% {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
            ),url("imgs/header-3.jpg");
    }
}

Answer 1

UPD： 尽管根据文档

background-image

属性无法进行动画处理，但它可能在某些环境中起作用。例如，chrome 浏览器允许显示

background-image

的过渡。但是，它应该仅包含

url(/path/to/img)

，而不包含任何其他属性。因此，在您的情况下，只需删除关键帧中的所有渐变定义，如下所示：

@keyframes slide {
    0% {
        background-image: url("imgs/header-1.jpg");
    }

    33% {
        background-image: url("imgs/header-2.jpg");
    }

    67% {
        background-image: url("imgs/header-3.jpg");
    }
}

可靠的方法：

好的，所以代码中的主要问题是

background-image

属性不应设置动画。 但是，实现所需的过渡效果是可能的：您需要将多个块将图像一个一个地放置在另一个块上，并且每隔几秒钟更改它们的不透明度。

opacity

属性可以动画化，所以一般效果会很流畅。

这是一个例子：

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

.container {
  width: 400px;
  height: 400px;
  position: relative;
}

.animated-image {
  position: absolute;
  width: 100%;
  height: 100%;
  animation-name: fadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 9s;
  animation-direction: alternate;
}

.animated-image:nth-of-type(1) {
  animation-delay: 6s;
}

.animated-image:nth-of-type(2) {
  animation-delay: 3s;
}

.animated-image:nth-of-type(3) {
  animation-delay: 0s;
}

.image-1 {
  background-image: url(https://i.picsum.photos/id/299/400/400.jpg?hmac=JWLtcI8nmHDFvbS34TW5_MfzwOHSkXpWDLoXlNLyfAA);
}

.image-2 {
  background-image: url(https://i.picsum.photos/id/147/400/400.jpg?hmac=EtobpNQI_FLctas3TyOZMRQX362T9SCJs1rvd1S7d8Y);
}

.image-3 {
  background-image: url(https://i.picsum.photos/id/906/400/400.jpg?hmac=VO0HSf238e6GuEC7_yx1TKPO9Z0iZgl7BgmoWyjNbXo);
}

<div class="container">
  <div class="animated-image image-1"></div>
  <div class="animated-image image-2"></div>
  <div class="animated-image image-3"></div>
</div>

请注意，您可以对任何类型的 HTML 元素执行此技巧，因此如果您愿意，可以使用

img

标签而不是带有

background-image

的 div。

Answer 2

background-image

是无法根据 MDN 进行动画处理的 CSS 属性之一。

它可能在某些地方有效，但这不是标准行为。

Answer 3

我对我的背景进行了动画处理，并在 Edge、Firefox 和 Chrome 上进行了测试，并在所有这些设备上进行了工作。 这是我使用 React 和 Tailwind 的工作代码，但是，它在纯 JS 和 CSS 上应该没有什么不同：

import React from "react";

const Showcase = () => {
  return (
    <div className="w-screen h-screen bg-[url('../images/YOUR-BG-IMAGE.jpeg')] bg-top animate-background"></div>
  );
};

export default Showcase;

对于 tailwind.config.js 中的动画（您可以轻松地在 CSS 上完成），您应该添加关键帧和动画。

module.exports = {
  theme: {extend: {keyframes: {bg: {
          "0%, 100%": {
            "background-position": "top",
          },
          "50%": {
            "background-position": "bottom",
          },
        },
      },animation: {"background": "bg 15s linear infinite",
      },
    },
  },};

就是这样。现在您应该在页面上导入组件（或使用 HTML 形式的代码）并查看结果。 祝你好运:)