JavaScript 기초 강의 10편: JavaScript와 CSS 애니메이션 연동

1. CSS 애니메이션과 JavaScript의 연동

기본적으로 CSS 애니메이션은 CSS만으로 실행되지만, JavaScript를 사용하면 애니메이션의 시작, 중지, 속성 변경 등을 동적으로 제어할 수 있습니다.

CSS 애니메이션 설정 예제

/* CSS 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animated-element {
    animation: fadeIn 2s forwards;
}

 

JavaScript로 애니메이션 클래스 추가

JavaScript에서 CSS 클래스를 동적으로 추가하거나 제거할 수 있습니다.

const element = document.querySelector(".element");

document.querySelector("#startButton").addEventListener("click", () => {
    element.classList.add("animated-element");
});

코드 설명

• **element.classList.add()**를 사용하여 애니메이션 클래스를 추가하면 애니메이션이 실행됩니다.
• 버튼 클릭 시 .animated-element 클래스가 추가되어 fadeIn 애니메이션이 실행됩니다.

---

2. JavaScript로 CSS 애니메이션 제어

애니메이션 이벤트

JavaScript는 animationstart, animationend, animationiteration 이벤트를 통해 CSS 애니메이션의 시작, 끝, 반복 시점을 감지할 수 있습니다.

element.addEventListener("animationend", () => {
    console.log("애니메이션이 끝났습니다.");
});

애니메이션 중지 및 재시작

CSS 애니메이션을 중지하고 재시작하려면 animation-play-state 속성을 조작할 수 있습니다.

// 애니메이션 중지
element.style.animationPlayState = "paused";

// 애니메이션 재시작
element.style.animationPlayState = "running";

---

3. JavaScript로 애니메이션 직접 구현

CSS 애니메이션 외에도 JavaScript로 애니메이션을 직접 구현할 수 있습니다. **requestAnimationFrame()**을 사용하면 브라우저의 리소스를 효율적으로 사용하며 애니메이션을 실행할 수 있습니다.

기본 애니메이션 예제

let position = 0;

function moveElement() {
    position += 1;
    element.style.transform = `translateX(${position}px)`;

    if (position < 200) {
        requestAnimationFrame(moveElement);
    }
}

moveElement();

코드 설명

• **requestAnimationFrame()**은 브라우저의 다음 리페인트 주기에 함수를 호출하여 매끄러운 애니메이션을 보장합니다.
• moveElement 함수는 요소를 X축으로 이동시키는 애니메이션을 실행합니다.

---

4. 애니메이션 제어 실전 예제

예제: 클릭 시 애니메이션 실행 및 중지

HTML:

<div id="box" class="box"></div>
<button id="toggleAnimation">애니메이션 토글</button>

CSS:

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: moveRight 2s infinite alternate;
}

@keyframes moveRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(200px); }
}

JavaScript:

const box = document.getElementById("box");
const button = document.getElementById("toggleAnimation");

button.addEventListener("click", () => {
    if (box.style.animationPlayState === "paused" || !box.style.animationPlayState) {
        box.style.animationPlayState = "running";
        button.textContent = "애니메이션 중지";
    } else {
        box.style.animationPlayState = "paused";
        button.textContent = "애니메이션 재개";
    }
});

코드 설명

• 버튼을 클릭할 때마다 애니메이션의 animationPlayState를 paused와 running 상태로 전환하여 애니메이션을 중지 및 재개할 수 있습니다.
• box 요소의 animation 속성을 조작하여 클릭 시 애니메이션이 동작합니다.

---

5. JavaScript 애니메이션 라이브러리

JavaScript로 애니메이션을 더 쉽게 구현하기 위해 GSAP 같은 라이브러리를 사용할 수 있습니다. GSAP는 복잡한 애니메이션을 간단한 코드로 구현할 수 있습니다.

GSAP 예제

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
    gsap.to("#box", { x: 300, duration: 2, repeat: -1, yoyo: true });
</script>

코드 설명

• gsap.to() 메서드를 사용해 #box 요소를 X축으로 300px 이동하고, 애니메이션은 2초 동안 지속됩니다.
• repeat: -1로 무한 반복되며, yoyo: true로 돌아올 때 반대 방향으로 애니메이션이 실행됩니다.

---

요약

이번 강의에서는 JavaScript와 CSS 애니메이션의 연동 방법을 학습했습니다. JavaScript로 CSS 애니메이션을 제어하고, requestAnimationFrame()을 사용하여 직접 애니메이션을 구현하는 방법을 알아보았습니다. 또한 GSAP 같은 라이브러리를 사용하면 더 복잡한 애니메이션을 쉽게 구현할 수 있습니다. 다음 강의에서는 JavaScript를 활용한 웹 애플리케이션 구축 기법을 학습하겠습니다.