Неправильно работает transform При анимации

Question

<div class="main">
  <img src="./images/small.jpg" />
</div>


img {
width: 50px;
height: 50px;
animation: move 5s 1;
}
.main {
width: 300px;
height: 300px;
border: 3px solid black;
background-color: blue;
}

@keyframes move {
25% {
    transform: translateX(500%);
}
50% {
   transform: translateY(500%);
 }
}

Начал делать анимацию, на фотографии я выделил то как я хочу чтобы она происходила красным цветом, а то как она происходит - черным. Наверное я какой-то момент упустил, поэтому не понимаю почему она так работает

Я написал только пол анимации, не доделал тк работает неправильно

Answer 1

transform в разных местах не складываются.

Сейчас сначала передвигается по оси X

25% {
    transform: translateX(500%);
}

Затем перемещение сбрасывается и передвигается по Y

50% {
   transform: translateY(500%);
 }

Для решения достаточно изменять обе координаты

.ball {
  width: 50px;
  height: 50px;
  animation: move 5s 1;
  background: red;
}

.main {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  background-color: blue;
}

@keyframes move {
  0 {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(500%, 0);
  }
  50% {
    transform: translate(500%, 500%);
  }
  75% {
    transform: translate(0, 500%);
  }
}

<div class="main">
  <div class="ball"></div>
</div>

Answer 2

Свойства transform трансформируют от начального значения, нужно это учитывать:

img {
width: 50px;
height: 50px;
animation: move 5s 1;
}
.main {
width: 300px;
height: 300px;
border: 3px solid black;
background-color: blue;
}

@keyframes move {
25% {
    transform: translateX(500%);
}
50% {
   transform: translateX(500%) translateY(500%);
 }
 75% {
   transform: translateX(0) translateY(500%);
 }
}

<div class="main">
  <img src="https://cdn-icons-png.flaticon.com/512/123/123431.png" />
</div>

БЛОГ НА HUSL

Неправильно работает transform При анимации

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