Javascript CSS-在关键帧中触发悬停

我想让图像像心脏一样跳动。图像跳动3秒后，图像自动翻转1秒，然后图像再次跳动，动作无限。我可以使图像跳动，但仍然不能使它在1秒后自动翻转

这是我的html代码

<div class=center>
    <div class="flip">
        <div class="flip-child">

            <div class="front">
                <img src="<?php ABSPATH; ?>/wordpress/logo/logo.png" alt="front" />
            </div>

            <div class="back">
                <a href="<?php ABSPATH; ?>/wordpress/menu.html"> <img src="<?php ABSPATH; ?>/wordpress/logo/back.png" alt="back" /> </a>
            </div>

        </div>
    </div>
</div>

---

添加以下javascript代码

var flip = document.querySelector('.flip');
var state = 0;
setInterval(function() {
    state = (state + 1) % 4;
  if(state == 0)
        flip.classList.remove('hover')
  else if(state == 3)
        flip.classList.add('hover')
}, 1000)

如果您使用jquery，请将其封装在

$(function() {
    ... code goes here
});

document.addEventListener('DOMContentLoaded', function() {
    ... code goes here
});

如果不使用jquery（kudos），那么请确保javscript位于“.flip”元素下面，或者将其包装在

$(function() {
    ... code goes here
});

document.addEventListener('DOMContentLoaded', function() {
    ... code goes here
});

---

工作

是你要找的吗？我错了，我的意思是在图像翻转1秒后3秒，可以吗？所以你使用javascript？不能使用css吗，先生？可能会使用css，我只是想知道这是不是你想要的那种效果（好的，这是1秒-1秒，而不是3秒-1秒，但这是它的要点）耶，这就是我想要的。我很困惑，如果3秒，那么只有1秒。在js脚本中，set 2的1时间间隔act是一个仅css版本-当鼠标悬停时，它保持翻转，唯一的错误是鼠标离开时没有平滑的动画。您知道为什么在我的本地主机中，光标进入时图像不会翻转吗？我使用xampp-抱歉我的错误，仍然有垃圾代码。谢谢：）