Animation

Animation

요소에 적용되는 CSS 스타일을 다른 CSS스타일로 부드럽게 전환시켜 주는 것 이때 css 스타일이 변화되는 중간지점을 키프레임이라고 한다 즉 @keyframes은 애니메이션의 중간 상태라고 할 수 있다 애니메이션은 트랜지션보다 훨씬 더 큐모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다.

---

keyframes 정의하기

@keyframes으로 애니메이션을 생성할 수 있다
·from(시작)~to(끝)을 이용한 애니메이션 shape생성

<style>
   @keyframes shape {
       from {
          border: 1px solid transparent;
          }
       to {
          border: 1px solid #000;
          border-radius: 50%
          }
    }
</sytle>

---

Animation속성

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

<style>
   .animation1 {
       animation-name: shape-color;
       animation-duration: 3s;
       /* 완성되기까지의 시간이 3초*/
       animation-iteration-count: 3;
       /* 3번반복한다*/
   }
   
   @keyframes shape-color {
      from {
         background-color: red;
      }
      to {
         background-color: blue;
      }
   }
   /* 빨간색에서 파란색으로 3초동안 변하고 3번반복한다*/
   
   .animation2 {
      animation: circle 2s infinite;
     /* animation: name duration timing-function delay 
                   iteration-count direction fill-mode;
        한꺼번에 입력할 수 있다 */
   }
   
   @keyframes circle {
      0% {
        border-radius: 0; 
      }
      50% {
        border-radius: 50%
      }
      100% {
        border-radius: 0;
      }
     /* 시작은 네모 중간은 둥글게 끝은 다시 네모 */
   }
   
</style>

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

• animation-iteration-count
  애니메이션이 몇 번 반복될지 지정한다 'infintite'로 지정여
  무한히 반복할 수 있다

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

값	의미	기본값
running	애니메이션을 동작	running
paused	애니메이션 동작을 정지

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

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

• animation
  animation-* 들의 단일속성으로 한꺼번에 작성할 수 있다