[CSS] animation 속성

css animation 속성 순서

a{animation: name duration timing-function delay iteration-count direction fill-mode play-state;}

애니메이션 속성 명	설명	속성 값
animation-name	애니메이션 이름 지정	특수문자를 제외한 문자열, 숫자, -,_ 를 조합해 1글자 이상
animation-duration	애니메이션 재생 시간, 또는 반복 루프 1회를 도는 시간	예) 0, 3s, 1.5s, 300ms 기본 값 0은 애니메이션 재생되지 않음. "s"(초), "ms"(밀리초) 단위로 표현 가능.
animation-timing-function	애니메이션 진행 속도, 또는 가속 방식을 지정. 미리 설정된 속도 커브 중 한가지를 선택.	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) 중 한가지 선택 가능
animation-delay	애니메이션 시작 지연 시간	"s"(초), "ms"(밀리초) 2가지 단위 사용 가능 0s, 0ms, 미지정: 지연 없이 즉시 애니메이션 시작. 3s: 3초 후 애니메이션 시작. 500ms: 0.5초 후 애니메이션 시작
animation-iteration-count	애니메이션 반복 횟수 지정	양수: 정수로 횟수 표기. 횟수만큼 애니메이션 반복 실행 후 정지. infinite: 무한 반복.
animation-direction	애니메이션 재생 방향	normal: 정방향 재생 reverse: 역방향 재생 alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정 방향 시작) alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)
animation-fill-mode	애니메이션 시작 전, 종료 후 적용할 CSS 스타일을 지정. "none"은 요소의 CSS 스타일을 유지하며, 그 외에는 키프레임 애니메이션의 CSS 스타일을 유지함	none: 기본 값. 애니메이션 중이 아닌 경우, 요소의 CSS 스타일을 유지함. forwards: 애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지 함. backwards: 애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지 함.(지연 시간 포함) both: 애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며, 종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지함. "none" 과는 다름. "none" 과 "backwards" 속성 값은 애니메이션 중이 아닌 경우 다른 화면을 표시할 수 있으므로 주의해야 함.
animation-play-state	애니메이션의 초기 실행 상태를 결정. 웹페이지 로딩 후 애니메이션을 자동 실행할지 여부를 선택할 수 있음.	paused: 애니메이션이 일시 중지된 상태 유지 running: 애니메이션이 재생중인 상태.

 

*animation-timing-function에서 cubic-bezier(n,n,n,n) 조정 테스트

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

 

 

참고

https://blogpack.tistory.com/882

CSS 애니메이션(animation) 속성 이해하기