CSS-在关键帧中触发悬停

Question

I want to make an image throbbing like a heart. After 3 secs image throbbing, image flipped automatically for 1 sec, and then image throbbing again, act infinitely. I can make image throbbing, but still can't make it flipped automatically after 1 sec.

This is my html code

<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>

This is css script

body { 
    background: #fff;   
} 
.center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flip {
  perspective:1000px;
}
.flip:hover .flip-child,
.flip.hover .flip-child {
  transform:rotateY(180deg);
}
.flip,.front,.back{
  width: 284px;
  height: 284px;
}
.flip-child {
  transition:.8s; /* flip */
  transform-style:preserve-3d;
  position:relative;
}
.front,
.back {
  backface-visibility:hidden;
  position:absolute;
  top:0;
  left:0;
}
.front {
  z-index:2;
  transform:rotateY(0deg);
}
.front img{
  animation: blink 1s infinite;
}

.back {
  transform:rotateY(180deg);
}

/* For Chrome, Safari, Opera  */
@-webkit-keyframes blink {

    0%   {width: 284px; height: 284px; margin: -0.5px 0 0 -0.5px;}
    20%  {width: 280px; height: 280px; margin: 0 0 0 0;}
    40%  {width: 276px; height: 276px; margin: 0.5px 0 0 0.5px;}
    60%  {width: 272px; height: 272px; margin: 1px 0 0 1px;}
    80%  {width: 276px; height: 276px; margin: 0.5px 0 0 0.5px;}
    100% {width: 280px; height: 280px; margin: 0 0 0 0;}
}

/* Standard Syntax */
@keyframes blink {

    0%   {width: 284px; height: 284px; margin: -0.5px 0 0 -0.5px;}
    20%  {width: 280px; height: 280px; margin: 0 0 0 0;}
    40%  {width: 276px; height: 276px; margin: 0.5px 0 0 0.5px;}
    60%  {width: 272px; height: 272px; margin: 1px 0 0 1px;}
    80%  {width: 276px; height: 276px; margin: 0.5px 0 0 0.5px;}
    100% {width: 280px; height: 280px; margin: 0 0 0 0;}
}

Answer 1

add the following javascript code

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)

If you use jquery, wrap it in

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

If not using jquery (kudos) then either make sure the javscript is BELOW the ".flip" element, or wrap it in

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

Working fiddle