CSS 전환 또는 애니메이션이 페이지 로드 시 텍스트에 페이드인 효과를 만들 수 있습니까?

CSS를 사용하여 페이지 로드 시 텍스트 단락 페이드인 애니메이션

질문:

CSS 전환을 활용하여 텍스트 단락을 페이지로 페이드인 효과 로드됩니까?

설명:

CSS 전환을 사용하면 요소가 지정된 기간 동안 한 스타일에서 다른 스타일로 원활하게 전환될 수 있습니다. 이 속성을 불투명도 속성에 적용하여 페이드인 효과를 활성화할 수 있습니다.

방법 1: CSS 애니메이션

자체 호출 전환의 경우 CSS 애니메이션이 더 적합합니다. 이러한 목적을 위해 특별히 설계된 전용 애니메이션 구문을 제공합니다.

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

  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

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

브라우저 지원:

• 모든 최신 브라우저
• Internet Explorer 10

방법 2: 클래스를 사용한 CSS 전환 토글

또는 클래스 토글을 사용하여 CSS 전환을 실행할 수 있습니다:

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

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

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

브라우저 지원:

• 모두 최신 브라우저
• Internet Explorer 10

방법 3: jQuery를 사용한 애니메이션

크로스 브라우저 호환성을 위해 jQuery를 사용하여 불투명도 변경에 애니메이션을 적용할 수 있습니다:

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

. 우편 방법:

[DotmailApp](http://dotmailapp.com/)에서는 효과를 높이기 위해 약간의 지연을 두고 비슷한 방법을 사용합니다. 그러나 이 기술을 사용하려면 더 광범위한 브라우저를 지원하는 jQuery 2.x가 필요합니다.

위 내용은 CSS 전환 또는 애니메이션이 페이지 로드 시 텍스트에 페이드인 효과를 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!