[애니메이션] Animate.css > 링크사이트

CSS

[애니메이션] Animate.css

최고관리자 0건 9회 25-09-06 20:22

소개

Animate.css 는 웹 프로젝트에 바로 사용할 수 있는 크로스 브라우저 애니메이션 라이브러리입니다. 강조, 홈페이지, 슬라이더, 주의 유도 힌트 등에 유용합니다.

설치 및 사용법

npm으로 설치:

$ npm install animate.css --save

또는 Yarn으로 설치합니다(이 방법은 Webpack, Parcel 등 적절한 도구를 사용해야만 작동합니다. 코드를 패킹하거나 번들링하는 도구를 사용하지 않는 경우 아래의 CDN 방법을 사용하면 됩니다).

$ yarn add animate.css

파일로 가져오기:

import 'animate.css';

또는 CDN을 사용하여 웹페이지에 직접 추가하세요.

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

기본 사용법

Animate.css를 설치한 후 애니메이션 이름 과 함께 클래스를 animate__animated요소에 추가합니다 (접두사를 잊지 마세요 !)

.animate__

<h1 class="animate__animated animate__bounce">An animated element</h1>

이제 CSS 애니메이션 요소가 완성되었습니다. 최고예요!

※ 애니메이션은 인터페이스의 UX를 향상시킬 수 있지만, 사용자에게 방해가 될 수도 있다는 점을 명심하세요! 웹 콘텐츠를 최대한 효과적으로 구현하려면 모범 사례 및 주의 사항 섹션을 참조하세요.

사용 중@keyframes

animated라이브러리는 빠른 실행을 위해 클래스와 같은 몇 가지 도우미 클래스를 제공하지만 , 제공된 애니메이션을 직접 사용할 수도 있습니다 keyframes. 이를 통해 HTML 코드를 리팩토링하지 않고도 현재 프로젝트에서 Animate.css를 유연하게 사용할 수 있습니다.

예:

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

animation-timing일부 애니메이션은 애니메이션 클래스에 설정된 속성 에 따라 달라집니다 . 속성을 변경하거나 선언하지 않으면 예상치 못한 결과가 발생할 수 있습니다.

CSS 사용자 정의 속성(CSS 변수)

버전 4부터 Animate.css는 사용자 지정 속성(CSS 변수라고도 함)을 사용하여 애니메이션의 지속 시간, 지연 시간, 반복 횟수를 정의합니다. 덕분에 Animate.css는 매우 유연하고 사용자 지정이 가능합니다. 애니메이션 지속 시간을 변경해야 하나요? 전역 또는 로컬에서 새 값을 설정하기만 하면 됩니다.

예:

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

사용자 지정 속성을 사용하면 애니메이션의 시간 제한 속성을 즉시 쉽게 변경할 수 있습니다. 즉, 자바스크립트 한 줄로 슬로우 모션이나 타임랩스 효과를 적용할 수 있습니다.

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

일부 오래된 브라우저는 사용자 정의 속성을 지원하지 않지만 Animate.css는 적절한 대체 방안을 제공하여 CSS 애니메이션을 지원하는 모든 브라우저에 대한 지원을 확대합니다.

GitHub에서 이것을 편집하세요

유틸리티 클래스

Animate.css에는 사용을 간소화하기 위한 몇 가지 유틸리티 클래스가 포함되어 있습니다.

지연 수업

다음과 같이 요소의 클래스 속성에 지연을 직접 추가할 수 있습니다.

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

클래스 이름 기본 지연 시간

animate__delay-2s 2s

animate__delay-3s 3s

animate__delay-4s 4s

animate__delay-5s 5s

--animate-delay제공되는 지연 시간은 1초에서 5초까지입니다. 속성을 더 길거나 짧게 설정하여 지연 시간을 사용자 지정할 수 있습니다 .

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

느리게, 느리게, 빠르게, 더 빠르게 수업

아래와 같이 클래스를 추가하여 애니메이션 속도를 제어할 수 있습니다.

<div class="animate__animated animate__bounce animate__faster">Example</div>

클래스 이름 기본 속도 시간

animate__slow 2s

animate__slower 3s

animate__fast 800ms

animate__faster 500ms

클래스 animate__animated의 기본 속도는 입니다 1s. 속성을 통해 애니메이션 지속 시간을 --animate-duration전역 또는 로컬로 사용자 지정할 수도 있습니다. 이는 애니메이션과 유틸리티 클래스 모두에 영향을 미칩니다. 예:

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}

일부 애니메이션의 지속 시간이 1초 미만인 것을 알 수 있습니다. CSS calc()함수를 사용했듯이 속성을 통해 지속 시간을 설정하면 --animation-duration이러한 비율이 유지됩니다. 따라서 전역 지속 시간을 변경하면 모든 애니메이션이 해당 변경 사항에 반응합니다!

반복 수업

아래와 같이 클래스를 추가하여 애니메이션의 반복 횟수를 제어할 수 있습니다.

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

클래스 이름 기본 반복 횟수

animate__repeat-1 1

animate__repeat-2 2

animate__repeat-3 3

animate__infinite infinite

지연 및 속도 클래스와 마찬가지로, 이 animate__repeat클래스는 속성을 기반으로 하며 --animate-repeat기본 반복 횟수는 입니다 . 속성을 더 길거나 짧은 값으로 1설정하여 사용자 지정할 수 있습니다 .--animate-repeat

/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}

여기서는 animate__infinite사용자 지정 속성을 사용하지 않으므로 변경 사항이 적용되지 않습니다. 반복 애니메이션을 최대한 활용하려면 모범 사례--animate-repeat 섹션을 꼭 읽어보세요 .

Javascript와 함께 사용

animate.css를 Javascript와 결합하면 훨씬 더 다양한 작업을 할 수 있습니다. 간단한 예를 들어 보겠습니다.

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

애니메이션이 종료되는 시점을 감지할 수 있습니다.

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});

또는 기간을 변경하세요.

const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');

간단한 함수를 사용하여 애니메이션 클래스를 추가하고 자동으로 제거할 수도 있습니다.

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

다음과 같이 사용하세요:

animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});

이전 함수를 이해하는 데 어려움이 있었다면 const , classList , 화살표 함수 , Promises를 살펴보세요 .

주의

인라인 요소에는 애니메이션을 적용할 수 없습니다.

일부 브라우저는 인라인 요소에 애니메이션을 적용할 수 있지만, 이는 CSS 애니메이션 사양에 위배되며 일부 브라우저에서 작동하지 않거나 결국 작동하지 않을 수 있습니다. 블록 또는 인라인 블록 수준 요소에는 항상 애니메이션을 적용하세요(그리드, 플렉스 컨테이너, 자식 요소도 블록 수준 요소입니다). display: inline-block인라인 수준 요소에 애니메이션을 적용할 때는 요소에 를 설정할 수 있습니다.

Overflow 과다

대부분의 Animate.css 애니메이션은 화면을 가로질러 요소를 이동시키고 웹에 스크롤바를 생성할 수 있습니다. 이 기능은 overflow: hidden속성을 사용하여 관리할 수 있습니다. 언제, 어디에 사용해야 하는지에 대한 구체적인 방법은 없지만, 기본적으로 애니메이션 요소를 포함하는 부모 요소에 사용하는 것이 좋습니다. 언제, 어떻게 사용할지는 사용자가 결정해야 하며, 이 가이드가 이 기능을 이해하는 데 도움이 될 것입니다.

Intervals between repeats 반복 사이의 간격

안타깝게도 현재 순수 CSS로는 이 기능을 구현할 수 없습니다. 이 기능을 구현하려면 Javascript를 사용해야 합니다.

이전글 [애니메이션] 스크롤 애니메이션 25.09.06
다음글 없습니다.