Why is translation working without transition: all?

user_13144257 0
Viewed 52

Why is the animation working without 

transition: all

?

This is the code,

.btn:link,
.btn:visited {
 }

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

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

Both hover and active are translating. What is wrong?

css html
1 Answers

Transform does not rely on on transition to do its job. transition's job it so make the transform "animate"

.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>

user_61788320
Related