CSS motion

움직임은 속성 변화인지 시간표인지부터 나눈다

CSS 트랜지션은 상태가 바뀌는 순간을 부드럽게 잇고, CSS 애니메이션은 여러 프레임을 직접 정해 반복과 방향까지 제어한다.

이 절의 흐름

transition + animation
1

상태 변화

버튼 hover, active, focus처럼 값이 바뀌는 순간을 찾는다.

2

전환 속성

property, duration, timing-function, delay로 보간을 정한다.

3

프레임 정의

@keyframes의 0%, 50%, 100%가 장면별 스타일을 만든다.

4

실전 적용

로딩, 등장, 반복 동작은 duration과 iteration까지 함께 확인한다.

모션 적용 한계

모든 속성을 all로 묶기보다 실제로 바뀌는 transform, opacity, background-color처럼 의도가 보이는 속성을 고르면 코드 해석이 쉽다.