0
<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%);
 }
}

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

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

2 ответа 2

1

Свойства 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>

0

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.