CSS 애니메이션 JS 애니메이션 차이

 

💡 CSS 애니메이션

다음 코드는 W3C tutorial에 있는 코드를 가져와 CSS 애니메이션으로 수정한 코드입니다.

 

<button onclick="myMove()">Click Me</button> ****

<div id ="container">
  <div id ="animate"></div>
</div>

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

.animation-move {
  animation: move 4s
}

/* @keyframes rule */
@keyframes move {
  from {
    left: 0;
    top : 0;
  }
  to {
   	top : 350px;
    left: 350px;
  }
}

function myMove() {
  const elem = document.getElementById("animate");   
  elem.className = "animation-move";
}

 

CSS 코드를 보면 @keyframes를 사용하여 애니메이션명을 지정하고 이를 animation-move라는 클래스 명을 가지는 요소에 입히고 있고 버튼을 클릭하면 div요소에 animation-move라는 클래스를 넣습니다.

• @keyframes에 관한 구체적인 예시

 

💡 트랜지션(Transition) 🆚 애니메이션(Animation)

CSS 속성에 Transition과 Animation이라는 요소가 있다 둘 다 움직임을 표현할 수 있는데 차이점이 있습니다.

✔ 트랜지션(Transition)

• 요소의 변화를 일정 기간(duration)동안 일어나게 함
• hover나 click 같은 이벤트 트리거에 의해 동작
• Layout을 변경시킬 경우, Reflow 발생을 줄이기 위해 낮은 계층의 요소에 효과를 주는 것이 좋음

✔ 애니메이션(Animation)

• 트랜지션은 시작하기 위해 이벤트가 필요하지만 애니메이션은 시작, 정지, 반복까지 제어 가능(물론, 이벤트 제어도 가능)
• 하나 또는 복수의 @keyframes으로 이루어짐

 

💡 JS 애니메이션

<button onclick="myMove()">Click Me</button> 

<div id ="container">
<div id ="animate"></div>
</div>

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

function myMove() {
  const elem = document.getElementById("animate");   
  let pos = 0;
  const id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}

 

JS애니메이션으로 위의 CSS 애니메이션과 동일한 효과를 입힌 코드입니다. JavaScript 코드를 보면 setInterval을 주고 일정 주기마다 frame() 함수를 실행시켜 요소의 위치를 이동시키고 있습니다.

 

💡 CSS 애니메이션과 JS 애니메이션의 차이

CSS 애니메이션은 낮은 버전의 브라우저에서는 지원을 하지 않는 경우가 있다.(특히, IE).

1. 크로스 브라우징면에서는 JS 애니메이션을 사용하는 것이 낫지만, CSS 애니메이션은 모든 동작을 CSS에서 관리하고 필요하다면 JS는 이벤트 감지를 위해서만 사용합니다.
2. 실행 로직을 브라우저 자체에서 실행하기 때문에 메모리 소비를 최적화합니다.
3. JavaScript에서는 css, 동작을 모두 관리해줘야 하는 반면, CSS 애니메이션은 CSS안에서 다 관리하기 때문에 관리에 용이합니다.

 

출처 : https://github.com/SeonHyungJo/FrontEnd-Note/blob/master/Performance/CSS%20애니메이션%20vs%20JS%20애니메이션.md