如何添加单独的背景动画？

Question

我正在为学校做这个项目，我需要知道如何使用我制作的这个单独的背景动画。

我尝试做一个单独的 DIV 块，但到目前为止运气不好。谁能帮帮我？

这是我当前的代码：

.bg {
  animation: bg;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

@keyframes bg {
  0% {
    background-color: hsl(180, 100%, 90%)
  }
  17% {
    background-color: hsl(240, 100%, 90%)
  }
  34% {
    background-color: hsl(300, 100%, 90%)
  }
  51% {
    background-color: hsl(0, 100%, 90%)
  }
  68% {
    background-color: hsl(60, 100%, 90%)
  }
  85% {
    background-color: hsl(120, 100%, 90%)
  }
  100% {
    background-color: hsl(180, 100%, 90%)
  }
}

<div class="bg" />
<div class="question">
  <h1>Baseball Quiz</h1>
  <h3>Made by Lordust</h3>
  <p>
    <a href="xhtml/question1.xhtml">Click here to start</a>
  </p>
</div>

Answer 1

添加

.bg {
    animation: bg;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-duration: 4s;
}

@keyframes bg {
  0% {background-color:hsl(180, 100%, 90%)}
  17% {background-color:hsl(240, 100%, 90%)}
  34% {background-color:hsl(300, 100%, 90%)}
  51% {background-color:hsl(0, 100%, 90%)}
  68% {background-color:hsl(60, 100%, 90%)}
  85% {background-color:hsl(120, 100%, 90%)}
  100% {background-color:hsl(180, 100%, 90%)}
}

    <head>
        <title>Baseball quiz</title>
        <link href="css/style.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="bg"/>
        <div class="question">
            <h1>Baseball Quiz</h1>
            <h3>Made by Lordust</h3>
            <p>
                <a href="xhtml/question1.xhtml">Click here to start</a>
            </p>
        </div>
    </body>

animation-duration: 4s;

背景 class.

如何添加单独的背景动画？

How do I add a separate background animation?

css

animation

background