Animation

CSS Animation은 Element에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 방법 입니다.

이 CSS Animation에서 중요한 것을 animation 과 @keyframes 입니다.

위 내용을 각 각 다루어 보겠습니다

Animation속성의 하위 속성들에 대해서 설명을 작성하겠습니다.

animation-delay Animation이 실행되는 시간을 지정합니다. (ex. 2s와 10s가 있을 때, 2s가 더 빠르게 보여짐)
animation-direction Animation이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
animation-duration 한 싸이클의 Animation이 얼마에 걸쳐 일어날지 지정합니다.
animation-iteration-count (en-US) Animation이 몇 번 반복 될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
animation-name (en-US) 이 Animation의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 상세하게 적용할 수 있습니다.
animation-play-state (en-US) Animation을 멈추거나 다시 시작할 수 있습니다.
animation-timing-function (en-US) 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
animation-fill-mode Animation이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

Provide feedback