Pure CSS를 사용하여 반복되는 \'로딩\' 텍스트 페이드 애니메이션을 만드는 방법은 무엇입니까?

"로딩" 텍스트 페이드 인 및 페이드 아웃을 위한 반복 CSS 애니메이션 만들기

"로딩"에 대한 지속적인 페이딩 애니메이션 효과를 얻으려면 JavaScript를 사용하지 않고 텍스트를 작성하려면 CSS 애니메이션의 세계를 탐구해 보겠습니다. 방법은 다음과 같습니다.

애니메이션 키프레임 설정

@keyframes 규칙은 특정 타임스탬프의 불투명도 값을 지정하여 애니메이션의 키프레임을 정의합니다. 우리의 경우에는 텍스트가 페이드 인 및 아웃되기를 원합니다.

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

애니메이션 적용

CSS를 사용하여 원하는 HTML 요소에 애니메이션을 적용합니다. 수업 이름. 애니메이션 속성은 키프레임 애니메이션의 이름과 지속 시간을 사용합니다.

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

브라우저 간 호환성

브라우저 간 호환성을 보장하려면 다음을 포함하는 것이 중요합니다. 애니메이션 속성에 대한 브라우저별 접두사.

<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>

HTML 통합

마지막으로 클래스 이름과 함께 HTML 요소를 추가하여 애니메이션 텍스트를 표시합니다.

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

결과

이제 애니메이션에서 "로드 중" 텍스트가 계속 페이드 인/아웃되어 반복 효과가 생성됩니다.

위 내용은 Pure CSS를 사용하여 반복되는 \'로딩\' 텍스트 페이드 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!