CSS - Trigger hover in keyframes

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

my mistake, my mean is after 3seconds than image flipped for 1 sec, can i? So you use javascript? can't use css sir? — Anti Mafia
– Anti Mafia, Commented Mar 16, 2016 at 3:25
could possibly use css, was just wondering if that's the sort of effect you were looking for (ok, it's 1 second - 1 second rather than 3 seconds - 1 second, but that's the gist of it) — Jaromanda X
– Jaromanda X, Commented Mar 16, 2016 at 3:28
ya, that is what i'm looking for. And i'm confused if 3secs then just 1 sec. In js script just 1 time interval for set 2 act — Anti Mafia
– Anti Mafia, Commented Mar 16, 2016 at 3:32
Here is a css only version - when hovering it stays flipped, only thing wrong is no smooth animation when mouse leaves — Jaromanda X
– Jaromanda X, Commented Mar 16, 2016 at 3:37

Jaromanda X · Accepted Answer · 2016-03-16 04:02:09Z

2

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

answered Mar 16, 2016 at 4:02

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anti Mafia Over a year ago

Do you know why in my localhost the image doesn't flip when cursor enter? I use xampp - Sorry my mistake, still any trash code. Thank you :)

Collectives™ on Stack Overflow

CSS - Trigger hover in keyframes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related