animation

CSS에서 애니메이션 속성들은 animation 단축 속성으로도 쓸 수 있고, 각각을 개별적으로 설정할 수도 있다.

1. animation-name

애니메이션의 이름을 설정한다.
이 이름은 @keyframes에서 정의한 이름과 일치해야 한다.

• 값: none (기본값) | 사용자 정의 이름
• 예시:

  animation-name: bounce;

2. animation-duration

애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 설정한다.

• 값: 시간 단위 (s 초, ms 밀리초) | 기본값: 0s
• 예시:

  animation-duration: 3s; /* 3초 동안 애니메이션 진행 */

3. animation-timing-function

애니메이션 속도의 변화 곡선(가속도와 감속도)를 설정한다.

• 값:

  • ease (기본값): 천천히 시작했다가 빠르게 진행하고, 다시 천천히 종료
  • linear: 일정한 속도로 진행
  • ease-in: 천천히 시작
  • ease-out: 천천히 종료
  • ease-in-out: 천천히 시작하고 천천히 종료
  • cubic-bezier(n, n, n, n): 사용자 정의 속도 변화 곡선

• 예시:

  animation-timing-function: ease-in-out;

4. animation-delay

애니메이션이 시작되기 전에 대기하는 시간을 설정한다.

• 값: 값: 시간 단위 (s, ms) | 기본값: 0s
• 예시:

  animation-delay: 2s; /* 2초 후에 애니메이션 시작 */

5. animation-iteration-count

애니메이션의 반복 횟수를 설정한다.

• 값:

  • infinite: 무한 반복
  • 숫자: 애니메이션 반복 횟수 | 기본값: 1

• 예시:

  animation-iteration-count: infinite; /* 무한 반복 */
  animation-iteration-count: 3; /* 3번 반복 */

6. animation-direction

애니메이션의 재생 방향을 설정한다.

• 값:

  • normal (기본값): 정방향으로 반복
  • reverse: 역방향으로 반복
  • alternate: 정방향 → 역방향으로 번갈아 반복
  • alternate-reverse: 역방향 → 정방향으로 번갈아 반복

• 예시:

  animation-direction: alternate; /* 정방향과 역방향 번갈아 반복 */

7. animation-fill-mode

애니메이션이 시작 전과 종료 후에 어떤 스타일을 유지할지 설정한다.

• 값:
  • none (기본값): 애니메이션 시작 전과 종료 후에 스타일이 초기 상태로 되돌아감
  • forwards: 애니메이션 종료 후 마지막 상태 유지
  • backwards: 애니메이션 시작 전에 첫 상태 유지
  • both: 시작 전 첫 상태와 종료 후 마지막 상태 모두 유지
• 예시:

   animation-fill-mode: forwards; /* 애니메이션 종료 후 마지막 상태 유지 */

8. animation-play-state

애니메이션의 재생과 일시 정지 상태를 설정한다.

• 값:

  • running (기본값): 애니메이션 재생
  • paused: 애니메이션 일시 정지

• 예시:

  animation-play-state: paused; /* 애니메이션 일시 정지 */

예시 코드

모든 속성을 개별적으로 설정한 예시:

.sun {
  animation-name: bounce;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

단축 속성으로 한 번에 설정한 예시:

.sun {
  animation: bounce 4s ease-in-out 1s infinite alternate both;
}

태양이 떠오르고 지는 예시

html

.sun {
  animation: bounce 4s ease-in-out 1s infinite alternate both;
}

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* 단일 애니메이션에서 여러 속성을 애니메이션할 수 있습니다. */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* 설정되지 않은 속성, 즉 'filter'는 기본값으로 되돌아갑니다. */
  }
}