[JAVASCRIPT] 자바스크립트로 css animation

계속 삽질하다가 겨우 해결한 자바스크립트로 css animation 실행하기와 더불어

css animation 관련된 내용을 정리해보려한다.

 

나는 tansform을 이용하여 아이콘이 위아래로 떨리는 모양을 만들고 싶었다.

일단 가장 간단한 방법은 gif로 만들어서 넣는 방법.

근데 나는 여러 아이콘을 사용할 예정이고 gif로 만들기 어려운 상황이었다.

(한번만 실행하기로 저장을 하는데도 계속 반복적으로 실행이 되서 png 파일을 css로 움직임을 주고자 했다.)

 

 

1. css파일에 animation 만들기 (페이지 로드되면서 자동 실행 - 1번만 실행)

.question_icon_animation{
    animation: icon_ani 1s linear forwards;
    animation-delay: 0.6s;
}
@keyframes icon_ani { 
    0% { transform: translate(0, 0); } 
    20% { transform: translate(0, -10px); } 
    30% { transform: translate(0, -4px); } 
    40% { transform: translate(0, -2px); } 
    50% { transform: translate(0, -6px); } 
    60% { transform: translate(0, -2px); } 
    70% { transform: translate(0, -6px); } 
    80% { transform: translate(0, -4px); } 
    90% { transform: translate(0, -2px); } 
    100% { transform: translate(0, 0px); } 
}

 

 

2. css파일에 animation 만들고 자바스크립트로 실행하기 (페이지 로드 후 내가 원하는 시점에 불러서 사용)

1번과 동일하게 코드를 작성하고 버튼을 눌렀을때(내가 원하는 시점에) 해당 태그에 animation 태그를 추가했다.

$(".class").addClass("question_icon_animation");

 

하지만 나는 버튼을 클릭할 때 마다 해당 애니메이션이 적용되어야 했다.

애니메이션 클래스가 없는 페이지로드 시점에는 버튼을 클릭했을 때 클래스가 추가되면서 제대로 애니메이션이 실행되는데 애니메이션 재실행을 위해 addClass 하고 다른곳에서 removeClass를 해준뒤, 다시 addClass 해주는 과정을 반복했는데 remove후에 add되는 시점이 너무 빨리 진행되서인지 처음 이후 두번째부터는 애니메이션이 실행이 안됐다.

 

 

3. 자바스크립트로 animation을 만들어서 실행 (내가 적용한 방법)

var target = document.querySelector('.question_icon');
var player = target.animate([
    { transform: 'translate(0, 0);'},
    { transform: 'translate(0, -15px)'},
    { transform: 'translate(0, -8px)'},
    { transform: 'translate(0, -4px)'},
    { transform: 'translate(0, -6px)'},
    { transform: 'translate(0, -3px)'},
    { transform: 'translate(0, -6px)'},
    { transform: 'translate(0, -3px)'},
    { transform: 'translate(0, -1px)'},
    { transform: 'translate(0, 0px)'}
],{
    duration : 1000,
    delay:700
});

자바스크립트로 애니메이션을 만들어서 실행하니 내가 원한대로 버튼을 클릭할때마다 실행됐다.

 

 

관련된 문서인데, 꼭 읽어보자!

https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript?hl=ko 

CSS와 자바스크립트 애니메이션  |  Web  |  Google Developers

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

Element.animate() - Web APIs | MDN