Animation

animation이란?
CSS에서 시간에 따라 요소의 속성 값을 바꿔주는 기능이다.
단순히 한 번 바뀌는 transition과 달리, animation은 자동으로 시작, 여러 단계, 반복도 가능하다.

Transition

상태가 변할 때 부드러운 전환 효과를 주는 속성이다.
(ex. hover 시 색상, 크기, 투명도 변화 등)

.box {
  transition: all 0.3s ease;
}
.box:hover {
  background-color: tomato;
  transform: scale(1.1);
}

핵심 속성

• transition-duration: 전환 시간
• transition-delay: 시작 전 지연 시간
• transition-timing-function: 속도 곡선 (linear, ease-in-out 등)

transition의 속성 지정 방식

1. 모든 속성을 한 번에 처리

   transition: all 2s linear 1s;

2. 개별 속성 지정

   transition-property: background-color, transform;
   transition-duration: 2s;
   transition-delay: 1s;
   transition-timing-function: ease-in-out;

Transform

transform은 요소의 이동, 회전, 크기 등을 바꿀 때 사용한다.

transform: translateX(100px); /* x축으로 이동 */
transform: rotate(45deg); /* 45도 회전 */
transform: scale(1.2); /* 크기 확대 */

@keyframes + animation

자동으로 반복되거나 여러 단계로 변하는 동작에 사용한다.

@keyframes slideRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.box {
  animation: slideRight 1s ease-in-out forwards;
}

• animation-name: `@keyframes 이름
• duration: 재생 시간
• iteration-count: 반복 횟수(infinite 가능)
• direction: normal, reverse, alternate
• fill-mode: forwards → 마지막 상태 유지

🛠 실습

예제 1: 버튼 hover 시 색상/크기 변화

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

.btn {
  padding: 10px 20px;
  background: cornflowerblue;
  transition: all 0.3s ease;
}
.btn:hover {
  background: royalblue;
  transform: scale(1.1);
}

예제 2: 페이지 로드시 요소 슬라이드 등장

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fade-in {
  animation: slideUp 0.6s ease-out forwards;
}

애니메이션 조합과 인터랙션

인터랙션(Interaction)이란 웹사이트나 앱에서 사용자와 화면 요소 간의 상호작용을 말한다. 쉽게 말하면 "사용자가 무언가를 했을 때 그것에 반응하는 UI"이다.

animation 속성 심화

animation은 여러 속성을 한 번에 묶어서 사용할 수 있다.

animation: name duration timing-function delay iteration-count direction fill-mode;

animation: bounce 2s ease-in-out 0.5s infinite alternate both;

구성 요소	설명
이름	@keyframes 이름
시간	애니메이션 재생 시간
속도	ease, linear 등 가속도
지연	시작 전 대기 시간
반복	infinite (무한 반복)
방향	alternate (왕복)
종료 상태	both (마지막 프레임 유지)