CSS 고급 기초

CSS 고급 CSS 애니메이션 기법

CSS 고급 CSS 애니메이션 기법 — 고급

고급 CSS 애니메이션 기법

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

고급 CSS 애니메이션 기법은 웹 디자인에서 사용자 경험을 향상시키는 중요한 요소입니다. 사용자에게 매력적이고 동적인 인터페이스를 제공함으로써 제품이나 서비스에 대한 관심을 끌 수 있습니다. 예를 들어, 쇼핑몰에서 버튼에 애니메이션을 추가하면 사용자가 클릭하고 싶어하는 욕구를 유도할 수 있습니다. 반면, 이러한 기법을 모른다면 정적인 웹 페이지로 인해 사용자가 웹사이트를 떠나버릴 위험이 큽니다. 사용자 경험이 저하되면 매출 감소로 이어질 수 있습니다. 따라서 CSS 애니메이션 기법을 숙지하고 활용하는 것은 필수적입니다.

2. 핵심 개념 설명

키프레임 애니메이션: 애니메이션의 각 단계(프레임)를 정의하는 기법입니다. 이를 통해 개체의 상태를 시간에 따라 변화시킬 수 있습니다. 비유하자면, 영화의 한 장면을 여러 컷으로 나누어 촬영하는 것과 같습니다.
트랜지션: CSS 속성이 변화할 때의 변화를 부드럽게 연결하는 효과입니다. 마치 전구를 켤 때 서서히 밝아지는 것과 유사합니다.
변형(Transform): 요소의 크기, 회전, 위치 등을 변경하는 CSS 속성입니다. 이는 마치 종이접기를 통해 종이를 변형시키는 것과 같습니다.

용어	설명
키프레임	애니메이션의 각 상태를 정의하는 프레임
트랜지션	속성 변화 시의 부드러운 전환 효과
변형	요소의 크기, 위치 등을 변화시키는 속성

3. 기본 코드 예제

키프레임 애니메이션 예제

@keyframes example {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: example 2s infinite; / 2초 동안 애니메이션을 무한 반복 /
}

실행 결과: 파란색 박스가 위로 올라갔다가 원위치로 돌아오는 애니메이션 발생
동작 설명:

- @keyframes example: 'example'이라는 이름의 애니메이션을 정의. - 0%: 애니메이션 시작 시 박스는 원래 위치에 있고 불투명도는 1. - 50%: 애니메이션 중간 지점에서 박스는 위로 20픽셀 이동하고 불투명도는 0.5. - 100%: 애니메이션 끝에서 박스는 원래 위치로 돌아오고 불투명도는 다시 1. - .box: 박스 요소에 'example' 애니메이션을 2초 동안 무한 반복.

4. 실전 활용 예제

1. 버튼 hover 효과

쇼핑몰에서 장바구니 버튼에 마우스를 올리면 색상이 바뀌고 커지는 효과를 줄 수 있습니다.

.button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: darkgreen; / 배경색이 어두워짐 /
  transform: scale(1.1); / 크기가 10% 커짐 /
}

2. 로딩 애니메이션

웹 페이지 로딩 중 사용자에게 진행 상황을 알려주는 원을 회전시키는 애니메이션입니다.

.loader {
  border: 8px solid #f3f3f3; / 연한 회색 테두리 /
  border-top: 8px solid blue; / 파란색 상단 테두리 /
  border-radius: 50%; / 원 형태 /
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite; / 1초마다 무한 회전 /
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

5. 흔한 실수와 주의사항

실수 1: 애니메이션이 너무 빠르거나 느리게 설정

- 잘못된 코드:

    animation: example 0.1s; / 너무 빠름 /

- 올바른 코드:

    animation: example 2s; / 적당한 속도 /

실수 2: 트랜지션 속성 누락