스크립트 없이도 가능! CSS만으로 애니메이션 효과 주는 5가지 방법

 

 

이번 글에서는 JavaScript나 jQuery 없이
CSS만으로도 멋진 애니메이션 효과를 주는 방법을 소개해드리겠습니다.

CSS 애니메이션은 가볍고 빠르며,
호버 효과, 페이드 인, 슬라이드, 스케일 등 다양한 인터랙션을 구현할 수 있습니다.

초보자 분들도 따라하기 쉬운 코드 예제와 함께
자주 쓰이는 5가지 기법을 알려드릴게요!

---

📍 1. transition으로 부드러운 상태 변화 만들기

button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #1abc9c;
}

 

✅ transition 속성은 요소의 상태가 바뀔 때 애니메이션처럼 부드럽게 전환되도록 만듭니다.
버튼 색이 부드럽게 바뀌는 느낌이 나죠!

---

📍 2. @keyframes로 직접 애니메이션 정의하기

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

 

✅ @keyframes는 애니메이션의 시작과 끝 상태를 정의합니다.
animation 속성을 통해 얼마 동안 어떤 방식으로 실행할지 설정할 수 있습니다.

---

📍 3. transform으로 이동, 회전, 확대 효과

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

 

✅ transform은 크기 조절, 회전, 기울이기, 이동 등을
JavaScript 없이도 구현할 수 있는 강력한 도구입니다.

---

📍 4. animation-delay와 animation-iteration-count

@keyframes slide {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

.slide-in {
  animation: slide 0.5s ease-out 0.3s 1;
}

 

✅ animation-delay: 애니메이션 시작 전 지연 시간
✅ animation-iteration-count: 반복 횟수 (무한 반복도 가능)

---

📍 5. hover, focus, active와 함께 사용하기

a {
  transition: color 0.3s;
}
a:hover {
  color: #ff5733;
}

 

✅ 사용자 액션(호버, 클릭 등)에 따라 자연스러운 반응을 주고 싶을 때
CSS 애니메이션만으로도 충분히 효과적인 UX를 만들 수 있습니다!

---

✅ 마무리하며

CSS 애니메이션은 JavaScript 없이도
웹사이트를 더욱 생동감 있고 직관적인 사용자 경험으로 만들어줍니다.

이번에 소개드린 5가지 방식은
실제 프로젝트에서도 자주 사용되는 핵심 기술들이니
꼭 실습해보시길 추천드립니다 😊