CSS 입문 기초

CSS 간단한 애니메이션

CSS 간단한 애니메이션 — 초급

간단한 애니메이션

1. 도입 (왜 배워야 하는가)

CSS 애니메이션은 웹사이트와 애플리케이션에 시각적인 흥미를 추가하여 사용자 경험을 향상시킵니다. 사용자들은 정적인 콘텐츠보다 동적인 콘텐츠에 더 주목하게 되며, 이는 사용자의 참여도와 전환율을 높이는 데 도움이 됩니다. 만약 애니메이션을 모른다면, 사이트가 단조롭게 느껴질 수 있으며, 경쟁이 치열한 환경에서 사용자들의 관심을 끌기 어려울 수 있습니다.

2. 핵심 개념 설명

CSS 애니메이션은 요소의 스타일을 시간에 따라 변화시키는 방법입니다. 이는 마치 영화의 한 장면을 여러 장의 사진으로 나누어 보여주는 것과 같습니다. 각 사진이 빠르게 전환되면 마치 동작하는 것처럼 보이죠. CSS 애니메이션은 주로 @keyframes과 animation 속성을 사용하여 구현합니다.

용어	설명
`@keyframes`	애니메이션의 각 단계에서의 스타일을 정의합니다.
`animation`	애니메이션 효과를 요소에 적용하는 속성입니다.

3. 기본 코드 예제

아래는 간단한 애니메이션을 만드는 코드입니다.

@keyframes example {
  from {
    background-color: red; / 시작 색상 /
  }
  to {
    background-color: yellow; / 끝 색상 /
  }
}

.box {
  width: 100px; / 너비 100px /
  height: 100px; / 높이 100px /
  animation: example 2s infinite; / 애니메이션 효과 /
}

실행 결과: 빨간색 박스가 노란색으로 변하면서 반복됨

@keyframes example { ... }: 애니메이션의 각 단계에서 어떻게 변화할지를 정의합니다.
from { background-color: red; }: 애니메이션 시작 시 박스의 배경색을 빨간색으로 설정합니다.
to { background-color: yellow; }: 애니메이션 끝 시 박스의 배경색을 노란색으로 설정합니다.
.box { ... }: 박스 요소의 크기와 애니메이션을 적용합니다.
animation: example 2s infinite;: 애니메이션 example을 2초 동안 반복합니다.

4. 실전 활용 예제

예제 1: 버튼 호버 애니메이션

쇼핑몰에서 버튼에 마우스를 올리면 색상이 바뀌어 클릭을 유도할 수 있습니다.

.button {
  background-color: blue;
  transition: background-color 0.3s ease; / 색상 전환 효과 /
}

.button:hover {
  background-color: green; / 호버 시 색상 변경 /
}

예제 2: 로딩 애니메이션

웹사이트 로딩 시 사용자에게 로딩 상태를 시각적으로 보여줄 수 있습니다.

.loader {
  border: 16px solid #f3f3f3; / 배경색 /
  border-top: 16px solid #3498db; / 애니메이션 색상 /
  border-radius: 50%; / 원형 /
  width: 50px; / 너비 /
  height: 50px; / 높이 /
  animation: spin 2s linear infinite; / 회전 애니메이션 /
}

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

5. 흔한 실수와 주의사항

실수 1: `animation` 속성 누락

잘못된 코드

.box {
  / animation: example; 누락됨 /
}

올바른 코드

.box {
  animation: example 2s infinite; / 필수 속성 추가 /
}

실수 2: `@keyframes` 이름 오타