Почему translate срабатывает сразу?

Question

[DotDash]

Почему блок перемещается сразу, ведь ему прописан transition?
С hover-ом у класса axis работает как надо.

пример
с hover-ом

Answer 1

[Антон Спирин]

transition работает когда вы изменяете свойство. На примере с hover:

.class {
  color: red;
  transform: translateY(-100%);
  transition: all 1s;
}

.class:hover {
  color: blue;
  transform: translateY(-50%);
}

При наведении курсора мыши на элемент .class, в течении секунды плавно изменится цвет с красного на синий и translateY c -100% на -50%.

Comments

[DotDash]

еще так пробовал ссылка
просто мне нужно чтобы он оставался в точке назначения, вроде эффекта как в паралаксе.

[Антон Спирин]

DotDash, в точке назначения? так?

[DotDash]

Антон Спирин, сори не та ссылка, вот
хочу чтобы он доезжал до 100, 100 и там и остался.

[Антон Спирин]

DotDash, используйте значение forwards для animation-fill-mode:
animation-fill-mode: forwards;
или в короткой записи:
animation: translating 4s linear 0s forwards;
демо

[DotDash]

Антон Спирин, о, то что надо, спс.