是否可以有多个独立的变换动画？

Question

我想在同一个元素上运行两个单独的关键帧变换动画，但它似乎只运行最后一个动画。有没有办法做到这一点？

我已经尝试过下面代码中的示例 (codepen)，我也尝试过在元素上使用绝对位置并为 top 和 left 值设置动画。它给出了我正在寻找的效果，但它似乎不像使用translate 那样流畅。

@keyframes animate-x {
  from { transform: translateX(0); } to { transform: translateX(100%); }
}

@keyframes animate-y {
  from { transform: translateY(0); } to { transform: translateY(100%); }
}

.element {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform-origin: center;
  animation:
    animate-x 20s linear infinite alternate,
    animate-y 15s linear infinite alternate;
}

我希望以不同的速度同时运行 translateX 和 translateY 动画。

Answer 1

不，但您可以将多个转换指令组合到一个属性中：

@keyframes animate-y {
  from { 
    transform: translateY(0) translateX(0); 
  } 
  to { 
    transform: translateY(100%) translateX(100%); 
  }
}

.element {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform-origin: center;
  animation:
    /*animate-x 2s linear infinite alternate,*/
       animate-y 2s linear infinite alternate;
}

<div class="element"></div>

此外，您可以通过在关键帧中使用百分比而不是 from 和 to 来分解动画：

@keyframes animate-y {
  0% { 
    transform: translateY(0); 
  } 
  25% { 
    transform: translateY(100%) translateX(0); 
  }
  
  50%{
    transform: translateY(100%) translateX(100%);
  }
  
  75% {
    transform: translateY(0%) translateX(100%);
  }
}

.element {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform-origin: center;
  animation:
    /*animate-x 2s linear infinite alternate,*/
       animate-y 2s linear infinite alternate;
}

<div class="element"></div>

编辑：以不同的速度移动两个方向：

@keyframes animate-y {
  0% { 
    transform: translateY(0) translateX(0%); 
  } 
  25% { 
    transform: translateY(100%) translateX(50%); 
  }
  
  50%{
    transform: translateY(0%) translateX(100%);
  }
  
  75% {
    transform: translateY(100%) translateX(50%);
  }
}

.element {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform-origin: center;
  animation:
    /*animate-x 2s linear infinite alternate,*/
       animate-y 2s linear infinite alternate;
}

<div class="element"></div>