Utilizing Animations

animation-direction determines the playback direction of an animation.

It allows you to control whether an HTML element spins in one direction like a windmill or oscillates back and forth.

Copy
div {
  animation-direction: alternate; /* Repeats the animation back and forth */
  animation-iteration-count: infinite; /* Repeats the animation indefinitely */
}

alternate plays the animation once and then also in reverse direction.

infinite repeats the animation endlessly.

:hover defines styles when a mouse is hovering over an element.

By combining this with animation, you can create a dynamic web page that reacts to user actions.

Copy
.animated-div:hover {
  /* Changes background color to red when hovered */
  background-color: red;
  /* Bounce effect when hovered */
  animation-name: bounce;
  /* Lasts for 1 second */
  animation-duration: 1s;
  /* Slightly enlarges when hovered */
  transform: scale(1.05);
  /* Changes cursor to pointer when hovered */
  cursor: pointer;
}

This way, the animation starts only when the user hovers the mouse over the div.