animation shorthand

전환 상태 정의 기준

`animation`은 이름과 시간만 적는 속성이 아니라 반복, 방향, 종료 상태까지 한 번에 묶는 실행 계획입니다.

1

name + duration

어떤 keyframes를 몇 초 동안 재생할지 정하는 필수 쌍입니다.

2

timing + delay

속도 곡선과 시작 대기 시간을 정해 등장 감각을 조절합니다.

3

count + direction

한 번만 실행할지 반복할지, 역방향이나 왕복 재생을 쓸지 정합니다.

4

fill + state

딜레이와 종료 후의 스타일 유지, 일시 정지 여부를 제어합니다.

animation: fadeInSlideUp 0.8s ease-out 0.5s 1 normal backwards running;
delay

시작 전

backwards가 있으면 0% 프레임의 opacity와 위치를 먼저 적용합니다.

play

재생 중

timing-function이 프레임 사이의 속도감을 부드럽게 보간합니다.

finish

끝난 후

forwards나 both를 쓰면 마지막 프레임 상태를 화면에 남깁니다.

작성 기준

로딩 스피너처럼 계속 도는 효과는 `infinite`, 등장 효과처럼 한 번만 보여줄 움직임은 반복 없이 fill-mode를 먼저 확인합니다.