심화 동적 효과, Animation

transition이 두 상태 사이의 전환이라면, animation은 시작부터 끝까지 직접 정의하는 동적 효과이다.
@keyframes로 애니메이션의 흐름을 정의하고, animation 속성으로 요소에 적용한다.

@keyframes

애니메이션의 각 단계를 정의한다.


/* from / to — 시작과 끝 2단계 */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* 퍼센트 — 세밀한 단계 제어 */
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

animation 속성

① 개별 속성


.box {
  animation-name: fadeIn;              /* @keyframes 이름 */
  animation-duration: 0.5s;           /* 한 사이클 시간 */
  animation-timing-function: ease;    /* 속도 곡선 */
  animation-delay: 0s;                /* 시작 전 대기 시간 */
  animation-iteration-count: 1;       /* 반복 횟수 */
  animation-direction: normal;        /* 재생 방향 */
  animation-fill-mode: none;          /* 시작·끝 상태 유지 여부 */
  animation-play-state: running;      /* 재생·일시정지 */
}

animation-iteration-count — 반복 횟수를 지정한다.

값	설명
`1`	1회 재생 (기본값)
`n`	n회 반복
`infinite`	무한 반복

animation-direction — 재생 방향을 지정한다.

값	설명
`normal`	정방향 (기본값)
`reverse`	역방향
`alternate`	정방향 → 역방향 번갈아
`alternate-reverse`	역방향 → 정방향 번갈아

animation-fill-mode — 시작 전·종료 후 요소의 상태를 지정한다.

값	설명
`none`	원래 상태로 돌아감 (기본값)
`forwards`	종료 후 마지막 keyframe 상태 유지
`backwards`	시작 전 첫 keyframe 상태 적용
`both`	forwards + backwards 둘 다

② 단축 속성

name duration timing-function delay iteration-count direction fill-mode 순서로 작성한다.


.box {
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

Transition vs Animation

	Transition	Animation
트리거	상태 변화 필요 (hover 등)	자동 실행 가능
단계	시작 → 끝 2단계	`@keyframes`로 세밀하게 제어
반복	불가	`infinite` 등 반복 가능
적합한 경우	hover, focus 등 인터랙션	로딩, 배너, 주목 효과

body {
  background: #0f172a;
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
}
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.section {
  background: #1e293b;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
}
.label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0 0 16px;
  align-self: flex-start;
}
.box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}
/* ① 이동 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}
.bounce-box {
  background: #3b82f6;
  animation: bounce 1s ease-in-out infinite;
}
 
/* ② 페이드 */
@keyframes fade {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}
.fade-box {
  background: #8b5cf6;
  animation: fade 1.5s ease-in-out infinite;
}
 
/* ③ 회전 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin-box {
  background: #f59e0b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
 
/* ④ 색상 변화 */
@keyframes colorChange {
  0%   { background: #ef4444; }
  33%  { background: #10b981; }
  66%  { background: #3b82f6; }
  100% { background: #ef4444; }
}
.color-box {
  border-radius: 50%;
  animation: colorChange 3s linear infinite;
}

Open Sandbox