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;
}

我希望以不同的速度同时运行transformX和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>

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

1 个答案: