제공된 콘텐츠에 맞는 몇 가지 질문 스타일 제목은 다음과 같습니다. * CSS 애니메이션 루프: JavaScript 없이 텍스트를 무한히 페이드 인 및 페이드 아웃하는 방법은 무엇입니까? * CS에서 텍스트에 대한 무한 페이딩 루프 만들기

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

질문

무한을 어떻게 만드나요? JavaScript를 사용하지 않고 텍스트를 페이드 인/아웃하는 CSS 애니메이션을 반복하시겠습니까? 시도해도 문제가 해결되지 않습니다.

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

답변

브라우저 간 호환성을 보장하려면 CSS에 공급업체 접두사를 포함하세요.

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

업데이트된 코드 사용 다음 HTML을 사용하세요:

<div class="animate-flicker">Loading...</div>

위 내용은 제공된 콘텐츠에 맞는 몇 가지 질문 스타일 제목은 다음과 같습니다. * CSS 애니메이션 루프: JavaScript 없이 텍스트를 무한히 페이드 인 및 페이드 아웃하는 방법은 무엇입니까? * CS에서 텍스트에 대한 무한 페이딩 루프 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!