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 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:
-
@keyframes bounce
: Defines an animation named bounce. This animation simulates a bouncing effect through specific transformations. -
from
andto
: Define the start and end stages of the bounce animation.from
indicates the animation's starting point, andto
signifies the ending point. At each stage, thetransform
property moves the element vertically.translateY(0px)
represents the element's original position, andtranslateY(-10px)
moves the element 10 pixels upward. -
In the
.profile-image
class, we use theanimation
property to set the bounce animation for 1 second, ensuring it repeats infinitely with theinfinite
keyword. Thealternate
setting allows the animation to play in reverse, enhancing the natural up-and-down motion effect.
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help