Activate CSS effect on page load

Issue

So this is the code that I am trying to use:

<div style="text-align: center;"><i class="fas fa-phone fa-5x"></i></div>

<script>
  $(window).load(function(){
    $('.fa-phone').addClass('hvr-buzz');
});
</script>

I guess the problem stems from the fact that this effect is triggered on hover, by default, because I am using Hover.CSS ( https://ianlunn.github.io/Hover/ ).

My goal is to make this effect run infinitely when the page loads, without the user having to hover over it.

Any suggestions??

Solution

Add the styles below without :hover to your element in the CSS, no JS needed.

.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: 0.15s;
    animation-duration: 0.15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.hvr-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

Demo - https://codepen.io/bkdigital/pen/xxxEbZz

Answered By - BennKingy