<h1>Ratings Widget</h1>
<form class="rating-widget">
  <input type="checkbox" class="star-input" id="1"/>
  <label class="star-input-label" for="1">1
    <i class="fa fa-star"></i>
    <i class="fa fa-star orange"></i>
  </label>
  <input type="checkbox" class="star-input" id="2"/>
  <label class="star-input-label" for="2">2
    <i class="fa fa-star"></i>
    <i class="fa fa-star orange"></i>
  </label>
  <input type="checkbox" class="star-input" id="3"/>
  <label class="star-input-label" for="3">3
    <i class="fa fa-star"></i>
    <i class="fa fa-star orange"></i>
  </label>
  <input type="checkbox" class="star-input" id="4"/>
  <label class="star-input-label" for="4">4
    <i class="fa fa-star"></i>
    <i class="fa fa-star orange"></i>
  </label>
  <input type="checkbox" class="star-input" id="5"/>
  <label class="star-input-label" for="5">5
    <i class="fa fa-star"></i>
    <i class="fa fa-star orange"></i>
  </label>
  
</form>
* {
  transition:.25s ease-in-out;
  box-sizing:border-box;
}

h1 {
  text-align:center;
  padding:100px 0 50px 0;
  font-family:helvetica neue,helvetica,arial,sans-serif;
  font-weight:100;
  font-size:50px;
  line-height:50px;
}

.rating-widget {
  max-width:500px;
  text-align:center;
  margin:0px auto;
  .star-input {
    width:0;
    height:0;
    position:absolute;
    left:-5000px;
    &:checked {
      + .star-input-label {
        .orange {
          animation:enlarge .5s ease-in-out forwards;
        }
        &:nth-of-type(2){
          .orange {
            animation-delay:.1s;
          }
        }
        &:nth-of-type(3){
          .orange {
            animation-delay:.2s;
          }
        }
        &:nth-of-type(4){
          .orange {
            animation-delay:.3s;
          }
        }
        &:nth-of-type(5){
          .orange {
            animation-delay:.4s;
          }
        }
      }
    }
  }
  .star-input-label {
    display:inline-block;
    padding:8px 2px;
    text-indent:-5000px;
    line-height:0;
    color:#dcdcdc;
    position:relative;
    cursor:pointer;
    &:hover,&.hovered {
      color:#a7a7a7;
    }
    i {
      display:block;
      font-size:20px;
      line-height:20px;
      text-indent:0;
      &.orange {
        position:absolute;
        display:block;
        padding:8px 2px;
        top:0;
        left:0;
        text-align:center;
        width:100%;
        color:orange;
        transform:scale(0);
      }
    }
  }
}

@keyframes enlarge {
  0% {
    transform:scale(0);
  }
  70% {
    transform:scale(1.25);
  }
  100% {
    transform:scale(1);
  }
}
View Compiled
$('.star-input').click(function() {
  $(this).parent()[0].reset();
  var prevStars = $(this).prevAll();
  var nextStars = $(this).nextAll();
  prevStars.attr('checked',true);
  nextStars.attr('checked',false);
  $(this).attr('checked',true);
});

$('.star-input-label').on('mouseover',function() {
  var prevStars = $(this).prevAll();
  prevStars.addClass('hovered');
});
$('.star-input-label').on('mouseout',function(){
  var prevStars = $(this).prevAll();
  prevStars.removeClass('hovered');
})
Run Pen

External CSS

  1. //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js