5

Почему анимация работает не так, как я написал?

Суть анимации: Красный блок уходит влево на 140px, после он поворачивается на 720 градусов. А в итоге получается то, что он просто 2 раза уходит влево.

Код:

.d {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #F44336;
}

#container {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}


@keyframes transformRed {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  70% {
    transform: translateX(0) rotate(0deg);  
  }
  80% {
    transform: translateX(-140px);
  }
  85% {
    transform: rotate(720deg);
  }
  100% {
     transform: translateX(-140px) rotate(720deg);
  }
}
 
#red {
  animation: transformRed 2.5s ease-out 0s 1 normal;
}
<div id = "container">
    <div id = "red" class = "d"></div>
</div>

Код на jsfiddle: https://jsfiddle.net/deloop_/t6wg275j/1/

2 ответа 2

7

Поверь, он работает так, как Вы написали.

Идем сначала:

  1. Есть функция под названием transformRed
  2. Вы задали animation-duration: 2.5s (время исполнения)
  3. Значение ease-out для animation-timing-function (плавность исполнения)
  4. 0 и 1 - неизвестно
  5. И значение normal для animation-direction (направление)

Для того, чтобы красный блок запомнил свою последнюю позицию, Вам нужен forwards
animation-fill-mode: forwards;

Готовый код:

.d {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #F44336;
}

#container {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}

@keyframes transformRed {
  0% {
    transform: translateX(0) rotate(0);
  }
  80% {
    transform: translateX(-140px) rotate(0);
  }
  100% {
    transform: translateX(-140px) rotate(360deg); // У Вас стояло 720, но я поставил 360 для примера
  }
}

#red {
  animation: transformRed ease-out 3s forwards; // Время можно изменить по желанию
}
<div id="container">
  <div id="red" class="d"></div>
</div>

1
  • 1
    "Поверь" и "Вы" применяются к одному и тому же человеку?)) нет к чему придраться, придерись к орфографии 13 янв 2019 в 19:20
6

Попробуйте так:

.d {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #F44336;
}

#container {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}

@keyframes transformRed {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-140px) rotate(0deg);
  }
  50% {
    transform: translateX(-140px) rotate(720deg);
  }
  100% {
    transform: translateX(0px);
  }
}

#red {
  animation: transformRed 2.5s ease-out 0s 1 normal;
}
<div id="container">
  <div id="red" class="d"></div>
</div>

Ваш ответ

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

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