본문으로 건너뛰기
실습하기

위아래로 움직이는 프로필 이미지

이제 프로필 사진이 아래 위로 무한하게 움직이도록 만들어 보겠습니다.

아래와 같이 bounce라는 이름을 가진 @keyframes를 정의하고, profile-image 클래스에 bounce 1s infinite alternate를 추가합니다.

bounce 애니메이션 정의 및 적용
/* bounce 애니메이션 정의 */
@keyframes bounce {
  from { 
    transform: translateY(0px); /* 시작 위치 */
  }

  to {
    transform: translateY(-10px); /* 끝 위치 */
  }
}

/* bounce 애니메이션 적용 */
.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* bounce 애니메이션을 1초 동안 무한히 반복하고, 번갈아가며 재생 */
  animation: bounce 1s infinite alternate;
}

bounce 1s infinite alternate는 아래와 같이 작동합니다.

  1. @keyframes bounce: bounce라는 이름의 애니메이션을 정의합니다. 이 애니메이션은 요소가 특정 변형(transform)을 거쳐 튕기는 효과를 표현합니다.

  2. from과 to: bounce 애니메이션의 시작과 끝 단계를 정의합니다. from은 애니메이션의 시작 시점을, to는 애니메이션의 끝 시점을 나타내며, 각 단계에서 transform 속성을 사용하여 요소를 수직 방향으로 이동시킵니다. translateY(0px)는 요소의 원래 위치를 나타내며, translateY(-10px)는 요소를 위쪽으로 10픽셀 이동시킨 위치를 의미합니다.

  3. .profile-image 클래스에서 animation 속성을 사용하여 bounce 애니메이션을 1초 동안 지속하고, infinite 속성으로 애니메이션을 무한히 반복하도록 했습니다. 마지막의 alternate를 통해 animation을 순방향/역방향 번갈아가며 재생하도록 설정해서, 위아래로 움직이는 효과를 조금 더 자연스럽게 표현했습니다.

다음 내용이 궁금하다면?

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