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-iteration-count	animation-iteration-count:999;	애니메이션이 반복 횟수를 설정합니다.
animation-direction	animation-direction:alternate;	애니메이션이 연결 방향을 설정합니다.
animation-fill-mode	animation-fill-mode:forwards;	애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될 지 설정합니다.
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-timing-function:linear;	트랜지션 움직임 효과를 설정합니다.
transition-delay	transition-delay:0.3s;	트랜지션 시작되기 전에 대기시간을 설정합니다.

example

See the Pen gmedom by hyeyeon (@callme365) on CodePen.

See the Pen Loading Circle by hyeyeon (@callme365) on CodePen.

See the Pen Loading Ball by hyeyeon (@callme365) on CodePen.

See the Pen Loading by hyeyeon (@callme365) on CodePen.

See the Pen bubble by hyeyeon (@callme365) on CodePen.

See the Pen roket by hyeyeon (@callme365) on CodePen.