Animation

Property Sample Description
animation-name animation-name:name @keyframes에 지정된 이름을 설정합니다.
animation-duration animation-duration : 4s 애니메이션이 실행되는 시간을 설정합니다.,
animation-timing-funcion animation-timing-function : linear; 애니메이션 키프레임 변화정도를 설정합니다
animation-delay animation-delay:1s; 애니메이션이 시작되기 전에 대기시간을 설정
animation-iteration-count animaiton-iteration-count : 99; 애니메이션 반복 횟수를 설정합니다.
animation-direction animation-direction:alternate; 애니메이션 연결 방향을 설정합니다.
animation-fill-mode animation-fill-mode; forwards; 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 설정합니다.
animation-play-state animation-play-state:paused; 애니메이션의 실행 상태를 설정합니다.
animation : {name}{duration}{timing-funtion}{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; transition을 적용할 css 대사을 설정
transition-duration transition-duration:0.3s; transition 작동시간을 설정
transition-timing-function transition-timing-function:linear; transition 움직임 효과를 설정
transition-delay transition-delay :1s; transition이 시작되기 전에 대기시간을 설정
linear
ease
ease-in
ease-out
ease-in-out
cubic
step-start
step-end
step(4, start)
step(4, end)

Animation : positionstart

Animation2 : widthstart

Animation3 : borderstart

Animation4 : rotatestart

Animation5 : skew start

Animation6 : rotate3d startstart

Animation7 : rotate3D start

Animation8 : mo,js start

See the Pen WWDC 2015 CSS by Donovan Hutchinson (@donovanh) on CodePen.

See the Pen Animated Dot Loaders by Michael Smith (@MichaelRyanSmith) on CodePen.