css - 在页面加载时激活 CSS 效果

Question

所以这是我尝试使用的代码:

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

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

我猜这个问题是因为这个效果是在悬停时触发的，默认情况下，因为我使用的是 Hover.CSS ( https://ianlunn.github.io/Hover/ )。

我的目标是让这种效果在页面加载时无限运行，而无需用户将鼠标悬停在它上面。

有什么建议吗？？

Answer 1

在 CSS 中添加不带 :hover 元素的样式，无需 JS。

.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);
}

演示 - https://codepen.io/bkdigital/pen/xxxEbZz