CSS3 @keyframes 기본 — animation-name · duration · iteration 완전 정리

 

 

Web Development · CSS3 Animation

CSS3 @keyframes 기본 —
animation-name · duration · iteration-count

JS 없이 CSS만으로 부드러운 애니메이션 만들기 — 시작과 끝(from/to)만 정의

시작 오늘 분석할 코드

파란 사각형이 3초에 걸쳐 색이 바뀌고 둥글어지면서 무한 반복한다. 핵심은 @keyframes로 시작/끝 상태를 정의하고, animation-* 속성으로 어떻게 재생할지 지정하는 것.

div { width: 100px; height: 100px; background-color: blue; animation-name: change-bg; /* @keyframes 이름 */ animation-duration: 3s; /* 한 번에 몇 초 */ animation-iteration-count: infinite; /* 반복 횟수 */ } @keyframes change-bg { from { background-color: blue; border: 1px solid black; } to { background-color: #a5d6ff; border-radius: 50%; } }

실제 출력 미리보기 (alternate로 왕복)

 

용어 용어 정리

@keyframes애니메이션의 시작·중간·끝 상태 정의

from시작 상태 (= 0%)

to끝 상태 (= 100%)

animation-name사용할 @keyframes 이름

animation-duration한 번 재생 시간 (3s, 500ms)

animation-iteration-count반복 횟수 (숫자 또는 infinite)

animation 단축5~6개 속성을 한 줄에 적기

애니메이션 가능 속성색·크기·위치·투명도 등 거의 모든 것

---

1 @keyframes의 두 가지 표기

시작과 끝만 있을 때 두 가지 표기법이 모두 가능 — 결과 같음.

from / to (직관)

@keyframes name {
  from { ... }
  to { ... }
}

% 표기 (확장성)

@keyframes name {
  0% { ... }
  100% { ... }
}

※ 중간 단계가 필요하면 50% { ... }처럼 % 표기로 확장. 첫 코드는 단순해서 from/to가 깔끔.

---

2 animation 속성 7가지

속성	역할	예시
animation-name	실행할 @keyframes 이름	change-bg
animation-duration	한 번 재생 시간	3s / 500ms
animation-iteration-count	반복 횟수	3 / infinite
animation-direction	방향 (정방향/역방향/왕복)	normal / alternate
animation-timing-function	속도 곡선	ease / linear
animation-delay	시작 지연	1s
animation-fill-mode	끝난 후 어느 상태 유지	forwards / backwards

---

3 animation 단축 표기

/* 7개 속성을 한 줄에 */ div { animation: change-bg 3s ease 1s infinite alternate forwards; /* name dur func delay count direction fill-mode */ }

※ 시간 단위(s, ms)가 두 번 나오면 첫 번째는 duration, 두 번째는 delay로 해석.

---

 

반응형

 

4 애니메이션 가능한 속성

가능	불가능
color, background-color, border-color	display (none/block은 깜박임)
width, height, padding, margin	visibility (immediate)
top, left, right, bottom	font-family
opacity, transform	position (static→relative)
border-radius	—

---

5 자주 하는 실수

실수	증상	해결
animation-name 오타	전혀 동작 안 함	@keyframes 이름과 정확히 일치
duration 누락	기본 0초 → 즉시 끝	반드시 duration 지정
display 애니메이션 시도	부드럽지 않게 깜박	opacity로 대체
iteration 1번 후 원상복귀	의도와 다름	animation-fill-mode: forwards
벤더 프리픽스 4번 작성	코드 길어짐	요즘은 표준만 — autoprefixer 사용

---

핵심 한 줄 요약

@keyframes시작·끝 상태 정의 (from/to 또는 %)

animation-name실행할 keyframes 이름 — 정확히 일치

animation-duration한 번 재생 시간 — 필수

infinite반복 횟수 무한대

단축animation: name dur func delay count dir fill

Tags

#CSS3 #keyframes #animation #animation-name #animation-duration #animation-iteration-count #infinite #from-to #percent단계 #키프레임 #fill-mode #animation단축 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

CSS3, keyframes, animation, animation-name, animation-duration, animation-iteration-count, infinite, from-to, percent단계, 키프레임, fill-mode, animation단축, CSS, HTML, 웹개발, 티스토리