Why does translate work right away?

Question

css

Why does the block move immediately, because it has a transition?
With hover, the axis class works as it should. hover
example

Answer 1

transition works when you change a property. On the hover example :

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

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

When hovering over the .class element, the color will fade from red to blue and translateY from -100% to -50% within a second.