css animation transition loop test

by Laurens Maneschijn

HTML

<div class="container_outer">
  css transition only:
  <div class="container_inner">
    <span class="heart">&hearts;</span>
  </div>
</div>
<div class="container_outer">
  css transition with js for loop:
  <div class="container_inner">
    <span class="heart3">&hearts;</span>
    <span class="heart3">&hearts;</span>
    <span class="heart3">&hearts;</span>
  </div>
</div>
<div class="container_outer">
  css animation for loop:
  <div class="container_inner">
    <span class="heart2 heartloop">&hearts;</span>
  </div>
</div>

CSS

.heart,.heart3{
  display:inline-block;
  color: #ff0000;
  font-size: 40px;
  margin-top:4px;
/*
  transition:
    color      0.2s ease,
    font-size  0.2s ease,
    margin-top 0.2s ease;
*/
  transition-property: color,font-size,margin-top;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

.heart:hover, .heart3.hover{
  color: #ff8080;
  font-size: 50px;
  margin-top:0px;
}

.heart2{
  position:relative;
  top:0;
}

@keyframes heartloop {
  from {
    color: #ff0000;
    font-size: 40px;
    top:0px;
  }

  to {
    color: #ff8080;
    font-size: 50px;
    top:-4px;
  }
}

.heartloop {
  animation-name: heartloop;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}




.container_outer{
  display:block;
  width:100%;
}
.container_inner{
  margin: 10px auto 10px auto;
  text-align:center;
}

JavaScript

/*
also see:
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
  https://css-tricks.com/almanac/properties/t/transition/
  https://www.kirupa.com/html5/looping_a_css_transition.htm
  https://www.kirupa.com/html5/the_transitionend_event.htm
*/

// on mouseout start a loop:
$(document).on('mouseout','.heart3',function(e){
	$(this).removeClass('hover');
  $(this).unbind('transitionend');
});
$(document).on('mouseover','.heart3',function(e){
	$(this).addClass('hover');
  $(this).unbind('transitionend');
  $(this).bind('transitionend',function(e){
//  console.log(e.originalEvent.propertyName);
    if(e.originalEvent.propertyName == "color"){	// only trigger for one of the changed properties
      $this=$(this);
      if(!$this.hasClass('hover')){
        $this.addClass('hover');
      }else{
        $this.removeClass('hover');
      }
    }
  });
});