I'm looking to create an image effect that pulsates like a heartbeat. The idea is for the image to pulse for 3 seconds, then automatically flip for 1 second before resuming the pulsating effect indefinitely. I've managed to make the image pulse, but I'm struggling to get it to automatically flip after 1 second.
Here 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 the CSS style applied:
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);
}
/* Animation Keyframes - Blink Effect */
@-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;}
}