[CSS] ANIMATION

 

@keyframes : 애니메이션 지점 설정

- 브라우저 접두사를 붙여서 사용

@keyframes <이름> { <선택자> { <스타일> } }

 

animation-name : 애니메이션 이름 지정

animation-name : <키프레임 이름> | none

 

animation-duration : 애니메이션 실행 시간 설정

 

animation-direction : 애니메이션 방향 지정

- normal 속성 : 애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아감

- alternate 속성 : 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행

 

animation-iteration-count : 반복 횟수 지정

animation-iteration-count : <숫자> | infinite

- <숫자> : 입력한 숫자만큼 반복 (기본 값은 1)

- infinite : 무한 반복

 

animation-timing-function : 애니메이션 속도 곡선 지정

 

animation : 애니메이션 관련 속성 한번에 표시