CSS3로 부드럽게 사라지는 깜박이는 텍스트를 만드는 방법은 무엇입니까?

CSS 3을 사용하면 텍스트 깜박임이 쉬워집니다

질문:

어떻게 깜박이게 만들 수 있나요? 텍스트가 완전히 페이드 아웃되거나 사라지는 것이 아니라 점차적으로 페이드 아웃되었다가 다시 페이드 인되는 방식입니다. 즉시 다시 나타나나요?

답변:

이 효과를 얻으려면 애니메이션 키프레임 정의에서 불투명도를 50%에서 0으로 설정해야 합니다. 이렇게 하면 애니메이션 주기 동안 텍스트가 점차 페이드 아웃되었다가 다시 페이드 인됩니다.

코드 수정:

이전 코드는 다음과 같습니다.

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

문제를 해결하려면 다음으로 바꾸세요.

@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}

이 수정 사항은 애니메이션 지속 시간의 50%에서 텍스트가 페이드 아웃되고 나머지 50% 동안 점차적으로 다시 페이드 인됩니다.

데모:

<div>
<pre class="brush:php;toolbar:false">.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

그리고 거기에 있어요! CSS 3의 애니메이션 기능 덕분에 원활한 페이드 인/아웃 효과로 텍스트를 깜박입니다.