Как сделать 2 цепных преобразования, первое с переходом и следующее без переходов? - PullRequest
Новая
       54

Как сделать 2 цепных преобразования, первое с переходом и следующее без переходов?

0 голосов
/ 03 декабря 2018

Мне нужно добавить 2 цепных преобразования, одно анимированное, а второе без анимации.Что-то вроде: 

transition: transform 500ms;
transform: translateX(100%);

, а затем, через 500 мс: 

transform: translateX(200%); // this time without any transition or, in other words, with transition time == 0ms.

Таким образом, объект будет переводить первые 100% ширины на оси X с анимацией, а затем непосредственно идти дальшедо 200% без анимации, просто набор.

Как?

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете использовать анимацию, как показано ниже: 

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 1s forwards;
}

@keyframes change {
  50% {
    transform: translateX(100%);
  }
  50.1%, 100% { /*change right after 50%*/
    transform: translateX(200%);
  }
}
<div class="box"></div>

При переходе вы можете рассмотреть 2 деления: 

.container {
  display:inline-block;
  transition:0s 0.5s transform;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition:0.5s transform;
}

body:hover .container,
body:hover .box{
  transform: translateX(100%);
}
<div class="container">
<div class="box"></div>
</div>
...