Animation

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

animation-timing-function / transiton-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.3;	트렌지션 작동 시간을 설정합니다.
transition-timing-function	transition-timing-function : linear;	트렌지션 움직임 효과를 설정합니다..
transition-delay	transition-delay : 1s;	트렌지션이 시작되기 전에 대기시간을 설정합니다.

Animation : position start

Animation2 : width start

Animation3 : border start

Animation4 : rotate start

Animation5 : skew start

Animation6 : rotate3d start

Animation7 : rotate3d startstart

Animation8 : mo,js start