animation

이 속성은 다음 CSS 속성의 단축형입니다.

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

/* @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개 존재

  • <single-easing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

• 애니메이션의 선택적인 이름. none, <custom-ident>, 또는 <string>일 수 있음.

<single-easing-function>

전환 유형을 결정합니다. 값은 <easing-function>에서 사용할 수 있는 값 중 하나여야 합니다.

<single-animation-iteration-count>

애니메이션이 재생되는 횟수입니다. 값은 animation-iteration-count에서 사용 가능한 값 중 하나여야 합니다.

<single-animation-direction>

애니메이션이 재생되는 방향입니다. 값은 animation-direction에서 사용 가능한 값 중 하나여야 합니다.

<single-animation-fill-mode>

실행 전후에 애니메이션 대상에 스타일을 적용시키는 방법을 결정합니다. 값은 animation-fill-mode에서 사용 가능한 값 중 하나여야 합니다..

<single-animation-play-state>

애니메이션의 재생 여부를 결정합니다. 값은 animation-play-state에서 사용 가능한 값 중 하나여야 합니다.

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

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

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

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

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

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

• 움직임 민감성을 위한 더 안전한 웹 애니메이션 설계 · A List Apart 기사
• 움직임 감소 미디어 쿼리 소개 | CSS-Tricks
• 반응형 움직임 디자인 | WebKit
• MDN WCAG 이해하기, 가이드라인 2.2 설명
• Success Criterion 2.2.2 이해하기 | W3C Understanding WCAG 2.0

animation = 
  <single-animation>#  

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

<easing-function> = 
  <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>  |
  <string>        

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

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

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

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

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

: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);
  }
}

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

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

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

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

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

: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 애니메이션으로 '덮어써지게' 됩니다.

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

: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 애니메이션 사용하기를 참조하세요.

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