Почему перевод работает без перехода: все?

Question

Почему анимация работает без

transition: all

?

Это код,

.btn:link,
.btn:visited {
 }

.btn:hover {
   transform: translateY(-3px);
}

.btn:active {
   transform: translateY(-1px);
}

Как при наведении, так и при активном переводе. Что не так?

Answer 1

Преобразование не полагается на переход, чтобы сделать свою работу. работа перехода это так, чтобы преобразование "оживить"

.btn:link,
.btn:visited {}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

.transition {
  transition: all 500ms ease-in-out;
}

.blue:hover {
  color: blue;
}

.rotate:hover {
  transform: rotate(180deg);
}

<h3>TranslateY</h3>
<button class="btn">
a button with only transform
</button>

<button class="btn transition">
a button with transform and transition
</button>

<h3>Rotate (hover image)</h3>

<img class="rotate" src="https://i.stack.imgur.com/MDWO4.jpg?s=48">
<img class="rotate transition" src="https://i.stack.imgur.com/MDWO4.jpg?s=48">

<h3>Color</h3>

<p class="blue">blue on hover without transition</p>
<p class="blue transition">blue on hover with transition</p>