html - 如何在一个中使用多个关键帧动画？

Question

我想使用两个不同的关键帧动画，但是当我命名第二个动画时它似乎不起作用。基本上我想将第一个动画添加到第一个包装器，同时将第二个动画添加到第二个包装器，为什么这不起作用？

@keyframes scroll {
  0% {
    -webkit-transform: translate(-30%, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}
@keyframes second {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-200%, 0);
  }
}
.marquee {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.wrapper {
  background-color: lightblue;
  display: inline-block;
  padding-left: 100%;
  animation: scroll 20s infinite linear;
}
.wrapper div {
  background-color: whitesmoke;
  display: inline-block;
  margin-right: 10rem;
}
.wrapper div:last-child {
  margin-right: 0px;
}
.wrapper2 {
  background-color: lightblue;
  display: inline-block;
  padding-left: 100%;
  animation: second 40s infinite linear;
}
.wrapper2 div {
  background-color: whitesmoke;
  display: inline-block;
  margin-right: 10rem;
}
.wrapper2 div:last-child {
  margin-right: 0px;
}

<div class="marquee">
  <div class="wrapper">
    <div>Akinfenwa</div>
    <div>Dickenson</div>
    <div>Watkins</div>
    <div>Cowan-Hall</div>
  </div>
  <div class="wrapper2">
    <div>Akinfenwa</div>
    <div>Dickenson</div>
    <div>Watkins</div>
    <div>Cowan-Hall</div>
  </div>
</div>

Answer 1

@keyframes scroll {
  0% {
    -webkit-transform: translate(-30%, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}
@keyframes second {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-200%, 0);
  }
}
.marquee {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.wrapper {
  background-color: lightblue;
  display: inline-block;
  padding-left: 100%;
  animation: scroll 10s infinite linear;
}
.wrapper div {
  background-color: whitesmoke;
  display: inline-block;
  margin-right: 10rem;
}
.wrapper div:last-child {
  margin-right: 0px;
}
.wrapper2 {
  background-color: lightblue;
  display: inline-block;
  padding-left: 100%;
  animation: second 20s infinite linear;
}
.wrapper2 div {
  background-color: whitesmoke;
  display: inline-block;
  margin-right: 10rem;
}
.wrapper2 div:last-child {
  margin-right: 0px;
}

<div class="marquee">
  <div class="wrapper">
    <div>Akinfenwa</div>
    <div>Dickenson</div>
    <div>Watkins</div>
    <div>Cowan-Hall</div>
  </div>
  <div class="wrapper2">
    <div>Akinfenwa2</div>
    <div>Dickenson2</div>
    <div>Watkins2</div>
    <div>Cowan-Hall2</div>
  </div>
</div>