css - animation

css에서 animation 형태로

@keyframes 키워드를 통해 애니메이션이 어느 타이밍에 어떻게 변할지 정의한후, css의 animation프로퍼티를 이용하여 dom에 애니메이션을 적용합니다.

1. @keyframs 정의

/* 버전이 낮은 브라우저는 @-webkit-keyframes 같은 키워드를 사용 */
      @keyframes thisanimationname {
        0% {
          width: 100px;
        }
        100% {
          width: 100%;
        }
      }

      @keyframes ani3 {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(180deg);
        }
      }

2. css의 animation프로퍼티를 이용하여 dom에 애니메이션을 적용합니다.

      .box {
        width: 100px;
        height: 100px;
        background-color: green;
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        animation-name: thisanimationname; /* 이름 */
        animation-duration: 3s; /* 진행시간 */
        animation-timing-function: linear; /* 진행속도의 변화지정 cubic-bezier()를 통해 타이밍 조절가능*/
        animation-delay: 1s; /* 대기시간 */
        animation-iteration-count: infinite; /* 진행횟수 */
        animation-direction: alternate; /* 진행방향 normal | reverse | alternate | alternate-reverse */
        animation-fill-mode: backwards; /* forwards | backwards animation이 끝나면 마지막 설정 상태 유지 혹은 초기 상태로*/
      }

정리

자동으로 움직여야되는 형태는 animation을 쓰고, 뭔가 이벤트가 발생했을때 움직이는 것은 transition을 쓰는것을 추천합니다.