CSS Animations

Let's make the profile move up and down.

To move the profile up and down, you need to use the CSS animation property.

Copy
selector {
  animation: animationName duration;
}

Here, selector specifies the element you want to apply the animation to.

animationName stands for the name of the predefined animation, and duration indicates how long the animation will run.

Animations in CSS are defined using the @keyframes keyword.

The @keyframes rule specifies the keyframes of your animation.

For example, here is the code to define an animation named myAnimation.

Copy
@keyframes myAnimation {
  0% {
    /* Starting style of the animation */
    transform: translateY(0); /* Apply translateY(0) at the start */
  }
  50% {
    /* Intermediate style of the animation */
    transform: translateY(-20px); /* At 50%, apply translateY(-20px), moving up 20px */
  }
  100% {
    /* Final style of the animation */
    transform: translateY(0); /* At 100%, apply translateY(0), returning to original position */
  }
}

To set an element with the class box to play the myAnimation animation for 2 seconds, write the CSS code as follows.

Copy
.box {
  animation: myAnimation 2s;
}

By using the code above, an element with the box class will play the myAnimation animation for 2 seconds.

The animation property in CSS is used to smoothly move or transform elements, adding dynamic effects to your webpage.