📚 목차

• CSS 애니메이션의 기본 개념 소개
• 애니메이션을 위한 필수 속성 정리
• 키프레임(keyframes)의 이해와 작성법
• 실습 예제: 버튼에 부드러운 효과주기
• 실습 예제: 이미지에 페이드 인 효과주기
• 실습 예제: 텍스트 슬라이딩 애니메이션 만들기
• 애니메이션 활용 시 주의할 점 정리

CSS 애니메이션의 기본 개념 소개

CSS 애니메이션은 HTML 요소의 스타일을 시간에 따라 변경시켜주는 기능이에요. 자바스크립트 없이도 @keyframes, animation, transition 속성만으로도 생동감 있는 효과를 만들 수 있어서, 웹 초보자들이 시도하기 딱 좋아요. 예를 들어, 버튼을 클릭했을 때 색이 변한다면 그건 transition이고, 색이 자연스럽게 바뀌는 게 animation이에요. 둘 다 웹에 감성을 입히는 방법이죠 😄

애니메이션을 위한 필수 속성 정리

CSS 애니메이션을 만들려면 몇 가지 핵심 속성을 알아야 해요.

• @keyframes: 애니메이션 흐름 정의
• animation-name: 키프레임 이름
• animation-duration: 실행 시간
• animation-timing-function: 속도 곡선
• animation-delay: 시작 전 대기 시간
• animation-iteration-count: 반복 횟수
• animation-direction: 방향

이 속성들만 기억하면 기본적인 애니메이션은 문제없이 만들 수 있어요 💡

키프레임(keyframes)의 이해와 작성법

아래 코드는 점점 투명한 상태에서 완전히 보이게 되는 애니메이션이에요. @keyframes는 애니메이션의 시간 흐름에 따른 변화를 지정하는 영역이에요.

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

from과 to 대신 0%, 100%도 사용할 수 있어요.

실습 예제: 버튼에 부드러운 효과주기

이번엔 버튼에 마우스를 올렸을 때 크기가 살짝 커지도록 적용해볼게요.

.demo-btn {
  transition: transform 0.3s ease-in-out;
}
.demo-btn:hover {
  transform: scale(1.06);
}

마우스를 올려보세요!

정말 간단하지만 시각적으로 확실한 효과가 있어요! 💫

실습 예제: 이미지에 페이드 인 효과주기

페이지가 로딩될 때 이미지가 자연스럽게 나타나는 것도 좋은 UX 중 하나죠.

.fade-in {
  opacity: 0;
  animation: fadeIn 1.5s ease-in forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

이런 식으로 클래스에 애니메이션을 부여하면 훨씬 부드러운 첫인상을 줄 수 있어요 😊

실습 예제: 텍스트 슬라이딩 애니메이션 만들기

텍스트가 오른쪽에서 왼쪽으로 들어오게 만드는 애니메이션을 해볼게요.

.slide-in {
  position: relative;
  left: 100%;
  animation: slideIn 1s ease-out forwards;
}
@keyframes slideIn {
  to { left: 0; }
}

이 텍스트는 오른쪽에서 등장합니다!

새로고침(F5)하시면 효과를 보실 수 있어요. 배너/타이틀에 자주 쓰여요 🔥

애니메이션 활용 시 주의할 점 정리

마구잡이로 애니메이션을 사용하면 오히려 사용자 경험을 해칠 수 있어요.

• 너무 과하면 산만해질 수 있어요 ❗
• 모바일 환경에서는 속도와 배터리 이슈를 고려해야 해요 📱
• 접근성을 위해 모션을 줄일 수 있는 옵션을 함께 제공하는 것이 좋아요.

애니메이션은 “적절한 곳에, 적당한 양”이 중요해요 ✅

자주 묻는 질문 (FAQ)

CSS 애니메이션은 자바스크립트 없이 가능한가요?

네! 대부분의 시각적 효과는 CSS만으로 구현할 수 있어요. JS는 고급 제어가 필요할 때만 쓰셔도 됩니다.

CSS 애니메이션과 트랜지션 차이는?

트랜지션은 “상태 변화”에 반응하고, 애니메이션은 “시간 흐름”에 따라 실행돼요.

브라우저 호환성은 어떤가요?

대부분의 최신 브라우저에서 잘 작동해요. 구형 IE는 주의가 필요해요.

애니메이션을 멈추게 할 수 있나요?

animation-play-state로 제어 가능하며, JS로도 중단할 수 있어요.

모바일 성능은 어떤가요?

복잡한 애니메이션은 성능 저하를 일으킬 수 있으니 단순한 효과 위주로 구성하는 게 좋아요.

여러분도 해보셨나요?

재밌는 애니메이션 아이디어나 실패담도 공유해주세요!
실습하면서 어려웠던 점, 또는 나만의 꿀팁이 있다면 댓글로 소통해봐요 😄