CSS 애니메이션 만들기 : 애니메이션 기초

CSS 애니메이션 만들기 : 기초 애니메이션

오늘은 CSS의 다양한 애니메이션과 관련된 속성을 알아보고, 기초적인 애니메이션을 만들어 보도록 하겠습니다.

---

ANIMATION

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

TRANSITION

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

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)	버지니아 곡선 값을 만들어서 설정합니다.

---

애니메이션 활용 예제

See the Pen cssani01 by mj0614k (@mj0614k) on CodePen.

See the Pen cssani02 by mj0614k (@mj0614k) on CodePen.

See the Pen cssani03 by mj0614k (@mj0614k) on CodePen.

See the Pen cssani04 by mj0614k (@mj0614k) on CodePen.

See the Pen cssani05 by mj0614k (@mj0614k) on CodePen.

See the Pen cssani06 by mj0614k (@mj0614k) on CodePen.

See the Pen cssani07 by mj0614k (@mj0614k) on CodePen.

See the Pen cssani08 by mj0614k (@mj0614k) on CodePen.