CSS - Animation

CSS Animation

 

animation vs transition

- 둘은 엄연히 다른 속성임.

 

transition : 속성의 '전환'

 

animation :  각 property를 쪼개서 사용함.

(transition은 속기형으로 적었지만)

 

/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */

---

 

 

animation - CSS: Cascading Style Sheets | MDN

 

 

@keyframes

 

- AtRule로 어떤 애니메이션을 사용할지 선언해줌. (로직을 먼저 만들어줌)

@keyframes Animation-name {

       from {

      }

      to {

      }

}

from : 시작

to : 끝

 

0%, 30%, 50%, 100%와 같이 퍼센트로 작성해도 된다!

 

 

예시>

.box {
  position: relative;
  background-color: #000000;
  animation-name: move-box;
  animation-duration: 2000ms;
  }
  
  @keyframes move-box {
    from {
      top: 0;
    }
    to {
      top: 200px;
      background-color: #0066ff;
    }
  }

 

- 애니메이션이 끝나면 원래 상태로 다시 돌아옴. ( from말고 디폴트 스타일로)

 

 

 

animation-timing-function

 

transition때와 같음.

ease-in, ease-out, ease-in-out, cubic-bezier 등의 값을 사용.

 

 

animation-delay

 

1초후에 동작하게 하려면?

즉, 딜레이 후에 애니메이션 동작하게 하려면

animation-delay: 1000ms 해주자.

 

 

iteration-count

(되풀이 몇번?)

 

3번 동작하게 하려면?

animation-iteration-count : 3

 

무한대로 동작하려면?

animation-iteration-count : infinite

 

 

 

animation-direction

 

= 흐름의 방향.

원래는 from에서 to로 진행했지만. (퍼센트의 경우엔 0%->50%->100% 이런식)

animation-direction을 설정해서

 

normal   |    reverse   |   alternate   |    alternate-reverse

 

 

alternate

- 애니메이션 매 사이클마다 각 주기의 방향을 뒤집으며, 

첫 번째 반복은 정방향으로 진행된다.

사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작.

 

 

+) 그 외 속성들 - mdn

 

 

animation-delay
엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.

animation-direction
애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.

animation-duration
한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.

animation-iteration-count
애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.

animation-name
이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  @keyframes 규칙을 이용하여 기술합니다.

animation-play-state
애니메이션을 멈추거나 다시 시작할 수 있습니다.

animation-play-state: running;
animation-play-state: paused;

animation-timing-function
중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.

animation-fill-mode
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

 

 

 

 

---

REF>

 

 

CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN