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

Question

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

我尝试了下面代码中的示例 ( codepen )，我也尝试在元素上使用绝对位置并为 top 和 left 设置动画> 值(value)观。它提供了我正在寻找的效果，但它似乎不如使用 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>