[css] CSS 애니메이션을 활용한 UI/UX 디자인 팁

26 Dec 2023

CSS 애니메이션은 웹 페이지의 UI/UX를 향상시키는 강력한 도구입니다. 이 포스트에서는 CSS 애니메이션을 활용하여 웹 디자인의 사용자 경험을 개선하는 몇 가지 유용한 방법을 살펴보겠습니다.

페이드 인/아웃 애니메이션

페이지 내 요소가 부드럽게 나타나거나 사라지는 효과를 주는 페이드 인/아웃 애니메이션은 사용자에게 자연스럽고 매끄러운 느낌을 전달합니다. 아래는 텍스트 요소에 페이드 인 애니메이션을 적용하는 간단한 CSS 코드 예제입니다.

.fade-in {
  opacity: 0;
  animation: fadeInAnimation 1s ease-in forwards;
}

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

확대/축소 효과

사용자의 상호작용에 반응하여 요소를 확대 또는 축소하는 CSS 애니메이션은 사용자의 주의를 끌고 인터랙티브한 UI를 구현하는 데 유용합니다. 아래는 버튼이 클릭됐을 때 확대되는 효과를 부여하는 CSS 코드 예제입니다.

.button {
  transition: transform 0.2s;
}

.button:hover {
  transform: scale(1.1);
}

이미지 슬라이드쇼

CSS 애니메이션을 활용하여 간단한 이미지 슬라이드쇼를 만들 수 있습니다. 아래는 간단한 이미지 슬라이드쇼를 만드는 데 사용되는 CSS 코드 예제입니다.

.slideshow {
  display: flex;
  overflow: hidden;
}

.slide {
  flex: 0 0 100%;
  transition: all 1s;
}

.slideshow input[name="r"] {
  animation: slideshow 12s infinite;
  display: none;
}

@keyframes slideshow {
  20% {
    transform: translateX(0);
  }
  33.3333% {
    transform: translateX(-100%);
  }
  66.6666% {
    transform: translateX(-100%);
  }
  80% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}

CSS 애니메이션은 웹 디자인에서 매력적인 UI/UX를 구현하는 데 중요한 도구입니다. 이러한 간단한 예제를 통해 CSS 애니메이션을 활용하여 더욱 매끄러운 사용자 경험을 제공할 수 있습니다. CSS 애니메이션을 사용하여 직관적이고 매력적인 웹 페이지를 디자인하는 방법에 대해 더 깊이 고민해보세요.

목차

페이드 인/아웃 애니메이션

확대/축소 효과

이미지 슬라이드쇼