CSS Animation?

CSS Animation은 웹 요소에 동적이고 생동감 있는 효과를 부여하여 사용자의 시선을 끌고 상호작용성을 높이는 데 사용됩니다. 이번 글에서는 CSS Animation의 기본 개념과 사용법, 그리고 몇 가지 실제 예시를 살펴보겠습니다.

기본적인 CSS Animation 구성 요소

/* 기본적인 CSS Animation 설정 */
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.element {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes: 애니메이션 키프레임을 정의하는 데 사용됩니다. 시작과 끝 상태를 지정하여 애니메이션의 흐름을 제어합니다.
animation-name: 적용할 키프레임의 이름을 지정합니다.
animation-duration: 애니메이션의 지속 시간을 지정합니다.
animation-timing-function: 애니메이션의 타이밍 함수를 지정하여 변화 속도를 조절합니다.
animation-delay: 애니메이션 시작까지의 지연 시간을 지정합니다.
animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다. infinite로 설정하면 무한 반복됩니다.
animation-direction: 애니메이션의 반복 방향을 지정합니다.

주요 애니메이션 효과

• 페이드 인/아웃

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation-name: fade-in;
  animation-duration: 1s;
}

• 회전

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.element {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

• 축소/확대

@keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.element {
  animation-name: scale;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

실제 예시

• 버튼 클릭 애니메이션

<button class="btn">Click me</button>

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.btn {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

###마치며
CSS Animation을 활용하면 웹 요소에 동적이고 매력적인 효과를 부여하여 사용자의 시선을 끌고 인터랙션을 향상시킬 수 있습니다. 다양한 효과와 옵션을 조합하여 웹 페이지를 더욱 생동감 있게 만들어보세요.