[HTML/CSS] 애니메이션(@keyframes)

CSS 애니메이션

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다.

@keyframes 키워드를 활용하면 단계별로 정밀하게 짜여진 애니메이션을 만들 수 있다!

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

 

애니메이션을 정의하는 CSS 속성들:

• animation-name: 애니메이션의 이름 (@keyframes에서 정의된 이름과 일치해야 함).
• animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간 (예: 2s는 2초).
• animation-timing-function: 애니메이션의 속도 곡선 (예: ease, linear, ease-in, ease-out, ease-in-out 등).
• animation-delay: 애니메이션이 시작되기 전 지연 시간.
• animation-iteration-count: 애니메이션 반복 횟수 (예: infinite는 무한 반복).
• animation-direction: 애니메이션 반복 시 방향 (예: normal, reverse, alternate, alternate-reverse).
• animation-fill-mode: 애니메이션이 시작하기 전이나 끝난 후 요소의 스타일 상태 (예: none, forwards, backwards, both).

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

transition VS animation 차이

transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이다.

 

transition 속성은 요소의 상태가 변해야 바뀌는 상태를 애니메이션을 실행한다.

animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다.

요소의 모양과 동작을 키프레임 단위로 변경할 수 있고, 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.

 

 

 

 

 

-끝-