CSS의 애니메이션 입구를위한 편리한 작은 시스템

웹 사이트는 정적 문서 일뿐 만 아니라 일부 세부 사항으로 인해 웹 사이트를보다 생생하고 흥미롭게 만들 수 있습니다. 웹 페이지 컨텐츠가 직접 표시되지 않고 팝업, 슬라이드, 페이드 인 또는 회전 방식으로 나타나면 어떻게됩니까? 이러한 애니메이션은 항상 실용적이지는 않지만 경우에 따라 특정 요소에 대한 사용자의 관심을 끌고 요소 간의 차이를 강화하며 상태 변경을 나타내므로 완전히 쓸모가 없습니다.

그래서 시야에 들어갈 때 애니메이션 효과를 요소에 추가하기위한 CSS 도구 세트를 만들었습니다. 예, 이것은 완전히 순수한 CSS 구현입니다. 여러 애니메이션과 변형을 제공 할뿐만 아니라 애니메이션의 인터리빙 효과도 지원하며, 이는 장면을 만드는 것과 거의 같습니다.

예를 들어 : 다음과 같이

이것은 실제로이 고급 버전의 단순화 된 버전 일뿐입니다.

먼저 애니메이션 생성의 기본 사항을 설명한 다음 추가 세부 정보, 애니메이션을 인터 리브하는 방법 및 HTML 요소에 적용하는 방법을 소개하고 마지막으로, 사용자의 감소 된 이동 선호도와 관련 하여이 모든 것을 달성하는 방법을 볼 수 있습니다.

기본 지식

핵심 아이디어는 간단한 CSS @keyframes 애니메이션을 추가하고로드 할 때 페이지를 애니메이션하기 위해 원하는 것에 적용하는 것입니다. 요소가 희미 해지고 opacity: 0 에서 opacity: 1 로 바꾸게합시다.

 .animate {
  애니메이션 기간 : 0.5S;
  애니메이션 이름 : 애니메이션 페이드;
  애니메이션 지연 : 0.5S;
  애니메이션 필 모드 : 거꾸로;
}

@keyframes Animate-Fade {
  0% {불투명도 : 0;
  100% {불투명도 :};
}

웹 사이트의 나머지 부분이 먼저로드 할 수 있도록 0.5 초 animation-delay 도 있습니다. animation-fill-mode: backwards 페이지가로드 될 때 초기 애니메이션 상태가 활성화되도록하는 데 사용됩니다. 이것 없이는 우리의 애니메이션 요소가 우리가 원하기 전에 나타납니다.

우리가 게으르면, 우리는 여기서 멈출 수 있습니다. 그러나 CSS- 트릭 독자는 분명히 게으르지 않을 것이므로 시스템을 사용하여 이런 종류의 일을 개선하는 방법을 살펴 보겠습니다.

더 멋진 애니메이션

하나 또는 두 개의 애니메이션을 사용하는 것보다 다양한 애니메이션을 갖는 것이 더 재미 있습니다. 더 많은 애니메이션을 만들기 위해 많은 새로운 @keyframes 만들 필요조차 없습니다. 새 클래스를 만드는 것은 매우 간단합니다. 애니메이션에서 사용하는 프레임을 변경하고 항상 동일하게 유지하면됩니다.

CSS 애니메이션의 수는 거의 무제한입니다. (거대한 컬렉션 인 Animate.style 참조.) blur() , brightness() 및 saturate() 과 같은 CSS 필터 및 CSS 변환을 사용하여 더 많은 변형을 생성 할 수 있습니다.

그러나 이제 CSS 변환을 사용하여 요소를 "팝업"으로 만드는 새로운 애니메이션 클래스부터 시작하겠습니다.

 .animate.pop {
  애니메이션 기간 : 0.5S;
  애니메이션-이름 : 애니메이션 팝;
  애니메이션 타이밍 기능 : 입방-베 지어 (.26, .53, .74, 1.48);
}

@keyframes animate-pop {
  0% {
    불투명도 : 0;
    변환 : 스케일 (0.5, 0.5);
  }

  100% {
    불투명도 : 1;
    변환 : 스케일 (1, 1);
  }
}

탄력적 인 반동 효과를 위해 Lea Verou의 필수 입방 -Bezier.com에서 작은 cubic-bezier() 시간 곡선을 추가했습니다.

지연을 추가하십시오

우리는 더 잘할 수 있습니다! 예를 들어, 우리는 다른 시간에 요소를 애니메이션으로 만들 수 있습니다. 이로 인해 인터리빙 효과가 발생하여 많은 코드가 필요하지 않고 복잡한 모션을 만듭니다.

CSS 필터, CSS 변환 및 3 페이지 요소에서 약 10 분의 1 초의 인터리브 애니메이션을 사용하면 기분이 좋습니다.

우리가하는 일은 각 요소마다 새로운 클래스를 만드는 것입니다. 각 요소가 1 분의 1의 1 분의 1 인 animation-delay 값을 사용하여 요소가 애니메이션을 시작하는 시간을 분리하는 것입니다.

 .Delay-1 {애니메이션-지연 : 0.6S;  
.Delay-2 {애니메이션-델리 : 0.7S;
.Delay-3 {애니메이션-지연 : 0.8S;

다른 모든 것은 정확히 동일합니다. 기본 대기 시간은 0.5 초 이므로이 헬퍼 클래스는 거기에서 계산을 시작합니다.

접근성 환경 설정을 존중하십시오

훌륭한 웹 시민이되고 스포츠 선호도를 줄인 사용자를위한 애니메이션을 제거합시다.

 @Media 화면 및 (선호 감소 모션 : 감소) {
  .Animate {애니메이션 : None!};
}

이런 식으로, 애니메이션이로드되지 않으며 요소가 정상적으로 시야에 들어갑니다. "감소"운동이 항상 "제거"움직임을 의미하는 것은 아니며, 이는 상기시킬 가치가 있습니다.

HTML 요소에 애니메이션을 적용하십시오

지금까지 우리는 기본 애니메이션뿐만 아니라 약간 더 발전된 애니메이션을 살펴 보았습니다.이 애니메이션은 인터리브 된 애니메이션 지연 (새 클래스에 포함)으로 더 발전 할 수 있습니다. 또한 사용자의 스포츠 선호도를 동시에 존중하는 방법도 있습니다.

이러한 개념을 보여주는 실시간 시연이 있지만 실제로 우리의 작업을 HTML에 적용하는 방법을 다루지 않습니다. 멋진 점은 DIV, 스팬, 기사, 헤더, 섹션, 테이블, 양식 등 거의 모든 요소에서 사용할 수 있다는 것입니다.

우리가 할 일은 다음과 같습니다. 우리는 3 개의 HTML 요소에서 애니메이션 시스템을 사용하고 싶습니다. 각각 3 개의 클래스를 얻습니다. 모든 애니메이션 코드를 요소 자체로 하드 코딩 할 수 있지만 분할하면 재사용 가능한 애니메이션 시스템을 얻을 수 있습니다.

• .animate : 이것은 핵심 애니메이션 선언과 시간을 포함하는 기본 클래스입니다.
• 애니메이션 유형 : 이전 "팝업"애니메이션을 사용하지만 페이드 인 애니메이션도 사용할 수도 있습니다. 이 클래스는 기술적으로 선택 사항이지만 다른 움직임을 적용하는 좋은 방법입니다.
• .지연- : 앞에서 언급했듯이 각 요소에서 애니메이션이 시작될 시간을 인터 리브하여 깔끔한 효과를 얻을 수 있습니다. 이 클래스도 선택 사항입니다.

따라서 우리의 애니메이션 요소는 이제 다음과 같이 보일 수 있습니다.

<h2> 하나!</h2>
<h2>둘!</h2>
<h2>삼!</h2>

그들을 세다!

결론적으로

확인 : 우리는 겉보기에 기본적인 @keyframes 세트로 시작하여 시야에 들어가는 요소에 대한 흥미로운 애니메이션을 적용하기 위해 완전한 시스템으로 전환합니다.

이것은 물론 매우 흥미 롭습니다. 그러나 저에게 가장 큰 테이크 아웃은 우리가 보는 예제가 기준선, 다양한 유형의 애니메이션, 인터리브 지연 및 사용자 모션 환경 설정을 존중하는 데 사용할 수있는 완전한 시스템을 형성한다는 것입니다. 저에게있어, 이것들은 유연하고 사용하기 쉬운 시스템의 모든 요소입니다. 그것은 우리에게 여분의 스크랩이없는 아주 작은 물건을 많이 주었다.

우리가 다루는 것은 실제로 완전한 애니메이션 라이브러리가 될 수 있습니다. 그러나 물론 나는 거기서 멈추지 않았습니다. 모든 CSS 애니메이션 파일을 제공했습니다. 지연이 다른 15 개의 클래스를 포함하여 몇 가지 애니메이션 유형이 있습니다. 나는 내 프로젝트에서 이것들을 사용해 왔지만 이것은 여전히 ​​초기 버전이며 그것에 대한 피드백을 받고 싶습니다. 의견을 보내 주시고 의견에 대해 어떻게 생각하는지 알려주세요!

 /* ====================================================================================================================================
Rogue Amoeba의 Neale Van Fleet의 애니메이션 시스템
===============================================================================================
.animate {
  애니메이션 기간 : 0.75s;
  애니메이션 지연 : 0.5S;
  애니메이션 이름 : 애니메이션 페이드;
  애니메이션 타이밍 기능 : 입방-베 지어 (.26, .53, .74, 1.48);
  애니메이션 필 모드 : 거꾸로;
}

/ * 페이드 */
.animate.fade {
  애니메이션 이름 : 애니메이션 페이드;
  애니메이션 타이밍 기능 : 용이성;
}

@keyframes Animate-Fade {
  0% {불투명도 : 0;
  100% {불투명도 :};
}

/ * 팝에서 */
.animate.pop {Animation-name : animate-pop};

@keyframes animate-pop {
  0% {
    불투명도 : 0;
    변환 : 스케일 (0.5, 0.5);
  }
  100% {
    불투명도 : 1;
    변환 : 스케일 (1, 1);
  }
}

/ * 흐림 */
.animate.blur {
  애니메이션-이름 : 애니메이션 블러;
  애니메이션 타이밍 기능 : 용이성;
}

@keyframes animate-blur {
  0% {
    불투명도 : 0;
    필터 : 블러 (15px);
  }
  100% {
    불투명도 : 1;
    필터 : 블러 (0px);
  }
}

/ * 빛의 */
.animate.glow {
  애니메이션-이름 : 애니메이션 글로우;
  애니메이션 타이밍 기능 : 용이성;
}

@keyframes Animate-Glow {
  0% {
    불투명도 : 0;
    필터 : 밝기 (3) 포화 (3);
    변환 : 스케일 (0.8, 0.8);
  }
  100% {
    불투명도 : 1;
    필터 : 밝기 (1) 포화 (1);
    변환 : 스케일 (1, 1);
  }
}

/ * 성장 */
.Animate.Grow {애니메이션-이름 :};

@keyframes Animate-Grow {
  0% {
    불투명도 : 0;
    변환 : 스케일 (1, 0);
    가시성 : 숨겨진;
  }
  100% {
    불투명도 : 1;
    변환 : 스케일 (1, 1);
  }
}

/ * splat in */
.animate.splat {Animation-Name : Animate-Splat};

@keyframes animate-splat {
  0% {
    불투명도 : 0;
    변환 : scale (0, 0) 회전 (20deg) 번역 (0, -30px);
    }
  70% {
    불투명도 : 1;
    변환 : 스케일 (1.1, 1.1) 회전 (15deg);
  }
  85% {
    불투명도 : 1;
    변환 : 스케일 (1.1, 1.1) 회전 (15deg) 번역 (0, -10px);
  }

  100% {
    불투명도 : 1;
    변환 : 스케일 (1, 1) 회전 (0) 번역 (0, 0);
  }
}

/ * 롤에 */
.animate.roll {Animation-name : animate-roll}

@keyframes animate-roll {
  0% {
    불투명도 : 0;
    변환 : 스케일 (0, 0) 회전 (360deg);
  }
  100% {
    불투명도 : 1;
    변환 : 스케일 (1, 1) 회전 (0DEG);
  }
}

/ * */
.animate.flip {
  애니메이션-이름 : 애니메이션 플립;
  변환 스타일 : Preserve-3D;
  관점 : 1000px;
}

@keyframes animate-flip {
  0% {
    불투명도 : 0;
    변환 : rotatex (-120deg) 스케일 (0.9, 0.9);
  }
  100% {
    불투명도 : 1;
    변환 : ROTATEX (0DEG) 스케일 (1, 1);
  }
}

/ * 스핀에서 */
.animate.spin {
  애니메이션-이름 : 애니메이션 스핀;
  변환 스타일 : Preserve-3D;
  관점 : 1000px;
}

@keyframes animate-spin {
  0% {
    불투명도 : 0;
    변환 : Rotatey (-120deg) 스케일 (0.9, .9);
  }
  100% {
    불투명도 : 1;
    변환 : 회전 (0DEG) 스케일 (1, 1);
  }
}

/ * 슬라이드 */
.animate.slide {Animation-name : 애니메이션 슬라이드};

@keyframes Animate-Slide {
  0% {
    불투명도 : 0;
    변환 : 번역 (0, 20px);
  }
  100% {
    불투명도 : 1;
    변환 : 번역 (0, 0);
  }
}

/ * 삭제 */
.animate.drop { 
  애니메이션-이름 : 애니메이션 드롭; 
  애니메이션 타이밍 기능 : 입방-베 지어 (.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  불투명도 : 0;
  변환 : 번역 (0, -300px) 스케일 (0.9, 1.1);
}
95% {
  불투명도 : 1;
  변환 : (0, 0) 스케일 (0.9, 1.1);
}
96% {
  불투명도 : 1;
  변환 : 번역 (10px, 0) 스케일 (1.2, 0.9);
}
97% {
  불투명도 : 1;
  변환 : 번역 (-10px, 0) 스케일 (1.2, 0.9);
}
98% {
  불투명도 : 1;
  변환 : 번역 (5px, 0) 스케일 (1.1, 0.9);
}
99% {
  불투명도 : 1;
  변환 : 번역 (-5px, 0) 스케일 (1.1, 0.9);
}
100% {
  불투명도 : 1;
  변환 : 번역 (0, 0) 스케일 (1, 1);
  }
}

/ * 애니메이션 지연 */
.Delay-1 {
  애니메이션-지연 : 0.6S;
}
.Delay-2 {
  애니메이션-지연 : 0.7S;
}
.Delay-3 {
  애니메이션-지연 : 0.8S;
}
.Delay-4 {
  애니메이션-지연 : 0.9S;
}
.Delay-5 {
  애니메이션-지연 : 1s;
}
.Delay-6 {
  애니메이션 지연 : 1.1S;
}
.Delay-7 {
  애니메이션-지연 : 1.2S;
}
.Delay-8 {
  애니메이션-지연 : 1.3S;
}
.Delay-9 {
  애니메이션-지연 : 1.4S;
}
.Delay-10 {
  애니메이션 지연 : 1.5S;
}
.Delay-11 {
  애니메이션-지연 : 1.6S;
}
.Delay-12 {
  애니메이션-지연 : 1.7S;
}
.Delay-13 {
  애니메이션-지연 : 1.8S;
}
.Delay-14 {
  애니메이션-지연 : 1.9S;
}
.Delay-15 {
  애니메이션-지연 : 2s;
}

@Media 화면 및 (선호 감소 모션 : 감소) {
  .animate {
    애니메이션 : 없음! 중요;
  }
}

위 내용은 CSS의 애니메이션 입구를위한 편리한 작은 시스템의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!