Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Vertically Moving Profile Image

Let's make a profile picture move endlessly up and down.

Define a @keyframes called bounce as shown below, and add bounce 1s infinite alternate to the profile-image class.

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

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

/* Applying bounce animation */
.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* Repeat bounce animation infinitely for 1 second, alternating directions */
  animation: bounce 1s infinite alternate;
}

bounce 1s infinite alternate operates as follows:

  1. @keyframes bounce: Defines an animation named bounce. This animation simulates a bouncing effect through specific transformations.

  2. from and to: Define the start and end stages of the bounce animation. from indicates the animation's starting point, and to signifies the ending point. At each stage, the transform property moves the element vertically. translateY(0px) represents the element's original position, and translateY(-10px) moves the element 10 pixels upward.

  3. In the .profile-image class, we use the animation property to set the bounce animation for 1 second, ensuring it repeats infinitely with the infinite keyword. The alternate setting allows the animation to play in reverse, enhancing the natural up-and-down motion effect.

Want to learn more?

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