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

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

 

/* CSS 애니메이션 예제 */
@keyframes move {
  0% { transform: translateY(0); }
  50% { transform: translateY(50px); }
  100% { transform: translateY(0); }
}

.element {
  animation: move 2s infinite;
}

CSS 애니메이션 소개

CSS 애니메이션은 웹 요소에 변화를 부여하여 화면에 생동감을 주는 기술입니다. 주로 @keyframes 규칙을 사용하여 애니메이션의 각 단계를 정의하고, 해당 애니메이션을 요소에 적용합니다. 이를 통해 요소의 위치, 크기, 색상 등을 부드럽게 변화시킬 수 있습니다.

 

반응형

 

/* CSS 트랜지션 예제 */
.transition {
  transition: width 0.5s ease-in-out;
}

.transition:hover {
  width: 200px;
}

CSS 트랜지션 소개

CSS 트랜지션은 요소의 상태 변화를 부드럽게 처리하는 기술입니다. 특정 속성의 변화에 대한 시작 값과 끝 값을 설정하여 해당 속성이 변화할 때의 전환 효과를 정의합니다. 주로 hover나 클릭과 같은 이벤트에 반응하여 요소의 상태를 변경할 때 사용됩니다.

 

 

위의 예제는 간단한 CSS 애니메이션과 트랜지션을 보여줍니다. 애니메이션은 요소를 수직으로 이동시키고, 트랜지션은 요소의 너비를 변경하는 것을 보여줍니다.

애니메이션은 @keyframes를 사용하여 각 단계를 정의하고, 트랜지션은 hover 이벤트에 반응하여 너비를 변경합니다.

이렇게 CSS 애니메이션과 트랜지션을 활용하면 웹 페이지에 생동감을 불어넣고 사용자 경험을 향상시킬 수 있습니다.

CSS 애니메이션과 트랜지션은 웹 개발자에게 매우 유용한 기술입니다. 이를 통해 웹 페이지를 더 동적으로 만들고 사용자의 시선을 끄는 효과를 얻을 수 있습니다.

 

 

- 이전 수업 목록