css animation 정리

animation

여러 스타일을 전환하는 애니메이션을 적용.

ex ) transition = A -> B / animation = A -> B -> C -> ...

 

animation - CSS: Cascading Style Sheets | MDN

 

 

@keyframes

- 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정하여 제어할 수 있다.

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

 

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

 

 

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

---

animation-name

- 애니메이션을 설명하는 하나 이상의 at-규칙 이름을 지정

- 여러 at-규칙은 쉼표로 구분된 이름 목록으로 지정

- 이름은 a-z, 0-9, _, - 을 사용

---

animation-duration

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

---

animation-delay

- 실행하는 시간을 지연시키는 설정

---

animation-timing-function

- 각 주기의 지속 시간 동안 애니메이션이 진행되는 방식

---

anmation-iteration-count

- 애니메이션 반복 횟수 지정

---

anmation-direction

- 애니메이션이 앞으로, 뒤로 또는 알 뒤로 번갈아 재생시킬 수 있는 속성

- / normal, reverse, alternate, alternate-reverse

---

animation-play-state

- 애니메이션이 실행, 중지를 설정

---

animation-fill-mode

- 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정

* 애니메이션이 실행 될때 스타일을 지정

forwards = 기존스타일로 돌아가지 않는다.

backwords = 기존스타일이 아닌 keyframes 처음에서 시작

both = forwards + backwords