CSS_Animation

📢 CSS Animation 개념 정리

---

1️⃣ Animation이란?

• 애니메이션(Animation): 연속된 이미지를 빠르게 보여줘서 움직이는 것처럼 보이게 하는 기법

• CSS에서는 요소에 움직임, 변화 효과를 부여할 수 있음

---

2️⃣ CSS로 애니메이션 만드는 방법

1) transition 속성 활용

• 특정 이벤트(예: hover, focus) 발생 시 애니메이션 적용
• 변화 전/후 상태를 부드럽게 연결
• 예제:

  .box:hover {
    transition: all 0.5s ease-in-out;
    background-color: blue;
  }

2) animation + @keyframes 활용

• 이벤트 없이 자동으로 애니메이션 시작
• 시작, 중간, 끝 상태를 세부적으로 제어 가능
• 반복 재생이나 정지 설정 가능

---

3️⃣ @keyframes란?

• 애니메이션의 중간 상태를 정의하는 규칙

• 문법:

  @keyframes moveRight {
    from {
      left: 0;
    }
    to {
      left: 200px;
    }
  }

• 진행도(%)로도 작성 가능:

  @keyframes move {
    0% {
      left: 0;
    }
    50% {
      left: 200px;
    }
    100% {
      top: 200px;
      left: 200px;
    }
  }

---

4️⃣ Animation 관련 주요 속성

속성	설명	예제
animation-name	적용할 keyframes 이름 지정	animation-name: move;
animation-duration	애니메이션 재생 시간 설정	animation-duration: 2s;
animation-direction	재생 방향 설정 (정방향/역방향 등)	animation-direction: alternate;
animation-iteration-count	반복 횟수 설정 (infinite 가능)	animation-iteration-count: 3;
animation-timing-function	애니메이션의 속도 곡선 정의	animation-timing-function: ease-in-out;
animation-delay	시작 지연 시간 설정	animation-delay: 1s;

---

5️⃣ Animation 단축 속성

여러 속성을 한 줄로 작성 가능:

animation: move 2s ease-in-out 1s infinite alternate;

• 순서:
  animation-name → animation-duration → animation-timing-function → animation-delay → animation-iteration-count → animation-direction

❗️ 주의: 순서가 틀리면 예상과 다른 동작이 발생할 수 있음

---

애니메이션 예제

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background: coral;
  animation: slide 3s ease-in-out infinite alternate;
}

• 결과: .box 요소가 좌우로 왔다 갔다 반복 움직임

---

📢 정리

• 간단한 효과: transition 사용
• 복잡한 애니메이션: @keyframes + animation 사용
• 반복, 지연, 방향 제어 가능
• 애니메이션 속성은 단축 속성으로 관리 가능