proper css transitions

proper_css_transitions

<style>
.tran {
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
#good:hover {
  color: green;
}
#bad:hover {
  color: red;
}
</style>

<script>
$("#bad").hover(function() {
  $(this).addClass('tran');
  $(this).delay(400).animate({width:'100%'}, 'slow', function(){
    $(this).removeClass('tran');
  });
});
</script>

<h2 #good>Good</h2>
<h2 #bad>Bad</h2>