CoverT 31: Different Transition Each Direction

codeInteractive Code Example

The transition property can be set for selectors in such a way that the visual effect is different when the active selector is switched.

It feels like a different effect is happening when switching directions.

Example

<div class="my-box">
  Hover over me!
</div>
.my-box {
  font-size: 15px;
  border: 5px solid;
  text-align: center;
  transition: 
    all /* property */
    ease-in /* timing function */
    1s /* duration */
    50ms /* delay */;
}

.my-box:hover {
  font-size: 20px;
  color: green;
  border-color: red;
  padding: 20px;

  transition: 
    all /* property */
    steps(5, end) /* timing function */
    2s /* duration */
    50ms /* delay */;
}

Result

Hover over me!