[CSS 수업] 8강 - 애니메이션과 트랜지션

[CSS 수업] 8강 - 애니메이션과 트랜지션

728x90

안녕하세요! 그레이해커 월횽입니다. 웹 페이지를 보다 동적이고 매력적으로 만들기 위해 CSS 애니메이션과 트랜지션을 활용하는 방법을 알아봅시다. 이번 수업에서는 이 두 가지 기술의 개념과 사용법에 대해 자세히 알아보겠습니다.

CSS 애니메이션 소개

@keyframes move {
  0% { transform: translateY(0); }
  50% { transform: translateY(50px); }
  100% { transform: translateY(0); }
}

.element {
  animation: move 2s infinite;
}

CSS 애니메이션은 웹 요소에 변화를 부여하여 화면에 생동감을 주는 기술입니다. 주로 @keyframes 규칙을 사용하여 애니메이션의 각 단계를 정의하고, 해당 애니메이션을 요소에 적용합니다.

반응형

CSS 트랜지션 소개

.transition {
  transition: width 0.5s ease-in-out;
}

.transition:hover {
  width: 200px;
}

CSS 트랜지션은 요소의 상태 변화를 부드럽게 처리하는 기술입니다. hover나 클릭과 같은 이벤트에 반응하여 속성의 전환 효과를 정의할 수 있습니다.

SMALL

이렇게 CSS 애니메이션과 트랜지션을 활용하면 웹 페이지에 생동감을 불어넣고 사용자 경험을 향상시킬 수 있습니다. 이를 통해 웹 사이트의 방문자 이탈률을 줄이고, 페이지 체류 시간을 늘릴 수 있습니다.

이전 강의 보기: [CSS 수업] 7강 - 미디어 쿼리(반응형 웹 디자인)
다음 강의 보기: [CSS 수업] 9강 - CSS 최적화 및 성능 향상