Animation

📍 Animation

요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 것을 말한다.
이때 CSS 스타일이 변화되는 중간지점을 키프레임 이라고 한다.
즉, @keyframes 은 애니메이션의 중간 상태라고 할 수 있다.

👾 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다.

📌 keyframes 정의하기

@keyframes 으로 애니메이션을 생성할 수 있다.

• from(시작) ~ to(끝) 을 이용한 애니메이션 생성

@keyframes shape-color {
   from {
    background-color: red;
     }
   to {
     background-color: blue;
     }
  }

• from ~ percent ~ to 를 이용한 애니메이션 생성

@keyframes shape-color {
   from {
    background-color: red; 
     }
   50% {
    background-color: yellow; /*percentage 로 중간 스타일을 적용 */ 
    }
   to {
     background-color: blue;
     }
  }

• 0% ~ 50% ~ 100% 를 이용한 애니메이션 생성

@keyframes circle {
   0% {
    border-radius: 0;
      }
   50% {
      border-radius: 50%;
       }
   100% {
     border-radius: 0;
      }
  }

📌 Animation 속성

• animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의한다.

animation-name: shape;
@keyframes shape {
...

• animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
• animation-delay : 앨리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정한다.
  - infinite 로 지정하여 무한히 반복할 수 있다.
• animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있다.
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.
• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
• animation : animation-* 들의 단일속성으로 한꺼번에 작성할 수 있다.

📂 다양한 애니메이션 튜토리얼
📂 MDN Animation