css animation 옵션

css animation 옵션 설명

animation-name	애니메이션에 사용할 키프레임을 지정합니다. 키프레임은 애니메이션의 시작과 끝 지점을 정의하는데 사용됩니다.
animation-duration	애니메이션의 지속 시간을 지정합니다. 지정된 시간 동안 애니메이션이 실행됩니다.
animation-timing-function	애니메이션의 실행 시간을 조절하는 함수를 지정합니다. 지정된 함수에 따라 애니메이션이 가속, 감속, 등속 등으로 실행됩니다.
animation-delay	애니메이션이 시작하기 전까지의 대기 시간을 지정합니다. 이 값을 사용하여 애니메이션 실행 시점을 조절할 수 있습니다.
animation-iteration-count	애니메이션의 반복 횟수를 지정합니다. 이 값을 사용하여 애니메이션의 반복 횟수를 설정할 수 있습니다.
animation-direction	애니메이션의 실행 방향을 지정합니다. 정방향, 역방향 또는 번갈아 가며 실행하는 방향을 설정할 수 있습니다.
animation-fill-mode	애니메이션이 실행되기 전과 후의 상태를 지정합니다. 이 값을 사용하여 애니메이션 실행 전과 후의 상태를 설정할 수 있습니다.
animation-play-state	애니메이션의 실행 상태를 지정합니다. 이 값을 사용하여 애니메이션이 일시 중지되거나 다시 시작되는 등의 상태를 설정할 수 있습니다.

 

css animation 사용법

animation-duration	animation-duration: 3s;	3초 동안 실행
animation-timing-function	[예시 1] animation-timing-function: ease-in-out; [예시 2] animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);	ease: 기본값으로, 느리게 시작하고 끝나는 효과 linear: 애니메이션을 일정한 속도로 진행합니다. ease-in: 애니메이션을 느리게 시작합니다. ease-out: 애니메이션을 느리게 끝냅니다. ease-in-out: 애니메이션을 느리게 시작하고 끝냅니다. cubic-bezier : 시간 커스텀이 가능합니다.
animation-delay	animation-delay: 3s;	1초 뒤 시작초
animation-iteration-count	animation-iteration-count: infinite;	무한 정 반복
animation-direction	animation-direction: alternate;	normal: 기본값으로, 애니메이션이 정방향 reverse: 애니메이션이 역방향 alternate: 애니메이션이 정방향과 역방향으로 번갈아 실행 alternate-reverse: 애니메이션이 역방향과 정방향으로 번갈아 실행
animation-fill-mode	animation-fill-mode: forwards;	none: 기본값으로, 애니메이션의 실행 전후에 요소의 스타일을 변경하지 않습니다. forwards: 애니메이션이 종료된 후에도 애니메이션의 최종 상태를 유지 backwards: 애니메이션이 실행되기 전에 애니메이션의 시작 상태를 요소에 적용 both: forwards와 backwards를 모두 적용합니다.
animation-play-state	animation-play-state: paused;	paused: 일시 중지 runnung : 실행