📑 개요
웹에 있어 애니메이션은 UX를 향상시키고 사용자의 흥미를 끄는 데 굉장히 큰 역할을 한다!
나도 프로젝트를 할 때 애니메이션에 꽤나 신경을 써서 작성하는 편이다.
이런 애니메이션에는 크게 CSS 애니메이션과 JavaScript 애니메이션이 있으며 분명한 차이점도 갖고 있다.
지금부터 그 차이점과 장단점을 알아보자!
🎀 CSS 애니메이션과 예시
- CSS 애니메이션이란?
웹페이지의 스타일을 선언적으로 정의하는 데 사용된다.
간단하게 처리할 경우 CSS 애니메이션을 사용한다.
transition이나 hover, @keyframes, animation 등의 속성이 있다.
- transition과 hover 예시
// transition 속성을 사용하여 박스의 크기를 변경하고
// :hover 선택자를 사용하여 호버 상태에서 크기를 조절한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: width 1s, height 1s;
}
.box:hover {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- @keyframes, animation 예시
@keyframes : 원하는 스타일 변경을 지정하는 규칙 집합을 정의한다.
animation : 애니메이션의 이름, 지속시간, 타이밍 함수 등을 설정한다.
// 박스 요소가 좌우로 움직인다.
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation: slide 2s ease-in-out infinite;
}
🎁 JavaScript 애니메이션과 예시
- JavaScript 애니메이션이란?
JavaScript를 사용하여 동적으로 웹페이지의 요소를 조작하고 애니메이션을 만든다.
CSS로 처리하기에는 복잡하고 무거운 애니메이션들을 효율적이고 세밀하게 다루기 위해 사용한다.
requestAnimationFrame(), setIntervel()과 같은 함수를 사용한다.
- requestAnimationFrame() 예시
requestAnimationFrame() : 브라우저에게 애니메이션을 수행할 다음 프레임을 알리고 브라우저가 준비되었을 때 해당 프레임에서 함수를 호출한다.
// 클릭 이벤트에 반응하여 박스의 크기를 변경하는 애니메이션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box" id="animatedBox"></div>
<script>
const box = document.getElementById('animatedBox');
function animateBox() {
let width = 100;
let height = 100;
function frame() {
width += 1;
height += 1;
box.style.width = `${width}px`;
box.style.height = `${height}px`;
if (width < 150) {
requestAnimationFrame(frame);
}
}
frame();
}
box.addEventListener('click', animateBox);
</script>
</body>
</html>// 클릭 이벤트에 반응하여 박스를 좌측으로 이동시킨다.
const box = document.getElementById('animatedBox');
function animateBox() {
let position = 0;
function frame() {
position += 1;
box.style.transform = `translateX(${position}px)`;
if (position < 100) {
requestAnimationFrame(frame);
}
}
frame();
}
box.addEventListener('click', animateBox);
- setInterval() 예시
setInterval() : 주어진 시간 간격마다 특정 함수를 반복적으로 실행하는 함수.
기본 구조
setInterval(callback, interval)
// callback : 주기적으로 실행할 함수 지정
// interval : 함수를 실행한 간격(밀리초 단위) 지정예시
// 1초마다 원(#circle)의 위치가 랜덤하게 변경된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval Example</title>
<style>
#circle {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: relative;
}
</style>
</head>
<body>
<div id="circle"></div>
<script>
const circle = document.getElementById('circle');
setInterval(() => {
circle.style.transform = `translate(${Math.random() * 200}px, ${Math.random() * 200}px)`;
}, 1000); // Move the circle every 1 second
</script>
</body>
</html>
🎉 CSS 애니메이션과 JS 애니메이션의 차이점
- CSS 애니메이션의 특징
- 선언적인 방식이기 때문에 어디서 일어나는지 알기 쉽다.
CSS 애니메이션은 스타일 시트에서 간단한 규칙을 사용하여 요소에 직접 애니메이션을 지정하므로 어디서 일어나는지 쉽게 파악할 수 있다. - 하드웨어 가속
메인 스레드가 아닌 별도의 컴포지터 스레드(Compositor Thread)에서 그려지므로 메인 스레드에서 작업하는 JS보다 효율적이다. - 간단한 애니메이션 효과에 적합하다.
간단한 상태 전환 및 트랜지션 효과에 용이하게 사용되며 코드 양이 적다. - 반응형으로 애니메이션을 구현하기 좋다.
미디어쿼리를 사용하여 반응형 애니메이션 구현에 용이하다. - 외부 라이브러리가 필요하지 않다.
- JS 애니메이션의 특징
- 명령적인 방식
JavaScript 애니메이션은 명령적인 방식으로 동작하며 JavaScript 코드를 사용하여 애니메이션의 동작을 직접 제어한다. - 다양한 제어 기능
JavaScript를 사용하면 더 복잡하고 동적인 애니메이션 구현이 가능하다. 사용자 입력이나 다른 이벤트에 반응하여 애니메이션을 동적으로 변경할 수 있다. - 높은 유연성
JavaScript를 사용하면 시간, 조건, 상태 등에 따라 애니메이션을 세밀하게 제어할 수 있다. - 이벤트 처리 및 상호 작용
이벤트 리스너와 함께 사용하여 사용자 상호 작용에 더 유연하게 대응할 수 있다. - 하드웨어 가속 제어 가능
CSS의 특정 속성으로 인한 가속을 막아주며 모바일에서의 성능 저하를 막을 수 있다. - 브라우저 호환성이 CSS보다 뛰어나다.
- 어떤 것을 사용할까요?
- 간단한 애니메이션 : CSS 애니메이션
- 복잡하거나 동적인 애니메이션 : JavaScript 애니메이션
- 성능과 효율성 : CSS 애니메이션
일반적으로 간단하고 성능이 좋은 애니메이션으로 CSS를 사용하지만 복잡하거나 동적인 상황이 필요하다면 JS 애니메이션을 사용한다.
✨ 마무리
두 애니메이션 다 많이 사용하지만 사실 작성할 때는 CSS가 훨씬 쉬운 건 맞다.
JS는 고민을 좀 하면서 작성해야 하는 부분이 있는듯... 다른 코드 읽을 때도 이해하려고 하고.
하지만 확실히 세밀한 애니메이션에는 JS를 쓸 수밖에 없는 것 같다.
둘 다 공부합시다.........
- 요약
- CSS 애니메이션 : 간단한 애니메이션을 처리할 때 사용
- JavaScript 애니메이션 : 복잡한 애니메이션을 처리할 때 사용
'개발 > Front' 카테고리의 다른 글
| [HTML] 시맨틱 마크업(Semantic MarkUp)이란? (0) | 2024.01.24 |
|---|---|
| [CSS] CSS in JS의 장단점 (0) | 2024.01.24 |
| [CSS] display 속성의 종류 (1) | 2024.01.23 |
| [HTML, JavaScript] HTML 렌더링 도중 JavaScript를 만나면 렌더링이 멈추는 이유 (0) | 2024.01.23 |
| [CSS] margin과 padding의 차이점과 사용법 + 박스모델(box model) (1) | 2024.01.23 |
