JavaScript 없이 CSS 페이드 인 & 아웃 \"로딩\" 텍스트 애니메이션 루프를 만드는 방법은 무엇입니까?

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

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

<code class="css">@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}</code>

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

<code class="css">.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}</code>

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

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

<code class="css">.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}</code>

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

위 내용은 JavaScript 없이 CSS 페이드 인 & 아웃 \"로딩\" 텍스트 애니메이션 루프를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!