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

#html #css #css3 #css_animation #transform

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

Суть анимации:
 Красный блок уходит влево на 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;
}

    






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

Ответы

Ответ 1

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

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


Есть функция под названием transformRed 
Вы задали animation-duration: 2.5s (время исполнения)
Значение ease-out для animation-timing-function  (плавность
исполнения)
0 и 1 - неизвестно
И значение 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; // Время можно изменить по желанию
}

  




Ответ 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(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;
}