Animate star ratings individually using CSS

Question

Animate star ratings individually using CSS

I am faced with the following HTML structure:

<div class="rating">
  <div class="star active"></div>
  <div class="star active"></div>
  <div class="star active"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

The generated output is as follows:

★★★☆☆

My query is regarding how to animate the active stars individually using CSS?

I attempted this method:

.star {
   transition: background-color 0.5s ease;
   background-color: #eee;
}

.star.active { 
   background-color: #000;
}

However, this approach causes all the active stars to change color simultaneously. How can I achieve a sequential transition for the active stars, moving from left to right?

I am seeking a solution that does not involve JavaScript. It should be noted that the rating system could have any number of stars, ranging from 3 to potentially an unlimited amount.

html css

Answer 1

Answer №1

Given that the active class is already in place, it would be more suitable to utilize animation instead of transition.

.star {
  background-color: #eee;
}

.star.active {
  animation: star-pop 0.5s ease forwards;
}

@keyframes star-pop {
   to {
      background-color: #000;
   }
}

Subsequently, distinct animation-delay values can be assigned based on the nth-child:

.star.active:nth-child(1) { 
   animation-delay: 0s;
}

.star.active:nth-child(2) { 
   animation-delay: 0.5s;
}

.star.active:nth-child(3) { 
   animation-delay: 1s;
}

.star.active:nth-child(4) { 
   animation-delay: 1.5s;
}

.star.active:nth-child(5) { 
   animation-delay: 2s;
}

/* ... */

If you are utilizing a css precompiler(such as sass), this can be achieved through a loop:

.star.active {
   // alter the number 5 to reflect the maximum stars possible(8, 10, etc.)
   @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
         animation-delay: #{($i - 1) * 0.5}s;
      }
   }
}

.star {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: solid 1px #000;
  background-color: #eee;
}

.star.active {
  animation: star-pop 0.5s ease forwards;
}


.star.active:nth-child(1) { 
   animation-delay: 0s;
}

.star.active:nth-child(2) { 
   animation-delay: 0.5s;
}

.star.active:nth-child(3) { 
   animation-delay: 1s;
}

.star.active:nth-child(4) { 
   animation-delay: 1.5s;
}

.star.active:nth-child(5) { 
   animation-delay: 2s;
}

@keyframes star-pop {
   to {
      background-color: #000;
   }
}

<div class="rating">
  <div class="star active"></div>
  <div class="star active"></div>
  <div class="star active"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

Answer 2

Given that the active class is already in place, it would be more suitable to utilize animation instead of transition.

.star {
  background-color: #eee;
}

.star.active {
  animation: star-pop 0.5s ease forwards;
}

@keyframes star-pop {
   to {
      background-color: #000;
   }
}

Subsequently, distinct animation-delay values can be assigned based on the nth-child:

.star.active:nth-child(1) { 
   animation-delay: 0s;
}

.star.active:nth-child(2) { 
   animation-delay: 0.5s;
}

.star.active:nth-child(3) { 
   animation-delay: 1s;
}

.star.active:nth-child(4) { 
   animation-delay: 1.5s;
}

.star.active:nth-child(5) { 
   animation-delay: 2s;
}

/* ... */

If you are utilizing a css precompiler(such as sass), this can be achieved through a loop:

.star.active {
   // alter the number 5 to reflect the maximum stars possible(8, 10, etc.)
   @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
         animation-delay: #{($i - 1) * 0.5}s;
      }
   }
}

.star {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: solid 1px #000;
  background-color: #eee;
}

.star.active {
  animation: star-pop 0.5s ease forwards;
}


.star.active:nth-child(1) { 
   animation-delay: 0s;
}

.star.active:nth-child(2) { 
   animation-delay: 0.5s;
}

.star.active:nth-child(3) { 
   animation-delay: 1s;
}

.star.active:nth-child(4) { 
   animation-delay: 1.5s;
}

.star.active:nth-child(5) { 
   animation-delay: 2s;
}

@keyframes star-pop {
   to {
      background-color: #000;
   }
}

<div class="rating">
  <div class="star active"></div>
  <div class="star active"></div>
  <div class="star active"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

Animate star ratings individually using CSS

Answer №1

Similar questions

My website includes a <div> section that features both an image and a <figcaption>. However, when I attempt to apply padding to the <figcaption>, it does not seem to take effect

Title element in CSS adjusts in width but is not full width

CSS code to create a single content bar flanked by two sidebars

Stop iPad mobile Safari from truncating content with CSS

What are the disadvantages of not incorporating the main CSS file directly into the web page?

Using AngularJS filter to refine results based on specific values within JSON data

OrbiterControls malfunctioning in a three.js application

Unable to display scrollbar when generating dynamic content with jquery ajax

Enhancing Plotly Graphs with Custom Node Values

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Rotational transformation in CSS not displaying in Webkit / iPhone browsers, yet functioning properly in Chrome Devtools device toolbar

Creating a horizontal navigation bar using localscroll.js in your website is a great way

Encountering issues when attempting to retrieve localized images within .vue files using a custom webpack configuration

Preserve the scrollbar location when the page is refreshed

What is the best way to refresh a webpage in Vue.js following a specific event or a button click?

Adjust text to fit within div as browser is resized

How can I align the kendoMenu in the center when the menu width is unpredictable?

Animate the jQuery menu to slide both upwards and downwards, as well as shift the inner divs to the right

I am attempting to extract data from a JSON object and showcase it in an HTML format using AngularJS

Ways to conceal an HTML element using CSS