[HTML/CSS] 📚 animation

📋 기억하고 싶은 내용

• transform, transition 속성으로 적용한 요소는 사용자의 이벤트 발생 유무에 따라 요소가 전환되지만, animation 속성은 자동으로 요소가 전환되게끔 할 수 있다.
• animation 속성은 A 상태에서 B 상태뿐만 아니라 다수의 상태로 자동으로 전환할 수 있게 만들어 준다.
• 다수의 상태 세트인 @keyframes를 미리 만들어 놓고, animation 속성으로 가져다 사용하는 방식이다.

📌 @keyframes

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

• 두 개의 키프레임을 설정할 때는 from, to 키워드를 사용한다.
• 여러 개의 키프레임을 설정할 때는 percentage 자료형을 사용한다.

📌 animation-name, animation-duration

• animation-name 속성은 사용할 @keyframes 이름을 작성하면 된다.
• animation-duration 속성은 얼마 만큼의 시간 동안 재생할지 설정한다.
• animation-duration 속성은 음수 값으로 설정할 수 없다.

📌 animation-delay, animation-timing-function

• animation-delay 속성을 음수 값으로 지정하면 이미 누군가에 의해 애니메이션이 재생된 것처럼 애니메이션 주기의 도중에 시작된다.
• animation-delay 속성을 사용해 여러 개 요소들의 애니메이션 시작 시간을 각각 다르게 지정할 수 있다.
• animation-timing-function 속성은 transition-timing-function 속성과 동일하게 동작한다.

📌 animation-iteration-count, animation-direction

animation-iteration-count

• animation-iteration-count 속성의 기본값은 1이고, 애니메이션 재생 횟수를 지정할 수 있다.
• infinite 값으로 지정하면 애니메이션이 무한 재생된다.

animation-direction

• 애니메이션 재생 방향을 지정할 수 있다.

📌 animation-play-state

• 이벤트 발생 여부에 따라 애니메이션을 재생하거나 정지할지 설정할 수 있다.

📌 animation-fill-mode

• 애니메이션이 시작되기 전과 끝난 후에 요소의 스타일을 지정할 수 있다.

📌 animation

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

/* @keyframes duration | name */
animation: 3s slidein;

• 보통 애니메이션을 자동으로 재생되게 만들기 때문에 play-state 속성은 거의 사용하지 않는다.

🔗 참고 래퍼런스

• @keyframes - MDN
• animation-delay - MDN
• animation-iteration-count - MDN
• animation-direction - MDN
• animation-play-state - MDN
• animation-fill-mode - MDN
• animation - MDN