NextJS Tailwind - 纯 CSS 动画不起作用

Question

我正在尝试让我在这里找到的动画工作：https://codepen.io/goodkatz/pen/LYPGxQz。

我将一些动画代码移动到了 React 组件的顺风中，并将一些代码保留为纯 css。当我在 Storybook 中运行该组件时，它就像一个魅力，但是当我使用 next dev 运行它时，动画不起作用，它什么也不会移动。

这是组件：

import React from "react";
import "../../styles/WavesBackground.module.css";

export interface WavesBackgroundProps extends React.PropsWithChildren {}

export const WavesBackground: React.FC<WavesBackgroundProps> = () => {
  return (
    <div className="relative text-center bg-gradient-to-t from-lightgreen to-darkgreen m-0 p-0 w-full h-4/6">
      <div>
        <div className="m-0 p-0 w-full h-4/6 flex justify-center items-center text-center">
          <h1 className="font-light tracking-wide text-5xl h-24"></h1>
        </div>
        <svg
          className="waves relative w-full h-1/3 max-h-96 min-h-150px"
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28"
          preserveAspectRatio="none"
          shapeRendering="auto"
        >
          <defs>
            <path
              id="gentle-wave"
              d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
            />
          </defs>
          <g className="parallax">
            <use
              xlinkHref="#gentle-wave"
              x="48"
              y="0"
              fill="rgba(255,255,255,0.7"
            />
            <use
              xlinkHref="#gentle-wave"
              x="48"
              y="3"
              fill="rgba(255,255,255,0.5)"
            />
            <use
              xlinkHref="#gentle-wave"
              x="48"
              y="5"
              fill="rgba(255,255,255,0.3)"
            />
            <use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
          </g>
        </svg>
      </div>
    </div>
  );
};

这是纯 CSS 文件：

.waves {
  position: relative;
  width: 100%;
  height: 20vh;
  margin-bottom: -7px; /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}

/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }
  .content {
    height: 30vh;
  }
}

Answer 1

我不知道这是否是修复它的最佳方法，但它通过将 css 从 module.css 文件中移到 globa.css 文件中得到修复。