🎨 애니메이션 라이브러리 없이 CSS + JS로 부드러운 UI 애니메이션 만들기

 

 

 

요즘 웹사이트 보면 인터페이스에

애니메이션이 살짝 들어가는 것만으로도 확 다르게 느껴지잖아요?

근데 막상 구현하려면

GSAP, Framer Motion 같은

라이브러리부터 생각나는 경우가 많죠.

 

그런데 라이브러리 없이도

CSS와 자바스크립트만으로

충분히 부드럽고 자연스러운 애니메이션을 만들 수 있다는 거,

알고 계셨나요?

 

오늘은 정말 가볍게,

하지만 확실하게 애니메이션을

구현할 수 있는 방법을 알려드릴게요!

 

 

✅ 왜 굳이 CSS + JS로 애니메이션을 만들까?

간단히 말하면:

• 가볍고 빠릅니다! 로딩 속도 빠른 웹이 유리하니까요.
• 조절이 자유롭습니다! CSS로 모양 만들고 JS로 상황에 따라 제어도 가능해요.
• 브라우저 호환도 괜찮아요! 대부분의 최신 브라우저에서 아주 잘 지원됩니다.

예쁘면서도 최적화된 웹을 만들기 딱 좋은 조합이에요. 😄

 

 

✨ CSS로 간단한 애니메이션 만들기

 

가장 쉬운 방법부터 시작해볼게요!

🟦 transition 사용하기

 

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

 

버튼에 마우스를 올릴 때 살짝 커지는 효과! 간단하죠?

 

🔁 keyframes 활용하기

 

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.bouncy {
  animation: bounce 0.6s infinite;
}

 

살짝 튀는 느낌으로 인터랙션을 줄 수 있어요. 버튼, 배너, 강조할 요소에 딱입니다.

 

🧑‍💻 JavaScript로 더 정교한 컨트롤하기

 

🔄 requestAnimationFrame이란?

 

자바스크립트에서 애니메이션을 만들 땐

requestAnimationFrame()이 핵심이에요.

setTimeout보다 부드럽고,

브라우저가 직접 최적화해서 끊김 없이 동작해요.

 

📦 박스 부드럽게 움직이기

 

let pos = 0;
function moveBox() {
  pos += 2;
  box.style.left = pos + 'px';
  if (pos < 300) requestAnimationFrame(moveBox);
}
moveBox();

 

코드 몇 줄로 자연스럽게 왼쪽에서 오른쪽으로 이동! 아주 기본이지만 효과는 좋아요.

 

🚗 속도 조절하고 싶다면? Easing 함수 쓰세요!

 

직선적으로 슥~ 움직이는 것보다

처음엔 느리게 → 중간엔 빠르게 → 끝엔 다시 느리게

이런 느낌이 훨씬 자연스럽고 예뻐요!

 

🎢 예시: easeInOutQuad

 

function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

 

이걸 애니메이션에 넣어주면 훨씬 찰진 동작이 됩니다.

 

🧭 스크롤할 때 나타나는 애니메이션도 가능!

 

화면을 아래로 내릴 때 특정 요소가 슬쩍 등장하면

사이트가 더 생동감 있게 느껴지죠?

 

✨ 간단한 스크롤 애니메이션

 

window.addEventListener('scroll', () => {
  const el = document.querySelector('.fade-in');
  const top = el.getBoundingClientRect().top;
  const threshold = window.innerHeight * 0.8;

  if (top < threshold) {
    el.style.opacity = 1;
    el.style.transform = 'translateY(0)';
  } else {
    el.style.opacity = 0;
    el.style.transform = 'translateY(20px)';
  }
});

 

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

 

요런 방식으로 스크롤 인터랙션도 손쉽게 구현할 수 있어요!

 

💪 성능까지 챙기기!

 

애니메이션이 많아지면 페이지가 느려질 수도 있으니, 아래 팁도 꼭 참고하세요:

• transform, opacity만을 중심으로 애니메이션 구성하기
• requestAnimationFrame으로 렌더링 타이밍 맞추기
• DOM 접근 최소화하기 (querySelector 매번 쓰지 말고 캐싱하기)

 

📌자주 묻는 질문(FAQ)

 

Q. CSS랑 JS, 뭐로 애니메이션 만드는 게 더 좋아요?

→ 단순한 건 CSS, 조건이나 시간 제어가 필요하면 JS 추천!

 

Q. 애니메이션이 버벅거려요...

→ transform 속성만 쓰고, requestAnimationFrame으로 최대한 최적화해보세요!

 

🔚 마무리하며

 

애니메이션은 디테일에서 사용자 경험을 완성시켜주는 멋진 요소입니다.

이 글이 여러분이 더 매끄럽고 가벼운 웹을 만드는 데 도움이 되었길 바라요!

직접 만든 CSS + JS 애니메이션으로 웹에 생기를 불어넣고,

방문자들의 눈길을 사로잡아보세요 😉

 

궁금한 점이나 “이건 좀 더 깊이 알고 싶다!” 싶은 게 있다면 댓글로 남겨주세요.

다음 글에서도 더 재미있고 유익한 팁으로 찾아뵐게요!

좋아요 👍와 공유 💌는 큰 힘이 됩니다