CSS 애니메이션을 지연시켜 더 깔끔하게 만드세요

CSS 애니메이션은 놀랍고 자주 사용하지만 최근에 약간의 지연을 추가하는 것이 좋다는 것을 배웠습니다. 그러면 사용자가 실수로 마우스를 가져가도 깜박이지 않습니다.

내가 의미하는 바를 보여주기 위해 여기에서 무슨 일이 일어나고 있는지 확인하십시오.



꽤 성가신데, 이것은 더 나쁘지는 않지만 전환을 더 추가하면 매우 성가실 수 있습니다.

어떻게 해결할 수 있습니까?

CSS 전환 지연 추가

일반적으로 위의 예에서는 다음 CSS를 사용합니다.

button {
  background: #6d597a;
  transition: background 0.2s ease-in-out;
}
button:hover {
  background: #b56576;
}

충분히 공평하죠? 초기 색상에서 새 색상으로 0.2초 만에 배경에 애니메이션을 적용합니다.

그러나 너무 빨리 호버링하면 성가신 깜박임 효과가 발생합니다.

해결책은 매우 간단합니다.
소위 애니메이션 지연을 추가할 수 있습니다.

타이밍 옵션 중 첫 번째로 제공됩니다.

transition: background 0.2s 0.1s ease-in-out;

필자의 경우 두 번째 시간 매개변수(0.1)는 지연입니다.animation-delay: 0.1s를 추가합니다. 애니메이션이 작동하지 않는 시간입니다.



위에서 수정 사항이 작동하는 것을 볼 수 있습니다.
꽤 멋지죠?

이 Codepen에서 사용해 보세요.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나