Skip to main content
Practice

animation-advanced

---
id: animation-advanced
title: Utilizing Animations
description: Learn various effects of CSS animations and create interactive animations
tags:
  - CSS
  - Animation
  - Utilization
sidebar_position: 10
isPublic: false
---

# Utilizing Animations

## animation-direction and animation-iteration-count

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

```css title="CSS Code Example"
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.


Combining :hover with Animation​

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

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

Want to learn more?

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