Modular jQuery and CSS hover animation technique (animation once)

hover_animation

# Add the class 'hover' to whichever element you want to be able to trigger an animation on when it's hovered over.
# Add the class 'hover-child' to elements inside of the parent which you want to trigger an animation on at the same time.

ANIMATION.JS:
$( document ).ready( function() {
    $(".hover").on("mouseover", function() {
        $(this).addClass('hovered');
        $(this).find(".hover-child").addClass("hovered");
    });
});

ANIMATION.CSS:
@keyframes spin-element {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes quick-pop {
  0% {
    transform: scale(.8);
  }

  65% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

div.hovered {
  animation: quick-pop .2s ease-in-out;
}

i.hovered {
  animation: spin-element .2s ease-in-out;
}

ANIMATION.HTML:
<div class="row p-3 hover">
    <div class="col-4">
        <span class="fa-stack fa-5x">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="far fa-building fa-stack-1x hover-child"></i>
        </span>
    </div>
</div>

# This example makes the div pop and the icon inside of it spin the first time the div is hovered over.