[TIL] css animation 사용법

같은 부트캠프를 수료한 동료들 끼리 모여 프로젝트를 진행하고 있는데, 내가 맡은 부분에서 css 애니메이션을 구현해야 했다.

css 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

CSS animation 사용법

 .css {
 	animation-name: 애니메이션 이름;
    animation-duration: 애니메이션 지속 시간;
    animation-iteration-count: 애니메이션 반복 횟수(무한 반복은 infinite);
    animation-direction: normal;(기본값(생략가능) ex.0=>100, 0=>100...) 
    					 reverse;(normal의 반대지점에서 시작) 	
                         alrernate;(자연스럽게 왔다갔다 반복 ex.0=>100=>0=>100=>0...)
                         alternate-reverse;(alternate의 반대지점에서 시작)
    animation-delay: 지정한 시간 이후에 시작;
    animation-timing-function: linear;(가속도, cubc-bezier로 가속도 custom 가능)
    animation-fill-mode: forwards;(마지막 위치한 자리에서 멈추게한다.)
 }
 
 @keyframes 애니메이션이름 {
 	from {                        
    	출발지점
    }
    to {						  
    	도착지점
    }
 }
 

내가 적용한 css

img {
      width: 70%;

      animation-name: stamp;
      animation-duration: 2s;
      animation-iteration-count: 100;
    }

    @keyframes stamp {
      0% {
        transform: scale(1);
      }

      5% {
        transform: scale(1.2);
      }

      10% {
        transform: scale(1);
        opacity: 0;
      }

      15% {
        transform: scale(1.1);
      }

      20% {
        transform: scale(1);
      }

      25% {
        transform: scale(1.2);
      }

      35% {
        transform: scale(1.1);
      }

      50% {
        transform: scale(1.1);
      }

      70% {
        transform: scale(1);
      }

      75% {
        transform: scale(1.2);
      }

      80% {
        transform: scale(1.1);
      }

      90% {
        transform: scale(1);
      }

      95% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

애니메이션의 이름은 stamp로 지어주고, 2초동안 100번 반복하게 구현했다. 이미지에 도장이 박히는 느낌의 모션을 주기위해서 2초동안 5% 단위로 크기가 변하는 과정을 tranform의 scale을 이용해 구현했다.