애니메이션 기본

CSS 애니메이션을 활용하면 화면의 요소들이 움직이고 변하게 만들어, 페이지를 조금 더 생동감 있게 꾸밀 수 있습니다.

CSS 애니메이션 기본

• @keyframes 이해하기 @keyframes는 애니메이션이 어떻게 진행될지를 정의합니다. 마치 만화책에서 한 페이지씩 넘기며 이야기가 진행되는 것과 비슷하게, 각 '페이지'(keyframe)마다 요소가 어떻게 변할지를 정의합니다.

• 애니메이션의 시작과 끝 CSS 애니메이션은 시작과 끝이 있습니다. 아래 예시에서 0%는 시작, 100%는 끝입니다. CSS 애니메이션은 이 사이에서 HTML 요소가 어떻게 변할지를 지정합니다.

예시

CSS

@keyframes bounce {
  0% {
    transform: translateY(0); /* 0%에서는 translateY(0) 적용 */
  }
  50% {
    transform: translateY(
      -20px
    ); /* 50%에서는 translateY(-20px) 적용, 위로 20px 올라감 */
  }
  100% {
    transform: translateY(
      0
    ); /* 100%에서는 translateY(0) 적용, 다시 원래 위치로 돌아옴 */
  }
}

위 코드는 "bounce"라는 애니메이션을 만들어, HTML 요소가 위로 올라갔다가 다시 내려오는 움직임을 만듭니다.

간단한 애니메이션 만들기

애니메이션을 적용하려면, 무엇을(animation-name) 얼마나 오래(animation-duration) 동안 실행할지 알려줘야 합니다.

bounce 애니메이션 적용 예시

CSS

div {
  animation-name: bounce; /* bounce 애니메이션 적용 */
  animation-duration: 2s; /* 2초 동안 애니메이션 실행 */
}

이렇게 하면, div 요소가 2초 동안 "bounce" 애니메이션을 실행합니다.

애니메이션 효과 조절하기

animation-timing-function으로 속도 조절하기

animation-timing-function을 사용하면, 애니메이션의 속도를 느리거나 빠르게 조절할 수 있습니다.

사용 예시

CSS

div {
  animation-timing-function: ease-in-out;
}

ease-in-out은 애니메이션의 속도를 천천히 시작해서 중간에 속도를 올리고, 다시 천천히 끝나게 합니다.

animation-delay로 애니메이션 지연시키기

애니메이션을 지연시키고 싶을 때는 animation-delay를 사용합니다.

예시:

CSS

div {
  animation-delay: 1s; /* 1초 뒤에 애니메이션 실행 */
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.