CSS 애니메이션 : 속성 알아보기 + 예제

애니메이션 만들기

CSS를 이용한 애니메이션 만들기 방법을 알아봅니다. 애니메이션에 관련된 속성은 정말 많고 값에 따라 다른 애니메이션을 만들 수 있으니, 유형을 잘 알아두었다가 활용해 봅시다!

> animation 속성

animation으로 시작하는 속성들은, 움직임을 줄 수 있는 애니메이션 관련 속성입니다.

종류	설명
animation-name	@keyframe에 지정된 이름을 설정합니다.
animation-duration	애니메이션이 실행되는 시간을 설정합니다.
animation-timing-function	애니메이션 키프레임 움직임을 설정합니다.
animation-delay	애니메이션이 시작되기 전까지 시간을 설정합니다.
animation-iteration	애니메이션 반복 횟수를 설정합니다.
animation-derection	애니메이션 방향을 설정합니다.
animation-fill-mode	애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다.
animation-play-state	애니메이션 실행 상태를 설정합니다.

> transtion 속성

transtion 시작하는 속성들은, 애니메이션에 전환효과를 줄 수 있는 transtion관련 속성입니다.

종류	설명
transition-property	트렌지션을 적용할 CSS 속성 대상을 설정합니다.
transition-druation	트렌지션 작동시간을 설정합니다.
transition-timing-function	트렌지션 움직임 효과를 설정합니다.
transition-delay	트렌지션이 시작되기 전까지 시간을 설정합니다.

> timing-function 속성

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 한눈에 보기 : ease

ease~는 시작점이나 끝점에서의 애니메이션 속도 효과를 조절합니다.

See the Pen css animation timing by hjkang306 (@hjkang306) on CodePen.

> timing-function 한눈에 보기 : step

step은 애니메이션을 애니메이션이 실행되는 n초 동안 m번 끊어 애니메이션을 실행합니다.

See the Pen css animation timing : step by hjkang306 (@hjkang306) on CodePen.

> timing-function 한눈에 보기 : cubic-bezier

cubic-bezier는 애니메이션의 실행 속도를 ease~ 대신 직접 설정하여 사용할 수 있는 기능입니다.

cubic-bezier 사이트 가기

See the Pen css animation timing : cubic-bezier by hjkang306 (@hjkang306) on CodePen.

> timing-function 한눈에 보기 : animation-delay

animation-delay는 애니메이션의 실행 시작을 지연시킬 수 있습니다.

See the Pen css animation timing : animation-delay by hjkang306 (@hjkang306) on CodePen.

> timing-function 한눈에 보기 : animation-iteration-count

animation-iteration-count는 애니메이션의 실행 횟수를 설정할 수 있습니다.

See the Pen css animation timing : animation-iteration-count by hjkang306 (@hjkang306) on CodePen.

> timing-function 한눈에 보기 : animation-direction

animation-direction은 애니메이션이 끝점에 도달했을 때, 다음에 어떻게 진행할지를 설정할 수 있습니다.

See the Pen css animation timing : animation-direction by hjkang306 (@hjkang306) on CodePen.

> timing-function 한눈에 보기 : animation-fill-mode

animation-fill-mode는 애니메이션이 끝난 후, 어느 지점으로 돌아올지를 설정할 수 있습니다.

See the Pen css animation timing : animation-fill-mode by hjkang306 (@hjkang306) on CodePen.

> timing-function 한눈에 보기 : animation-play-state

animation-play-state는 애니메이션의 실행과 정지를 설정합니다.

See the Pen css animation timing : animation-play-state by hjkang306 (@hjkang306) on CodePen.

> step을 이용한 애니메이션

See the Pen step by hjkang306 (@hjkang306) on CodePen.