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

Posted 2023-03-04

【中文标题】如何在一个中使用多个关键帧动画？

【英文标题】：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: 块； - 以防万一

【参考方案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>