animation

animation 단축 CSS 속성은 스타일 사이에 에니메이션을 적용합니다. animation-name (en-US), animation-duration, animation-timing-function (en-US), animation-delay, animation-iteration-count (en-US), animation-direction, animation-fill-mode, 그리고 animation-play-state (en-US)의 단축형입니다.

구문

css

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;

/* 애니메이션 두 개 */
animation:
  3s linear slidein,
  3s ease-out 5s slideout;

animation 속성은 쉼표로 구분된 하나 이상의 단일 애니메이션으로 지정됩니다.

각각의 애니메이션은 다음과 같이 지정됩니다.

<time> 값이 0개, 1개 또는 2개 존재
다음 값이 0개 또는 1개 존재
애니메이션의 선택적인 이름. none, <custom-ident> (en-US), 또는 <string> (en-US)일 수 있음.

참고: 현재 구현은 재설정 전용이므로 animation-timeline (en-US), animation-range-start (en-US), 그리고 animation-range-end (en-US)가 현재 이 목록에 포함되어 있지 않습니다. 즉, animation을 포함하면 이전에 선언된 animation-timeline 값이 auto로 재설정되고, 이전에 선언된 animation-range-start와 animation-range-end 값은 normal로 재설정되지만, 이러한 속성은 animation을 통해 설정할 수 없습니다. CSS 스크롤 기반 애니메이션 (en-US)을 만들 때 적용하려면 애니메이션 단축을 선언한 후 이러한 속성을 선언해야 합니다.

값

<single-easing-function>: 전환 유형을 결정합니다. 값은 <easing-function> (en-US)에서 사용할 수 있는 값 중 하나여야 합니다.
<single-animation-iteration-count>: 애니메이션이 재생되는 횟수입니다. 값은 animation-iteration-count (en-US)에서 사용 가능한 값 중 하나여야 합니다.
<single-animation-direction>: 애니메이션이 재생되는 방향입니다. 값은 animation-direction에서 사용 가능한 값 중 하나여야 합니다.
<single-animation-fill-mode>: 실행 전후에 애니메이션 대상에 스타일을 적용시키는 방법을 결정합니다. 값은 animation-fill-mode에서 사용 가능한 값 중 하나여야 합니다..
<single-animation-play-state>: 애니메이션의 재생 여부를 결정합니다. 값은 animation-play-state (en-US)에서 사용 가능한 값 중 하나여야 합니다.

설명

각 애니메이션 정의 내에서 시간 값의 순서는 중요합니다. <time>으로 파싱할 수 있는 첫 번째 값은 animation-duration에 할당되고, 두 번째 값은 animation-delay에 할당됩니다.

각 애니메이션 정의에서 다른 값의 순서는 animation-name (en-US) 값을 다른 값과 구별하는 데에도 중요합니다. animation 단축 값이 animation-name 이외의 animation 속성 값으로 파싱할 수 있는 경우, 이 값은 animation-name이 아닌 그 속성에 먼저 적용됩니다. 이러한 이유로 animation 단축을 사용할 때 animation-name 값을 값 목록의 마지막 값으로 지정하는 것이 좋습니다. 이는 쉼표로 구분된 여러 개의 애니메이션 단축을 지정하는 경우에도 마찬가지입니다.

애니메이션을 적용하려면 애니메이션 이름을 반드시 설정해야 하지만, animation 축약의 모든 값은 선택 사항이며, 각 animation 구성 요소의 초기 값이 기본값입니다. animation-name의 초기 값은 none입니다. 즉, animation 단축 속성에 animation-name 값이 선언되지 않으면 속성에 적용할 애니메이션이 없는 것입니다.

animation 단축 속성에서 animation-duration 값이 생략되면 이 속성의 값은 기본적으로 0s로 설정됩니다. 이 경우 애니메이션은 계속 발생하지만( animationStart (en-US)와 animationEnd (en-US) 이벤트는 발생함) 애니메이션이 표시되진 않습니다.

접근성 문제

깜박이는 애니메이션은 주의력 결핍 과잉 행동 장애(ADHD)와 같은 인지 문제가 있는 사람들에게 문제가 될 수 있습니다. 또한 특정 종류의 움직임은 전정 장애, 간질, 편두통 그리고 암소시성 민감증을 유발할 수 있습니다.

축소된 애니메이션 경험에 선호도를 표현한 사용자를 위한 우대 경험을 만들기 위해 애니메이션을 일시 중지하거나 비활성화하는 메커니즘을 제공하고 움직임 감소 미디어 쿼리 (en-US)를 사용하는 것을 고려하십시오.

형식 정의

초기값	as each of the properties of the shorthand: `animation-name` (en-US): `none` `animation-duration`: `0s` `animation-timing-function` (en-US): `ease` `animation-delay`: `0s` `animation-iteration-count` (en-US): `1` `animation-direction`: `normal` `animation-fill-mode`: `none` `animation-play-state` (en-US): `running` `animation-timeline` (en-US): `auto`
적용대상	all elements
상속	no
계산 값	as each of the properties of the shorthand: `animation-name` (en-US): as specified `animation-duration`: as specified `animation-timing-function` (en-US): as specified `animation-delay`: as specified `animation-direction`: as specified `animation-iteration-count` (en-US): as specified `animation-fill-mode`: as specified `animation-play-state` (en-US): as specified `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
Animation type	Not animatable

형식 구문

animation = 
  <single-animation>#  

<single-animation> = 
  <time>                              ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident> (en-US)  |
  <string> (en-US)        

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}

예제

참고: CSS 박스 모델 속성에 애니메이션을 적용하는 것은 권장되지 않습니다. 어떤 박스 모델 속성을 애니메이션하는 것은 본질적으로 CPU를 많이 사용합니다. 대신 transform 속성에 애니메이션을 적용하는 것을 고려하십시오.

해 뜨기

여기서 우리는 하늘색 하늘을 가로지르는 노란 태양 애니메이션을 만들어봅니다. 태양이 뷰포트 중앙으로 올라간 다음 시야에서 사라집니다.

html

<div class="sun"></div>

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 sun-rise;
}

@keyframes sun-rise {
  from {
    /* 태양을 뷰포트 너머로 밀어냅니다. */
    transform: translateY(110vh);
  }
  to {
    /* 태양을 기본 위치로 되돌립니다. */
    transform: translateY(0);
  }
}

여러 속성 애니메이션

이전 예제의 태양 애니메이션에 추가하여, 태양이 뜨고 질 때 태양의 색상을 변경하는 두 번째 애니메이션을 추가합니다. 태양은 수평선 아래에 있을 때 진한 빨간색으로 시작하여 상단에 도달하면 밝은 주황색으로 바뀝니다.

html

<div class="sun"></div>

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'는 기본값으로 되돌아갑니다. */
  }
}

여러 애니메이션 적용하기

여기 하늘색 배경에 뜨고 지는 태양이 있습니다. 태양은 점점 무지개 색으로 변합니다. 태양의 위치와 색상의 타이밍은 독립적입니다.

html

<div class="sun"></div>

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 rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

여러 애니메이션 캐스케이딩

여기 밝은 파란색 배경에 노란색 태양이 있습니다. 태양은 뷰포트의 왼쪽과 오른쪽 사이에서 튕깁니다. rise 애니메이션이 정의됐더라도 태양은 뷰포트에 남아 있습니다. 상승 애니메이션의 transform 속성은 bounce 애니메이션으로 '덮어써지게' 됩니다.

html

<div class="sun"></div>

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;
  /*
    캐스케이딩으로 나중에 선언된 애니메이션은
    이전에 선언된 애니메이션 속성을 재정의합니다.
  */
  /* bounce는 rise가 설정한 transform을 '덮어쓰므로' 태양은 수평으로만 움직입니다. */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

추가 예제는 CSS 애니메이션 사용하기를 참조하세요.

명세서

Specification
CSS Animations Level 1 # animation

브라우저 호환성

BCD tables only load in the browser

같이 보기

CSS 애니매이션 사용하기
JavaScript AnimationEvent API

animation

시도해보기

구성 속성

구문

값

설명

접근성 문제

형식 정의

형식 구문

예제

해 뜨기

여러 속성 애니메이션

여러 애니메이션 적용하기

여러 애니메이션 캐스케이딩

명세서

브라우저 호환성

같이 보기