Skip to main content
Practice

Profile Image Moving Up and Down

Now let's make the profile photo move infinitely up and down.

We define a @keyframes named bounce and add bounce 1s infinite alternate to the profile-image class as shown below.

Defining and Applying the bounce Animation
/* Define the bounce animation */
@keyframes bounce {
  from { 
    transform: translateY(0px); /* Starting position */
  }

  to {
    transform: translateY(-10px); /* End position */
  }
}

/* Apply the bounce animation */
.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* The bounce animation will repeat infinitely every 1 second, alternating directions */
  animation: bounce 1s infinite alternate;
}

bounce 1s infinite alternate works as follows.

  1. @keyframes bounce: Defines an animation named bounce. This animation makes the element appear to bounce by applying specific transformations.

  2. from and to: Define the starting and ending stages of the bounce animation. from specifies the start point of the animation, and to specifies the end point. At each stage, the transform property is used to move the element vertically. translateY(0px) indicates the original position of the element, while translateY(-10px) means the element is moved 10 pixels upward.

  3. In the .profile-image class, the animation property is used to make the bounce animation last for 1 second and repeat infinitely, with the infinite attribute. The alternate attribute makes the animation play forward and then backward in an alternating manner, creating a more natural up and down movement.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.