[CSS] 애니메이션 종류와 사용 방법 총정리

CSS Animation

CSS 애니메이션 종류와 예시 정리.

animation

animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state

종류	예시
animation-name	@keyframe에 지정된 이름을 설정합니다.
animation-duration	애니메이션이 실행되는 시간을 설정합니다.
animation-timing-function	애니메이션 키프레임 움직임을 설정합니다.
animation-delay	애니메이션이 시작되기 전까지 시간을 설정합니다.
animation-iteration	애니메이션 반복 횟수를 설정합니다.
animation-derection	애니메이션 방향을 설정합니다.
animation-fill-mode	애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다.
animation-play-state	애니메이션 실행 상태를 설정합니다.

transtion

transtion : property | durtion | timing-function | delay

종류	예시
transition-property	트랜지션을 적용할 CSS 속성 대상을 설정합니다.
transition-druation	트랜지션 작동시간을 설정합니다.
transition-timing-function	트랜지션 움직임 효과를 설정합니다.
transition-delay	트랜지션이 시작되기 전까지 시간을 설정합니다.

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)	버지니아 곡선 값을 만들어서 설정합니다.

timing-function : ease

timing-function : step

timing-function : cubic-bezier

timing-function : animation-delay

timing-function : animation-iteration-count

timing-function : animation-direction

timing-function : animation-fill-mode

timing-function : animation-play-state