Utilizing Animations

animation-direction defines the direction in which an animation is played. You can make an HTML element move like a windmill in one direction or make it oscillate back and forth.

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

alternate means the animation plays forwards and then backwards. infinite makes the animation loop indefinitely.

Combining :hover with Animations

:hover defines styles when the mouse is over an element. By combining this with animations, you can create dynamic web pages that respond to user actions.

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

This ensures that the animation starts only when the user hovers over the div.