CSS를 사용하여 \'로드\' 텍스트에 대한 무한 반복 페이딩 애니메이션을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-10-29 00:11:30

원래의

677명이 탐색했습니다.

How to Create an Infinitely Looping Fading Animation for

페이드 "로드" 텍스트를 위한 CSS 전용 애니메이션 루프 만들기

이 튜토리얼에서는 다음을 시뮬레이션하는 CSS 애니메이션을 만드는 것을 목표로 합니다. JavaScript를 사용하지 않고 페이딩 "로드" 텍스트.

문제 설명:

키프레임을 사용하여 기본 CSS 애니메이션을 만들었지만 반복되거나 페이드 인/아웃되지 않습니다. 무한히.

해결책:

루핑 애니메이션을 만들려면 animation-iteration-count 및 animation-direction 속성을 추가하세요. animation-iteration-count는 애니메이션이 반복되어야 하는 횟수를 지정하고 animation-direction은 애니메이션이 앞으로 재생되어야 하는지 또는 뒤로 재생되어야 하는지를 결정합니다.

다음으로, 더 나은 호환성을 위해 브라우저별 접두사를 포함해야 합니다.

아래 수정된 코드에는 다음 변경 사항이 포함되어 있습니다.

<code class="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 normal;
  -moz-animation: flickerAnimation 1s infinite normal;
  -o-animation: flickerAnimation 1s infinite normal;
  animation: flickerAnimation 1s infinite normal;
}</code>

로그인 후 복사

사용법:

'로딩'을 원하는 요소에 animate-flicker 클래스를 적용합니다. " 표시되는 텍스트:

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

로그인 후 복사

이렇게 하면 텍스트가 지속적으로 페이드 인/아웃되는 무한 애니메이션이 생성됩니다.

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