CSS 애니메이션과 JavaScript 애니메이션의 차이점

💡
CSS Cascading Style Sheets : 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당
JavaScript : 객체 기반의 스크립트 프로그래밍 언어

CSS 애니메이션

CSS 속성 중 움직임을 표현할 수 있는 요소는 Transition과 Animation이다.

• 간단하게 처리하는 애니메이션인 경우에 사용!
• 외부 라이브러리 필요 X
• 애니메이션 적용할 요소 직관적으로 파악 가능

1. Transition

지정된 기간(duration)동안 요소의 변화가 일어나게 함
이벤트 트리거(hover, click 등)에 의해 동작

• 레이아웃을 변경할 경우에는 Reflow : 문서 내 노드들의 레이아웃, 포지션을 재계산. 심각한 퍼포먼스 저하를 유발시키는 프로세스 발생을 줄이기 위해 구조 상 끝단에 위치한 요소에 효과 주는 것이 좋다.

<style> 
  
div {
  width: 100px;
  height: 100px;
  background: pink;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

</style>

2. Animation

JavaScript나 Flash 없이 HTML 요소의 애니메이션 제공

• 시작, 정지, 반복까지 제어 가능
• 이벤트 제어 가능
• 하나 또는 여러개의 @keyframes으로 이루어짐
• @keyframes 사용 규칙
  • 애니메이션을 요소에 바인딩 해야한다

@keyframes 속성 

1. animation-name : 적용할 애니메이션 이름
2. animation-duration : 애니메이션을 완료하는데 걸리는 시간 (기본값 0초)
3. animation-delay : 애니메이션 시작 지연 
4. animation-iteration-count : 애니메이션이 실행되어야하는 횟수 (infinite 영원히)
5. animation-direction : 애니메이션의 진행 방향 (정상적 재생, 역방향 재생)
6. animation-timing-function : 애니메이션의 속도 변화
7. animation-fill-mode : 애니메이션이 재생되지 않을 때의 스타일 지정
8. animation : 단축어 사용 가능 ,,~

<style>

/* example 애니메이션 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* div 요소에 애니메이션 적용 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  /* 속성 : 애니메이션이 완료되는데 걸리는 시간, 지정 안하면 0초여서 애니메이션 동작 X */
  animation-duration: 4s; 
}  
  
</style>

---

JavaScript 애니메이션

• CSS로 처리하기에 복잡하고 무거운 애니메이션 다루기 위해 사용
• 세밀한 애니메이션 제어
• 외부 라이브러리 등을 통해 성능 좋은 애니메이션 구현 가능
• 브라우저 호환성이 좋다

1. setInterval()

setInterval(function, delay)
일정한 시간동안 function를 반복적으로 실행하는 함수

• 초당 n번 반복하는 애니메이션을 만들 수 있다.
• setInterval()을 멈추고 싶다면 clearInterval()에 setInterval() 의 리턴값을 인자로 넘겨주면 된다.
• 같은 애니메이션을 동시에 여러 번 호출하는 경우 애니메이션이 꼬이면서 버벅임이 발생할 수 있다는 단점!

let width = 10;
let intervalId;

// render : setInterval로 animation 기능을 실행 
function render() {
  intervalId = setInterval(animation, 10);
}

// animation 함수
// bar의 width 10씩 증가시킴 -> 200 넘으면 
// clearInterval() 안에 setInterval 리턴값인 intervalId 넣음 
// -> setInterval 멈춤!

function animation() {
  bar.style.width = `${width}px`;
  width += 1;
  if (width > 200) clearInterval(intervalId);
}

// onClick일 때 width 지정,, render 실행
function onClick() {
  width = 10;
  render();
}

2. requestAnimationFrame() / rAF

window.requestAnimationFrame(callback);
브라우저에서 수행하고 싶은 애니메이션을 등록하여, 브라우저에서 Repaint (변경된 요소를 실제로 화면에 그려주는 작업)가 발생하기 전에 해당 애니메이션을 실행시킨다.

• 애니메이션을 위해 최적화된 함수
• 속도 조절 불가! 무조건 1초에 60번 실행된다 (일반 모니터 화면 재생률 60Hz)
• 다음 콜백 사용하려면 반드시 콜백 함수 내에서 rAF 재호출 필요
• 백그라운드탭, hidden iframe에서는 실행 중단

---

Reference ✍
CSS 애니메이션 VS JS(JavaScript) 애니메이션
mdn web docs, 기본 애니메이션
w3schools, CSS Transition & Animation