Можно ли иметь несколько независимых анимаций преобразования?

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>

Кроме того, вы можете разбить анимацию, используя проценты в ваших ключевых кадрах вместо от и до:

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