CSS는 웹 페이지에 다양한 애니메이션 및 전이 효과를 쉽게 추가할 수 있는 강력한 기능을 제공합니다. 이를 통해 웹 사이트의 사용자 경험을 향상시키거나 시각적인 효과를 추가할 수 있습니다.

애니메이션

CSS를 사용하여 간단한 애니메이션 효과를 만들 수 있습니다. 예를 들어, 다음 코드는 버튼에 호버 효과를 추가하는 방법을 보여줍니다.

button {
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #ff0000;
}

위 코드에서 transition 속성은 버튼의 배경 색상이 변할 때 0.3초 동안 부드럽게 전환되도록 설정합니다.

전이 효과

또한 CSS를 사용하여 요소의 상태 변화에 전이 효과를 적용할 수 있습니다. 예를 들어, 다음 코드는 박스를 클릭했을 때 크기가 변경되는 전이 효과를 추가하는 방법을 보여줍니다.

.box {
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  transition: width 0.3s ease, height 0.3s ease;
}

.box:hover {
  width: 150px;
  height: 150px;
}

위 코드에서 transition 속성을 사용하여 박스의 너비와 높이가 변할 때 0.3초 동안 부드럽게 전환되도록 설정합니다.

CSS를 사용하여 애니메이션 및 전이 효과를 추가하는 것은 웹 페이지를 더욱 동적이고 매력적으로 만드는데 큰 도움이 됩니다.

더 자세한 내용은 CSS transitions and animations를 참고하세요.