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

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

Susan Sarandon

풀어 주다： 2024-10-26 09:21:30

원래의

288명이 탐색했습니다.

How to Create an Infinite Fading Loop Animation for

간편한 CSS 애니메이션: "로딩" 텍스트에 대한 무한 페이딩 루프

반복적으로 페이드 인 및 페이드 아웃되는 텍스트에 대해 원활한 루프 애니메이션을 구현하려면 , 우리는 CSS 애니메이션의 세계를 탐구합니다. 초기 시도에서는 뼈대적인 프레임워크를 제공했지만 다양한 브라우저에서 애니메이션을 렌더링하는 데 필요한 정교함이 부족했습니다.

브라우저 구분 연결: 애니메이션 접두사

핵심 브라우저 간 호환성을 보장하는 것은 브라우저별 접두사에 있습니다. 이러한 접두사는 다양한 브라우저에 일관된 방식으로 애니메이션을 해석하도록 지시합니다. 다음 코드는 이러한 접두사를 통합합니다.

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

로그인 후 복사

애니메이션 적용: "로드 중" 텍스트 페이딩

애니메이션을 적용하려면 "animate- flicker" 클래스를 애니메이션하려는 텍스트가 포함된 요소에 추가합니다.

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

로그인 후 복사

매혹적인 루프를 확인하세요: 텍스트 페이드 보기

이 마지막 터치로 CSS에 의해 전적으로 구동되는 페이딩 텍스트의 끝없는 루프를 목격하여 로딩 프로세스를 나타내는 미묘하면서도 매혹적인 시각적 신호를 제공합니다.

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