CSS3 animation — 속성 5종 + transform 활용 완전 정리

 

 

Web Development · CSS3 Animation

CSS3 animation 속성 5종 +
transform scale·rotate 활용

name · duration · direction · iteration-count + 크기·회전 동시 변환

시작 오늘 분석할 코드

박스가 크기·색·투명도·각도가 동시에 바뀌면서 무한 반복하는 애니메이션. 키프레임에서 transform으로 scale + rotate를 같이 변경하는 패턴.

.box { animation-name: moving; animation-duration: 3s; animation-direction: normal; /* 정방향 */ animation-iteration-count: infinite; } @keyframes moving { from { width: 200px; background: #faef7c; opacity: 0.5; transform: scale(0.5) rotate(15deg); /* 작게 + 기울어짐 */ } to { width: 400px; background: #ff9400; opacity: 1; transform: scale(1) rotate(0deg); /* 원래 크기 + 똑바로 */ } }

실제 출력 미리보기

CSS3 Animation

용어 용어 정리

animation-direction방향 — 정방향/역방향/왕복

normal (기본)from → to 한 방향만

reverseto → from 역방향만

alternate왕복 — from↔to 반복

infinite반복 무한대

transform: scale크기 변환 (1=원본, 0.5=절반)

transform: rotate회전 — deg 단위 (15deg, -90deg)

함수 결합space로 연결 — scale(0.5) rotate(15deg)

---

1 animation-direction의 4가지

값	동작
normal (기본)	from → to (정방향), 다시 from → to 반복
reverse	to → from (역방향), 매번 같은 방향 반복
alternate	1회: from → to / 2회: to → from (왕복)
alternate-reverse	1회: to → from으로 시작 후 왕복

normal (반복): from → to | from → to | from → to (점프하며 반복) alternate (왕복): from → to → from → to → from (왕복 자연스러움)

---

2 transform 함수 결합

transform은 여러 변환을 한 줄에 공백으로 연결해서 동시에 적용한다. 순서가 중요하다.

transform: scale(0.5) rotate(15deg); ─┬── ─┬── │ └─ 15도 회전 └─ 0.5배로 축소 함수 적용 순서: 오른쪽 → 왼쪽 1. 먼저 15도 회전 2. 그 결과를 0.5배로 축소

---

3 iteration-count의 값

값	의미
1 (기본)	한 번만 재생
3	3번 반복
infinite	무한 반복
2.5	2.5번 — 마지막은 절반만 (실험적)

---

 

반응형

 

4 animation 단축 표기 권장

5개 속성을 따로따로 쓰는 것보다 단축이 가독성에 좋다.

/* 길게 쓴 버전 (이 코드) */ .box { animation-name: moving; animation-duration: 3s; animation-direction: normal; animation-iteration-count: infinite; } /* 단축 권장 */ .box { animation: moving 3s normal infinite; }

---

5 자주 하는 실수

실수	증상	해결
infinite + normal 조합	매번 점프하며 반복 (어색)	infinite + alternate로 자연스러운 왕복
transform 함수 분리해서 쓰기	마지막 것만 적용	transform: a() b() 한 줄
scale(0.5)로 시작 → 위치 어긋남	회전 중심점이 이동	transform-origin으로 중심점 명시
3D transform 미사용 모바일	버벅임	translate3d(0,0,0) 트릭으로 GPU 가속

---

핵심 한 줄 요약

animation 속성 5종name · duration · direction · iteration · timing

directionnormal / reverse / alternate / alternate-reverse

infinite + alternate자연스러운 왕복 반복

transform 결합scale() rotate() 한 줄에 공백으로

단축animation: name dur dir count

Tags

#CSS3 #animation #animation-name #animation-duration #animation-direction #animation-iteration-count #animation-timing-function #alternate #infinite #transform #scale #rotate #keyframes #CSS #HTML #웹개발 #티스토리

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

CSS3, animation, animation-name, animation-duration, animation-direction, animation-iteration-count, animation-timing-function, alternate, infinite, transform, scale, rotate, keyframes, CSS, HTML, 웹개발, 티스토리