NextJS 关键帧答案

【问题标题】：NextJS KeyframesNextJS 关键帧
【发布时间】：2021-08-26 02:44:15
【问题描述】：

我使用关键帧创建了一个包含 3 个图像的背景。我最初只使用 html 和 css 创建项目，但现在我正在尝试使用 NextJS 创建我的项目。

在 html/css 版本中，此转换工作正常，但在 NextJS 中，第三张图像不会显示，我得到一个白屏，但前两个工作正常。

有人可以帮我解决这个问题吗？请找到添加我的代码：

.mainheader {
  height: 100vh;
  position: relative;
  color: #fff;
  animation: animate ease-in-out 10s infinite;
  background-size: cover;
}
@keyframes animate {
  0%,
  100% {
    background-image: url(../assets/afbeeldingen/bg-3.jpg)
      url(../assets/afbeeldingen/bg-1.jpg);
  }
  33% {
    background-image: url(../assets/afbeeldingen/bg-1.jpg),
      url(../assets/afbeeldingen/bg-2.jpg);
  }
  66% {
    background-image: url(../assets/afbeeldingen/bg-2.jpg),
      url(../assets/afbeeldingen/bg-3.jpg);
  }
}

【问题讨论】：

也许你的css文件被处理了。

标签： html css reactjs next.js

【解决方案1】：

首先，我不知道这是否适用于您的情况，因为您没有提供问题代码的链接或 sn-p。我在使用slideshow css animation 时遇到了同样的问题。

#slideset1 > * {
    position: absolute;
    height: 10rem;
    top: 0;
    left: -22.5rem;
    animation: 12s autoplay1 infinite ease-in-out;
}

HTML/CSS 代码在 codepen 上工作，但是当转移到 nextjs 环境时，它只是没有动画。在尝试了各种建议后，解决它的是this from Alex Galays。不要使用动画属性的简写，而是指定您单独使用的每个动画属性。

#slideset2 > * {
  position: absolute;
  height: 10rem;
  top: 25rem;
  left: 0;
  animation-duration: 12s;
  animation-name: autoplay2;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

你可以看到它在工作here on codesandbox 无法/没有测试您的案例，但您可以将其应用于您自己的代码。

【讨论】：