CSS animation 에 대해 정리해보았다.

---

🦄 animation

adnimation : transition과 비슷하게 다수의 스타일을 전환하는 애니메이션을 적용한다.

• 단축속성(short hand) 이다.

• @keyframes 규칙을 사용하여 세트를 만들고, 이를 animation 에서 적용시킨다.

transition 과 다른점

• 사용자의 action 이 없어도 자동으로 동작하게 만들 수 있다.
• 한가지의 상태로만 변환되는 것이 아니라 여러 상태를 거치며 변환시킬 수 있다.

Example

div {
  animation: name 2s linear infinite;
}

단축형식

• animation:
  name | duration | timing-function | delay | iteration-count | direction | fill-mode;
• name 은 필수 값이다.
• 순서들은 크게 상관 없으나, duration 과 delay 순서는 맞춰야 한다.

🦊 MDN Link - animation

---

🦄 @keyframes

@keyframes : animation 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써
CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 한다.

• 브라우저가 자동으로 처리하는것보다 세밀하게 조절할 수 있다.

• 시간에 따라 변환되므로 % 를 사용해 중간 지점들에 속성을 넣는다.
  --> 동일한 % 값이 여러번 입력될 경우 Cascading 법칙에 따라 아래쪽 속성만 적용됨을 주의!

• 키프레임은 순서대로 나열 가능하며, 지정된 % 의 순서대로 처리된다.

• 최소한 from / to 혹은 0% / 100% 같은 시간에 대한 규칙은 포함해야 한다.

• 작성된 키프레임 이름은 여러 요소에서 애니메이션으로 사용될 수 있다.

Example

/* 두가지 상태만 적용할 경우 */
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* 여러 상태들을 적용할 경우 */
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

--> 두가지일때는 from { } 과 to { } 만 사용할수도 있다.
--> 각 % { } 에 정의된 속성들이 하나의 적용되는 덩어리다.

🦊 MDN Link - animation

---

🦄 animation-name

animation-name : @keyframes 에 선언된 애니메이션 이름을 호출해 적용할 수 있게 해준다.

• @keyframes 에 이름이 작성되어있지 않으면 값이 할당되지 않는다.

• a ~ z, 0 to 9, 언더바 (_), 대시(-) 문자만 이름으로 사용 가능하다.
  --> 첫문자로 숫자는 올 수 없다!

🦊 MDN Link - animation-name

---

🦄 animation-duration

animation-duration : 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정한다.

• 시간값은 양수 또는 0이어야하며 단위(s, ms) 는 필수이다.
  --> 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타낸다.

• transition 의 duration 과 동일하다.

🦊 MDN Link - animation-duration

---

🦄 animation-delay

animation-delay : 애니메이션이 시작할 시점을 지정한다.

• 양수 값은 지정된 시간이 경과 한 후 애니메이션이 시작되어야 함을 나타낸다.

• 음수 값은 애니메이션이 즉시 시작되지만 애니메이션 주기의 중간에서부터 시작된다.
  ex) animation-delay: -1s = 애니메이션 1초 이후 시점에서부터 시작된다.

🦊 MDN Link - animation-delay

---

🦄 animation-timing-function

animation-timing-function : 애니메이션의 진행 방식을 지정한다.

• transition 의 timing-function 과 사용되는 값들도 동일하다.

• 기본값은 ease 키워드값이다.

🦊 MDN Link - animation-timing-function

---

🦄 animation-iteration-count

animation-iteration-count : 애니메이션의 사이클 반복 횟수를 지정한다.

• 기본값은 1이다.

• 숫자로도 설정할 수 있고, infinite 값을 사용하여 무한 반복할수도 있다.

🦊 MDN Link - animation-iteration-count

---

🦄 animation-direction

animation-direction : 애니메이션이 정방향, 역방향 또는
앞뒤로 번갈아 재생되는지 여부를 지정한다.

Values

1. noraml = 정방향 재생 (기본값)
2. reverse = 역재생 --> 애니메이션 반대로, 타이밍 기능 반대로
3. alternate = 시작-종료 반복 재생 --> 왔다갔다
4. alternate-reverse = alternate 에서 첫 시작을 반대로

🦊 MDN Link - animation-direction

---

🦄 animation-play-state

animation-play-state : 애니메이션의 동작 상태 여부를 지정한다.

• 기본값은 running 이다. 아래 두가지 값을 갖는다.

1. running = 애니메이션이 현재 재생중임을 나타낸다.
2. paused = 애니메이션이 현재 일시 정지중임을 나타낸다.

🦊 MDN Link - animation-play-state

---

🦄 animation-fill-mode

animation-fill-mode : 애니메이션의 실행 전/후에 대상에 스타일을 적용하는 방법을 지정한다.

• 사용할 수 있는 값은 none (기본값), forwards, backwards, both 네 가지다.

1. forwards = 실행된 애니메이션의 마지막 keyframe 에 의해 설정된 스타일값을 유지한다.
2. backwards = delay 가 일어나는 동안 keyframe 에 의해 설정된 시작 스타일값을 적용시킨다.
3. none = 애니메이션 시작 전 요소에 할당된 스타일을 그대로 유지한다. (기본값)
4. both = forwards & backwards 가 동시에 적용된다.

🦊 MDN Link - animation-fill-mode