[css] transition에서 delay로 UX 향상시키기

Element에 hover할 때, opacity의 값을 변화시키는 transition을 쓰는 경우,
Element위에서 빠르게 마우스를 왔다갔다하면, 잔상처럼 보이는 경우가 있다.

이것을 delay를 적용하여 없애도록 한다. (추가로 ease-in을 적용하여, 최초발생속도를 늦춘다.)

• 테스트 : codepen

<div class="button-wrapper">
  <button>Hover me</button>
</div>

적용 전

.button-wrapper {
    opacity: 0;
    transition: opacity 0.3s;
}

.button-wrapper:hover {
    opacity: 1;
}

적용 후

delay를 .5s 줘서, 마우스를 위에서 빠르게 움직이는 경우에 잔상처럼 보이지 않는다.

.button-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease-in .5s;
}

.button-wrapper:hover {
    opacity: 1;
}