Как сделать непрерывную анимацию по квадратному пути?

Question

У меня есть блок, который я хочу анимировать таким образом:

То есть...

Начальное положение;
Вверх на 100рх;
Вправо на 100рх;
Вниз на 100рх;
Влево на 100рх – возвращение к начальному положению;

Проблема в том, что анимация работает так, что, например, при "поднятии" элемента на 100рх верх, он сразу же опускается на свое изначальное положение, и как следствие невозможно прописать четкий путь движения. Вот:

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  display: flex;
  align-items: center;
  margin-top: 100px;
  position: relative;
  animation: blocks 2s ease-in-out infinite;
}

.block_child {
  width: 100px;
  height: 100px;
  background: purple;
  border: 2px double white;
}

@keyframes blocks {

  25% {
   transform: translateY(-100px);
  }
  
  50% {
    transform: translateX(100px);
  }
  
  100% {
   
  }
}

<div class="block">
  <div class="block_child"></div>
</div>

Можно ли это сделать? Если да, то как?

Answer 1

Пример

.block {
  width: 200px;
  height: 200px;
  background: yellow;
  border: 1px dashed black;
  display: flex;
  align-items: center;
  margin-top: 100px;
  position: relative; 
}

.block_child {
  position: absolute; bottom: 0; left: 0;
  width: 100px;
  height: 100px;
  background: purple;
  border: 2px double white;
   animation: blocks 2s ease-in-out infinite;
}

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

<div class="block">
  <div class="block_child"></div>
</div>

Answer 2

SVG вариант

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         width="200" height="200" viewBox="0 0 200 200" >  

<rect width="200" height="200" fill="yellow" stroke="black" stroke-width="2"  stroke-dasharray="4" />
<rect width="100" height="100" fill="purple" stroke="black" stroke-width="2"  stroke-dasharray="4" >
  <animateTransform
    attributeName="transform"
    type="translate"
    dur="2s"
    repeatCount="indefinite"
    values="
    0,0;
    100,0;
    100,100;
    0,100;
    0,0" />  
</rect>
</svg>

БЛОГ НА HUSL

Как сделать непрерывную анимацию по квадратному пути?

Ответы (2 шт):