CodePen Embed - Star Rating Animation

<div class="rating" data-vote="0">

  <div class="star hidden">
    <span class="full"data-value="0"></span>
    <span class="half"data-value="0"></span>
  </div>

  <div class="star">

    <span class="full" data-value="1"></span>
    <span class="half" data-value="0.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="2"></span>
    <span class="half" data-value="1.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="3"></span>
    <span class="half" data-value="2.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="4"></span>
    <span class="half" data-value="3.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="5"></span>
    <span class="half" data-value="4.5"></span>
    <span class="selected"></span>

  </div>

  <div class="score">
    <span class="score-rating js-score">0</span>
    <span>/</span>
    <span class="total">5</span>
  </div>
</div>
    
  <div class="rating" data-vote="0">

  <div class="star hidden">
    <span class="full"data-value="0"></span>
    <span class="half"data-value="0"></span>
  </div>

  <div class="star">

    <span class="full" data-value="1"></span>
    <span class="half" data-value="0.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="2"></span>
    <span class="half" data-value="1.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="3"></span>
    <span class="half" data-value="2.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="4"></span>
    <span class="half" data-value="3.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="5"></span>
    <span class="half" data-value="4.5"></span>
    <span class="selected"></span>

  </div>

  <div class="score">
    <span class="score-rating js-score">0</span>
    <span>/</span>
    <span class="total">5</span>
  </div>
</div>

<div class="rating"  data-vote="0" >

  <div class="star hidden">
    <span class="full"data-value="0"></span>
    <span class="half"data-value="0"></span>
  </div>

  <div class="star">

    <span class="full" data-value="1"></span>
    <span class="half" data-value="0.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="2"></span>
    <span class="half" data-value="1.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="3"></span>
    <span class="half" data-value="2.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="4"></span>
    <span class="half" data-value="3.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="5"></span>
    <span class="half" data-value="4.5"></span>
    <span class="selected"></span>

  </div>

  <div class="score">
    <span class="score-rating js-score">0</span>
    <span>/</span>
    <span class="total">5</span>
  </div>
</div>
    
  <div class="rating"  data-vote="0">

  <div class="star hidden">
    <span class="full"data-value="0"></span>
    <span class="half"data-value="0"></span>
  </div>

  <div class="star">

    <span class="full" data-value="1"></span>
    <span class="half" data-value="0.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="2"></span>
    <span class="half" data-value="1.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="3"></span>
    <span class="half" data-value="2.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="4"></span>
    <span class="half" data-value="3.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="5"></span>
    <span class="half" data-value="4.5"></span>
    <span class="selected"></span>

  </div>

  <div class="score">
    <span class="score-rating js-score">0</span>
    <span>/</span>
    <span class="total">5</span>
  </div>
</div>
    
  <div class="rating"  data-vote="0">

  <div class="star hidden">
    <span class="full"data-value="0"></span>
    <span class="half"data-value="0"></span>
  </div>

  <div class="star">

    <span class="full" data-value="1"></span>
    <span class="half" data-value="0.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="2"></span>
    <span class="half" data-value="1.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="3"></span>
    <span class="half" data-value="2.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="4"></span>
    <span class="half" data-value="3.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="5"></span>
    <span class="half" data-value="4.5"></span>
    <span class="selected"></span>

  </div>

  <div class="score">
    <span class="score-rating js-score">0</span>
    <span>/</span>
    <span class="total">5</span>
  </div>
</div>
    
  <div class="rating"  data-vote="0">

  <div class="star hidden">
    <span class="full"data-value="0"></span>
    <span class="half"data-value="0"></span>
  </div>

  <div class="star">

    <span class="full" data-value="1"></span>
    <span class="half" data-value="0.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="2"></span>
    <span class="half" data-value="1.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="3"></span>
    <span class="half" data-value="2.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="4"></span>
    <span class="half" data-value="3.5"></span>
    <span class="selected"></span>

  </div>

  <div class="star">

    <span class="full" data-value="5"></span>
    <span class="half" data-value="4.5"></span>
    <span class="selected"></span>

  </div>

  <div class="score">
    <span class="score-rating js-score">0</span>
    <span>/</span>
    <span class="total">5</span>
  </div>
</div>
  
<div class="average">
  <span class="text">Your average score is</span><div class=" score-average js-average"></div>
</div>

body {
  background-color: lightblue;
}

.rating {
  text-align: center;
  margin-top: 120px;
  position: relative;
  width: 50%;
  float: left;
}

.hidden {
  opacity: 0;
}

.star {
  display: inline-block;
  margin: 5px;
  font-size: 30px;
  color: whitesmoke;
  position: relative;

  
  &.animate {
     -webkit-animation: stretch-bounce .5s ease-in-out;
  }
  
  &.hidden {
    opacity: 0;
  }
}

.full {
  &:before {
    font-family: fontAwesome;
    display: inline-block;
    content: "\f005";
    position: relative;
    float: right;
    z-index: 2;
  }
}

.half {
  &:before {
     font-family: fontAwesome;
     content: "\f089";
     position: absolute;
     float: left;
    z-index: 3;
  }
}

.star-colour {
  color: #ffd700;
}


  
@-webkit-keyframes stretch-bounce {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(0.9);
  }
  75% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.selected {
  &:before {
    font-family: fontAwesome;
    display: inline-block;
    content: "\f005";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scale(1);
    opacity: 1;
    z-index: 1;
  }
  
  &.pulse {
    &:before {
      -webkit-transform: scale(3);
      opacity: 0;
    }
  }
  
  &.is-animated {
    &:before {
       transition: 1s ease-out;
    }
  }
}

.score {
  font-family: arial;
  font-size: 20px;
  color: green;
  margin-top: 20px;
  margin-left: 50px;
}

.score-rating {
  vertical-align: sup;
  top: -5px;
  position: relative;
  font-size: 150%;
}

.total {
  vertical-align: sub;
  top: 0px;
  position: relative;
  font-size: 100%;
}

.average {
  font-family: arial;
  font-size: 20px;
  color: indianred;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  
  .score-average {
    padding-top: 30px;
  }
}

View Compiled

var starClicked = false;

$(function() {

  $('.star').click(function() {

    $(this).children('.selected').addClass('is-animated');
    $(this).children('.selected').addClass('pulse');

    var target = this;

    setTimeout(function() {
      $(target).children('.selected').removeClass('is-animated');
      $(target).children('.selected').removeClass('pulse');
    }, 1000);

    starClicked = true;
  })

  $('.half').click(function() {
    if (starClicked == true) {
      setHalfStarState(this)
    }
    $(this).closest('.rating').find('.js-score').text($(this).data('value'));

    $(this).closest('.rating').data('vote', $(this).data('value'));
    calculateAverage()
    console.log(parseInt($(this).data('value')));

  })

  $('.full').click(function() {
    if (starClicked == true) {
      setFullStarState(this)
    }
    $(this).closest('.rating').find('.js-score').text($(this).data('value'));

    $(this).find('js-average').text(parseInt($(this).data('value')));

    $(this).closest('.rating').data('vote', $(this).data('value'));
    calculateAverage()

    console.log(parseInt($(this).data('value')));
  })

  $('.half').hover(function() {
    if (starClicked == false) {
      setHalfStarState(this)
    }

  })

  $('.full').hover(function() {
    if (starClicked == false) {
      setFullStarState(this)
    }
  })

})

function updateStarState(target) {
  $(target).parent().prevAll().addClass('animate');
  $(target).parent().prevAll().children().addClass('star-colour');

  $(target).parent().nextAll().removeClass('animate');
  $(target).parent().nextAll().children().removeClass('star-colour');
}

function setHalfStarState(target) {
  $(target).addClass('star-colour');
  $(target).siblings('.full').removeClass('star-colour');
  updateStarState(target)
}

function setFullStarState(target) {
  $(target).addClass('star-colour');
  $(target).parent().addClass('animate');
  $(target).siblings('.half').addClass('star-colour');

  updateStarState(target)
}

function calculateAverage() {
  var average = 0

  $('.rating').each(function() {
    average += $(this).data('vote')
  })

  $('.js-average').text((average/ $('.rating').length).toFixed(1))
}

This Pen is owned by Roxy on CodePen.

See more by @roxy225 on CodePen

External CSS

https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css

External JavaScript

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