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 예시 (코드는 코드팬으로 확인하세요!)

timing-function 예시2 (코드는 코드팬으로 확인하세요!)

cubic-bezier 예시 (코드는 코드팬으로 확인하세요!)

animation-delay 예시 (코드는 코드팬으로 확인하세요!)

animation-iteration-count 예시 (코드는 코드팬으로 확인하세요!)

animation-direction 예시 (코드는 코드팬으로 확인하세요!)

animation-fill-mode 예시 (코드는 코드팬으로 확인하세요!)

animation-play-state 예시 (코드는 코드팬으로 확인하세요!)