CSS 애니메이션 – 요소에 생명을 불어넣기-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 애니메이션 – 요소에 생명을 불어넣기

DDD

Sep 13, 2024 am 06:26 AM

CSS Animations – Bringing Elements to Life

강의 13: CSS 애니메이션 – 요소에 생명을 불어넣기

"Basic to Brilliance" 13강에 오신 것을 환영합니다! 이 게시물에서는 시간이 지남에 따라 웹 요소에 애니메이션을 적용하여 생명력을 더할 수 있는 강력한 방법인 CSS 애니메이션을 살펴보겠습니다. CSS 애니메이션을 사용하면 사용자 경험과 참여도를 향상시키는 부드럽고 역동적인 효과를 만들 수 있습니다.

1. CSS 애니메이션 개요

CSS 애니메이션을 사용하면 요소가 정의된 기간 동안 다양한 스타일 간에 전환될 수 있습니다. 두 가지 주요 속성을 사용하여 애니메이션 작동 방식을 제어할 수 있습니다.

@keyframes: 특정 순간의 애니메이션 동작을 정의합니다.
애니메이션: 요소에 애니메이션을 적용하고 타이밍과 지속 시간을 제어합니다.

2. @keyframes 규칙

@keyframes 규칙은 애니메이션 중 여러 지점에서 요소가 가져야 하는 스타일을 지정합니다. 다양한 비율로 키프레임을 정의합니다(0%는 시작, 100%는 끝).

예: 배경색을 변경하는 기본 키프레임 애니메이션.

  @keyframes changeColor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

로그인 후 복사

이 예에서는:

애니메이션이 진행됨에 따라 배경색은 빨간색에서 파란색으로 점차 변경됩니다.

3. 애니메이션 속성을 이용한 애니메이션 적용

요소에 애니메이션을 적용하려면 animation 속성을 사용합니다. 이 속성에는 몇 가지 핵심 값이 필요합니다.

이름: 키프레임 애니메이션의 이름(예:changeColor)
기간: 애니메이션이 실행되는 시간(예: 2초 동안 2초)
타이밍 기능: 애니메이션의 속도 곡선(예: 이즈, 선형).
지연: 애니메이션을 시작하기까지 기다리는 시간
예: 요소에 애니메이션 적용

  .box {
    animation: changeColor 2s ease-in-out infinite;
  }

로그인 후 복사

이 경우:

.box 요소는 이즈인아웃 곡선을 따라 2초에 걸쳐 빨간색에서 파란색으로 색상이 바뀌고 애니메이션이 무한 반복됩니다.

4. 애니메이션 타이밍 기능

타이밍 기능은 시간이 지남에 따라 애니메이션이 진행되는 방식을 제어합니다. 몇 가지 일반적인 타이밍 기능은 다음과 같습니다.

선형: 애니메이션이 일정한 속도로 진행됩니다.
느슨함: 애니메이션이 느리게 시작하여 속도가 빨라졌다가 느려집니다.
ease-in: 애니메이션이 느리게 시작되었다가 빨라집니다.
ease-out: 애니메이션이 빠르게 시작되었다가 느려집니다.
예: 다른 타이밍 기능 적용

  .box {
    animation: changeColor 3s linear;
  }

로그인 후 복사

여기:

애니메이션은 일정한 속도로 진행되며 완료하는 데 3초가 걸립니다.

5. 애니메이션 반복 및 지연

animation-iteration-count 속성을 사용하여 애니메이션이 반복되는 횟수를 제어할 수 있습니다. animation-delay를 사용하여 애니메이션 시작을 지연시킬 수도 있습니다.

예: 3번 반복되고 1초 지연 후 시작되는 애니메이션.

  .box {
    animation: changeColor 2s ease-in 3;
    animation-delay: 1s;
  }

로그인 후 복사

이 경우:

페이지가 로드된 후 1초 후에 애니메이션이 시작되어 3번 반복됩니다.

6. 애니메이션 채우기 모드

animation-fill-mode 속성은 요소가 애니메이션 전후에 어떻게 표시되어야 하는지를 정의합니다. 일반적인 값은 다음과 같습니다.

없음: 애니메이션이 끝난 후 요소가 원래 상태로 돌아갑니다.
앞으로: 요소가 애니메이션의 최종 상태를 유지합니다.
backwards: 요소는 애니메이션이 시작되기 전의 초기 상태를 취합니다.
예: 애니메이션 이후 최종 상태를 유지합니다.

  .box {
    animation: changeColor 2s ease forwards;
  }

로그인 후 복사

여기:

애니메이션이 완료된 후에도 해당 요소는 빨간색으로 돌아가지 않고 파란색으로 유지됩니다.

7. 다양한 애니메이션

쉼표로 구분하여 요소에 여러 애니메이션을 적용할 수 있습니다.

예: 색상과 위치 모두에 애니메이션을 적용합니다.

  @keyframes moveBox {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100px);
    }
  }

  .box {
    animation: changeColor 2s ease, moveBox 2s ease-in-out;
  }

로그인 후 복사

이 경우:

.box의 색상이 바뀌면서 동시에 오른쪽으로 100px 이동합니다.

8. 브라우저 지원 및 접두사 속성

최신 브라우저는 CSS 애니메이션을 지원하지만 이전 버전의 브라우저에는 항상 공급업체 접두사를 추가하는 것이 좋습니다.

Example: Adding vendor prefixes.

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

로그인 후 복사

This ensures compatibility across different browsers.

Practice Exercise

Create a bouncing ball animation using @keyframes that makes the ball move up and down smoothly.
Add an animation to an image that rotates it 360 degrees on hover.

Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.