간단한 CSS 애니메이션 루프: 페이드 인 및 아웃 "로딩" 텍스트

CSS에서 텍스트를 페이드 인 및 아웃하는 반복 애니메이션을 만들려면 JavaScript를 사용하지 않고 다음을 고려하십시오.

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes 규칙은 애니메이션 자체를 정의합니다. 이 경우 애니메이션은 단순히 요소의 불투명도를 완전 불투명에서 완전 투명으로 변경했다가 다시 원래대로 변경합니다.

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

.animate-flicker 클래스는 해당 클래스가 있는 모든 요소에 애니메이션을 적용합니다. animation 속성은 애니메이션 이름, 각 반복 기간(이 경우 1초), 애니메이션을 무한 반복할지 여부를 지정합니다.

한 가지 주의할 점은 위 코드가 작동하지 않을 수 있다는 점입니다. 모든 브라우저에서. 더 넓은 범위의 브라우저와의 호환성을 보장하려면 애니메이션 속성에 적절한 공급업체 접두사를 추가해야 합니다. 예:

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

이 공급업체 접두사를 추가하면 애니메이션이 대부분의 최신 브라우저에서 작동합니다.