ANIMATION

Property Sample Description
animation-name animation-name : name @keyframes에 지정된 이름을 설정합니다.
animation-duration animation-duration : 4s 애니메이션이 실행되는 시간을 설정합니다.
animation-timing-function animation-timing-function: linear; 애니메이션 키프레임 변화 정도를 설정합니다.
animation-delay animation-delay: 1s; 애니메이션이 시작되기 전에 대기 시간을 설정합니다.
animation-interation-count animation-interation-count: 99; 애니메이션 반복 횟수를 설정합니다.
animation-direction animation-direction: alternate; 애니메이션 연결 방향을 설정합니다.
animation-fill-mode animation-fill-mode: forward; 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될 지 설정합니다.
animation-play-state animation-play-state: paused; 애니메이션의 실행 상태를 설정합니다.
animation : {name}{duration}{timing-function}{delay}{iteration-count}{direction}{fill-mode}{play-state}

animation-timing-function / transition-timing-function

Property Description
linear 일정한 간격으로 움직입니다.
ease 처음에는 서서히 가속하고 마지막 부분에서 급격히 감속합니다.
ease-in 처음에는 천천히 시작하고 마지막에 가속합니다.
ease-out 처음에는 최대속도로 시작하고 마지막부분에는 감속합니다.
ease-in-out 처음에는 제로속도에서 시작하고, 중간 지점에서 최고 속도로 움직이고, 마지막 부분에서 서서히 감속합니다.
cubic-bezier 직접 값을 입력해서 속도를 조절합니다.

transition

Property Sample Description
transition-property transition-property : all; 트랜지션을 적용할 css 대상을 설정합니다.
transition-duration transition-duration : 0.3s; 트랜지션 작동시간을 설정합니다.
transition-timing-function transition-duration : linear; 트랜지션 움직임 효과를 설정합니다.
transition-delay transition-delay : 1s; 트랜지션이 시작되기 전에 대기시간을 설정합니다.
linear
ease
ease-in
ease-out
ease-in-out
cubic
step-start
step-end
steps(4, start)
steps(4, end)

Animation : position start

Animation2 : width start

Animation3 : border start

Animation4 : rotate start

Animation5 : skew start

Animation6 : rotate3d start

Animation7 : rotate3d start start

Animation8 : mo,js start