원활한 페이지 로딩을 위해 CSS3 애니메이션을 사용하는 방법

이 문서에서는 원활한 페이지 로딩을 위해 CSS3 애니메이션을 사용하는 방법을 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

Apple.com 제품 페이지에서 볼 수 있는 미묘한 애니메이션에 깊은 인상을 받았습니다. 일반적으로 페이지가 로드될 때 재생되는 애니메이션으로 시작됩니다. 여기서 요소는 슬라이딩/페이드 인을 통해 페이지에 소개됩니다. 매우 미묘하지만 사용자에게는 매우 만족스럽습니다.

최근에 잔물결 없이 간단한 애니메이션 효과를 추가하는 데 몇 가지 문제가 있어 경험이 망가지는 것을 발견했습니다.

페이지 로드 시 애니메이션을 재생할 때의 문제점은 많은 리소스(DOM을 조작하는 이미지 및 스크립트 포함)로 인해 브라우저가 다시 그리기/재배치된다는 것입니다. 애니메이션을 재생하려고 할 때 브라우저 리소스와 경쟁하여 프레임이 삭제됩니다. (권장 튜토리얼: css3 비디오 튜토리얼)

한 가지 해결 방법은 애니메이션이 재생되기 전에 페이지가 그려질 수 있도록 애니메이션 시작을 지연시키는 것입니다.

일반적으로 요소가 페이지에 소개/표시되면 해당 요소는 숨겨지고(불투명도: 0) 시간이 지남에 따라 완전한 불투명도를 얻게 됩니다.

애니메이션 속성에는 '지연' 매개변수가 있지만 이 매개변수에 시간을 지정하면 최종 프레임에 지정된 지연 길이로 요소가 표시됩니다. 그런 다음 요소를 숨기고 완전 불투명하게 애니메이션을 적용합니다. 이는 바람직하지 않은 효과입니다. 우리는 지연 동안 마지막 키프레임을 보고 싶지 않습니다.

지연 중에 요소가 표시되지 않도록 하려면 다음 단계를 따르세요.

1) 애니메이션을 적용할 HTML에 div를 만듭니다.
2) CSS 파일에 키프레임을 만듭니다. 기본적으로 이 내용은 어떻게 변경되는지 정의합니다. 불투명도 0 ~ 불투명도 100)

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

3) CSS에 div 태그를 생성하고 애니메이션(지속 시간, 시작 지연 등)을 정의한 후 키프레임

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s}

키에 연결하려면 다음을 사용하세요.

animation-fill-mode:forwards

및

opacity: 0

이를 결합하면 지정된 지연(불투명도: 0)으로 애니메이션하려는 요소를 숨기고 애니메이션이 마지막 키프레임 중지(불투명도: 1)에 강제로 위치하도록 합니다.

위 내용은 원활한 페이지 로딩을 위해 CSS3 애니메이션을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!