CSS, jQuery 또는 둘 다를 사용하여 페이지 로드 시 부드러운 페이드인 텍스트 애니메이션을 어떻게 만들 수 있습니까?

CSS를 사용하여 페이지 로드 시 페이드인 애니메이션 만들기

문제: 페이지

해결책:

CSS 애니메이션 사용

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  animation: fadein 2s;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

• CSS 애니메이션으로 이 솔루션을 구현하여 모든 최신 브라우저와의 호환성을 보장합니다. .

사용 jQuery

$("#test p").addClass("load");

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

• 페이지 로드 시 CSS 전환을 통해 페이드인을 트리거하는 클래스를 추가하려면 jQuery를 활용하세요.

DotMail 접근 방식 에뮬레이션

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

• 페이드인 효과를 모방합니다. jQuery 지연과 애니메이션의 조합을 통한 DotMail.

브라우저 호환성:

• CSS 애니메이션: 최신 브라우저 및 인터넷 익스플로러 10
• CSS 전환: 최신 브라우저 및 Internet Explorer 10
• jQuery(방법 2 및 3에 필수): 버전에 따라 다르지만 일반적으로 이전 브라우저와 상호 호환됩니다.

브라우저 지원 요구 사항과 원하는 애니메이션 사용자 정의 수준에 가장 적합한 방법을 선택하세요.

위 내용은 CSS, jQuery 또는 둘 다를 사용하여 페이지 로드 시 부드러운 페이드인 텍스트 애니메이션을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!