CSS 애니메이션

이제 프로필을 아래 위로 움직이게 만들어 보겠습니다.

프로필을 위아래로 움직이려면 CSS animation 속성을 사용해야 합니다.

CSS 애니메이션 사용법
선택자 {
  animation: 애니메이션명 시간;
}

여기서 선택자는 애니메이션을 적용하고자 하는 요소를 지정합니다. 애니메이션명은 미리 정의된 애니메이션의 이름을 뜻하고, 시간은 애니메이션이 재생되는 시간을 나타냅니다.

CSS에서 애니메이션은 @keyframes이라는 키워드로 정의합니다. @keyframes 규칙은 애니메이션의 각 단계를 지정합니다.

예를 들어, 다음은 myAnimation이라는 이름의 애니메이션을 정의하는 코드입니다.

CSS 애니메이션 정의
@keyframes myAnimation {
  0% {
    /* 애니메이션의 시작 단계 스타일 */
    transform: translateY(0); /* 시작 지점에서 translateY(0) 적용 */
  }
  50% {
    /* 애니메이션의 중간 단계 스타일 */
    transform: translateY(-20px); /* 50%에서는 translateY(-20px) 적용, 위로 20px 올라감 */
  }
  100% {
    /* 애니메이션의 마지막 단계 스타일 */
    transform: translateY(0); /* 100%에서는 translateY(0) 적용, 다시 원래 위치로 돌아옴 */
  }
}

box 클래스를 가진 요소에 myAnimation 애니메이션을 2초 동안 재생하도록 설정하려면 다음과 같이 CSS 코드를 작성합니다.

myAnimation CSS 애니메이션 적용
.box {
  animation: myAnimation 2s;
}

위의 코드를 사용하면 box 클래스를 가진 요소가 myAnimation 애니메이션을 2초 동안 재생합니다.

CSS의 animation 속성은 요소를 부드럽게 움직이거나 변화시키는 데 사용됩니다. 이를 통해 웹페이지에 다양한 동적 효과를 추가할 수 있습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!