Skip to main content
Practice

Utilizing Animations

animation-direction and animation-iteration-count​

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.

CSS Code Example:​

CSS
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.


Animations Interacting with Users​

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.

Example:​

CSS
.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.

Want to learn more?

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