CSS animation · transition 완전 정리

 

 

Web Development · CSS

CSS animation · transition

@keyframes 회전 애니메이션과 hover transition 차이를 정리합니다.

시작 오늘 분석할 코드

이 폴더는 JavaScript 앞뒤에서 함께 쓰이는 CSS 기본 레이아웃과 움직임 효과를 정리합니다. display, float, hover, table 스타일, keyframes, animation, transition의 역할을 나누어 봅니다.

@keyframes imagerotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #tran { animation-name: imagerotation; animation-duration: 1s; animation-iteration-count: infinite; } #tran { transition: width 2s; } #tran:hover { width: 100%; }

@keyframes애니메이션의 시간별 스타일을 정의합니다.

animation-name사용할 keyframes 이름입니다.

duration한 번 재생 시간을 정합니다.

iteration-count반복 횟수를 정합니다.

transition상태 변화 과정을 부드럽게 합니다.

transform회전과 확대 같은 변형을 지정합니다.

---

1 @keyframes 기본

@keyframes는 애니메이션의 시간별 스타일 변화를 정의합니다. 원본은 0%에서 0도, 100%에서 360도로 회전합니다.

지점	transform	의미
0%	rotate(0deg)	시작 상태
25%	rotate(90deg)	중간 단계 예시
50%	rotate(180deg)	절반 회전
100%	rotate(360deg)	한 바퀴 회전

---

2 animation 속성

keyframes를 실제 요소에 적용하려면 animation-name, animation-duration, animation-iteration-count를 지정합니다.

속성	역할	예제
animation-name	사용할 keyframes 이름	imagerotation
animation-duration	한 번 재생 시간	1s
animation-iteration-count	반복 횟수	infinite
transform	회전 효과	rotate

---

3 왕복 회전 animation2

두 번째 animation은 -90도에서 90도로 갔다가 다시 -90도로 돌아옵니다. 한 방향으로 계속 도는 첫 예제와 달리 흔들리는 느낌이 납니다.

0 → 360

계속 같은 방향으로 한 바퀴 회전합니다.

-90 → 90 → -90

좌우로 흔들리는 왕복 회전입니다.

---

 

반응형

 

4 transition 기본

transition은 상태가 바뀔 때 중간 변화를 부드럽게 만들어 줍니다. 원본은 hover 시 width가 100%가 되며, 그 변화가 2초 동안 진행됩니다.

평소 width 100px

→

hover

→

2초 동안 width 100%

---

5 animation과 transition 차이

animation은 스스로 반복 재생될 수 있고, transition은 상태 변화가 있어야 움직입니다.

구분	animation	transition
시작 조건	적용되면 자동 재생 가능	상태 변화 필요
중간 단계	keyframes로 여러 지점 지정	시작값과 끝값 사이 보간
반복	iteration-count 가능	상태 변화 때마다 1회
예제	계속 회전	hover 시 확대

---

6 transform과 width

회전은 transform으로 처리하고, transition 예제는 width를 바꿉니다. transform은 레이아웃 영향을 줄이는 편이고, width는 주변 레이아웃에 영향을 줄 수 있습니다.

움직임 성능을 생각하면 width보다 transform: scale을 사용하는 방법도 자주 검토합니다.

---

7 반복과 속도 조절

animation-duration 값을 바꾸면 속도가 달라집니다. 1s는 빠르게, 3s는 느리게 움직입니다. infinite를 숫자로 바꾸면 지정 횟수만 반복됩니다.

설정	효과	예시
duration 1s	빠른 회전	animation-duration:1s
duration 3s	느린 회전	animation-duration:3s
iteration 3	3번 반복	animation-iteration-count:3
iteration infinite	무한 반복	계속 움직임

---

8 자주 하는 실수

실수	증상	해결
keyframes 이름 불일치	애니메이션이 실행되지 않습니다.	animation-name과 이름을 맞춥니다.
duration 누락	움직임이 보이지 않습니다.	animation-duration을 지정합니다.
deg 단위 누락	회전이 적용되지 않습니다.	rotate(90deg)처럼 단위를 씁니다.
transition 대상 없음	부드러운 변화가 없습니다.	transition: width 2s처럼 속성을 지정합니다.
hover만 테스트	터치 환경 차이를 놓칩니다.	모바일 동작도 고려합니다.

---

9 복습 체크리스트

체크	통과 기준
@keyframes	시간 지점별 스타일을 정의합니다.
animation-name	keyframes 이름과 연결합니다.
duration	한 번 재생 시간을 지정합니다.
iteration	반복 횟수를 지정합니다.
transition	상태 변화가 부드럽게 진행됩니다.
hover	마우스 오버 상태에서 width가 바뀝니다.

---

10 테스트 케이스

테스트	확인 내용
기본 회전	이미지가 계속 360도 회전하는지 봅니다.
왕복 회전	-90도와 90도 사이를 오가는지 확인합니다.
duration 변경	1s와 3s 속도 차이를 봅니다.
iteration 변경	infinite 대신 3회 반복을 확인합니다.
hover width	마우스 올릴 때 2초 동안 넓어지는지 봅니다.

---

11 animation 개선 연습

keyframes는 중간 지점을 늘릴수록 움직임을 세밀하게 제어할 수 있습니다. 회전뿐 아니라 크기, 투명도, 위치도 함께 바꿀 수 있습니다.

A

중간 지점 추가25%, 50%, 75%를 넣어 단계별 회전을 만듭니다.

B

반복 횟수 변경infinite 대신 3을 넣어 3번만 재생되게 합니다.

C

방향 변경animation-direction: alternate를 추가해 왕복 느낌을 만듭니다.

D

속도 곡선animation-timing-function으로 움직임 느낌을 바꿉니다.

속성	효과	예시
animation-direction	재생 방향	alternate
animation-timing-function	속도 곡선	linear, ease
animation-delay	시작 지연	0.5s
animation-fill-mode	시작/끝 상태 유지	forwards
animation-play-state	재생/일시정지	paused

---

12 transition 개선 연습

transition은 hover 같은 상태 변화에 반응합니다. width뿐 아니라 transform, opacity, background-color 같은 속성에도 적용할 수 있습니다.

transition 대상	hover 변화	효과
width	100px → 100%	가로 확장
transform	scale(1) → scale(1.5)	확대
opacity	1 → 0.5	투명도 변화
background-color	white → yellowgreen	배경색 변화
border-radius	0 → 50%	모양 변화

#tran { transition: transform 0.4s ease; } #tran:hover { transform: scale(1.4); }

---

13 접근성과 움직임

무한 회전 애니메이션은 학습용으로는 좋지만, 실제 페이지에서는 사용자가 피로감을 느낄 수 있습니다. 움직임을 줄이는 설정도 고려해야 합니다.

상황	권장 처리	이유
무한 반복	필요한 경우에만 사용	시각 피로 감소
빠른 회전	duration 늘리기	어지러움 감소
장식 애니메이션	일시정지 가능하게 설계	사용자 제어권 제공
hover 확대	레이아웃 밀림 확인	주변 요소 겹침 방지
민감 사용자	prefers-reduced-motion 고려	접근성 개선

---

14 움직임 디버깅 순서

애니메이션이 보이지 않을 때는 keyframes, 연결 이름, 시간, 변화 속성을 차례로 확인합니다. transition은 시작값과 끝값이 모두 있어야 변화가 보입니다.

순서	확인	이유
1	@keyframes 이름	animation-name과 정확히 같아야 합니다.
2	duration	시간이 0이면 움직임이 보이지 않습니다.
3	transform 단위	rotate에는 deg 단위가 필요합니다.
4	반복 횟수	1회만 재생되면 놓칠 수 있습니다.
5	transition 대상	width, transform처럼 변하는 속성을 지정해야 합니다.
6	hover 상태	마우스가 올라간 상태에서 끝값이 적용되는지 봅니다.

1

정적 상태 확인이미지가 정상 표시되는지 먼저 봅니다.

2

변화값 확인rotate나 width 값이 실제로 달라지는지 확인합니다.

3

시간 조절duration을 길게 바꿔 움직임을 관찰합니다.

4

반복 제한infinite 대신 숫자를 넣어 종료 상태를 확인합니다.

5

hover 해제마우스를 빼면 transition이 반대로 진행되는지 확인합니다.

---

핵심 한 줄 요약

animation@keyframes와 animation 속성으로 자동 반복 움직임을 만듭니다.

transitionhover 같은 상태 변화가 있을 때 부드러운 중간 변화를 만듭니다.

transform회전은 rotate와 deg 단위를 함께 사용합니다.

Tags

#CSS#animation#transition#keyframes#transform#rotate#hover#duration#iteration#티스토리

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

CSS, animation, transition, keyframes, transform, rotate, hover, duration, iteration, 티스토리