如何在一个中使用多个关键帧动画？答案

【问题标题】：How to use multiple keyframe animations in one?如何在一个中使用多个关键帧动画？
【发布时间】：2017-05-22 10:33:31
【问题描述】：

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

@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>

【问题讨论】：

众所周知，所有的浏览器都是基于webkit的。在所有属性前加上-webkit- 绝对没有问题。实际上，您还应该使用-webkit-display: -webkit-block，以防万一，-webkit-webkit-display: -webkit-webkit-block。讽刺>
@Oriol 你缺少显示：-webkit-block;和 -webkit-display: 块； - 以防万一

标签： html css css-animations

【解决方案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>

【讨论】：