3

I'm wondering if it is possible to reverse a keyframes animation on mouse out after hover without using JavaScript (that's a requirement for a project I'm working on). I have tried animation-direction: alternate; and animation-direction: reverse on the original .molehill selector and on the .molehill:hover > img selector without any luck. See JSFiddle for current status, but essentially the mole is animated to come out of the molehill on hover. When you remove the mouse, he disappears, but I would rather have the animation reverse so it looks like he's slowly going back in.

HTML:

<div class="molehill">
    <div>
        <img id="m1" src="http://uf.heatherlaude.com/img_directory/molehill-1.png" alt="mole">
    </div>

    <img id="m2" src="http://uf.heatherlaude.com/img_directory/molehill-2.png" alt="mole">
    <img id="m3" src="http://uf.heatherlaude.com/img_directory/molehill-3.png" alt="mole">
    <img id="m4" src="http://uf.heatherlaude.com/img_directory/molehill-4.png" alt="mole">
    <img id="m5" src="http://uf.heatherlaude.com/img_directory/molehill-5.png" alt="mole">
    <img id="m6" src="http://uf.heatherlaude.com/img_directory/molehill-6.png" alt="mole">
    <img id="m7" src="http://uf.heatherlaude.com/img_directory/molehill-7.png" alt="mole">
    <img id="m8" src="http://uf.heatherlaude.com/img_directory/molehill-8.png" alt="mole">
</div>

CSS:

.molehill {
    width: 359px;
    height:250px;
    position: relative;
}

.molehill > img {
    transition: 1s;
}

#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8 {
    position: absolute;
    width: 100%
    height: 100%;

}

#m2, #m3, #m4, #m5, #m6, #m7, #m8 {
    opacity: 0;
}


.molehill:hover > img {
    animation-name: molehill_test;
    -webkit-animation-name: molehill_test;
    animation-duration: 3.25s;
    -webkit-animation-duration: 3.25s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

#m2 {
    animation-delay:.25s;
    -webkit-animation-delay:.25s
}
#m3 {
    animation-delay:.75s;
    -webkit-animation-delay:.75s
}
#m4 {
    animation-delay:1.25s;
    -webkit-animation-delay:1.25s
}

#m5 {
    animation-delay:1.75s;
    -webkit-animation-delay:1.75s
}
#m6 {
    animation-delay:2.25s;
    -webkit-animation-delay:2.25s
}
#m7 {
    animation-delay:2.75s;
    -webkit-animation-delay:2.75s
}

#m8 {
    animation-delay:3.25s;
    -webkit-animation-delay:3.25s
}


@keyframes molehill_test {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}


@-webkit-keyframes molehill_test {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

Full code on JSFiddle:
https://jsfiddle.net/qmgy4133/

Heather
  • 31
  • 3

1 Answers1

0

it's possible with the help of jquery

$('#trigger').on({
  mouseenter: function() {
    $('#item').show();
    $('#item').addClass('flipped');
  },
  mouseleave: function() {
    $('#item').removeClass('flipped');
  }
});
#trigger {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  background: teal;
  color: white;
  font-family: sans-serif;
}

#item {
  position: relative;
  height: 100px;
  width: 100px;
  background: red;
  display: none;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  animation: flipperUp 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation: flipperUp 0.7s;
  -webkit-animation-fill-mode: forwards;
}

#item.flipped {
  animation: flipper 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation: flipper 0.7s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes flipper {
  0% {
    transform: perspective(350px) rotateX(-90deg);
  }
  33% {
    transform: perspective(350px) rotateX(0deg);
  }
  66% {
    transform: perspective(350px) rotateX(10deg);
  }
  100% {
    transform: perspective(350px) rotateX(0deg);
  }
}

@-webkit-keyframes flipper {
  0% {
    -webkit-transform: perspective(350px) rotateX(-90deg);
  }
  33% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
  66% {
    -webkit-transform: perspective(350px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
}

@keyframes flipperUp {
  0% {
    transform: perspective(350px) rotateX(0deg);
  }
  33% {
    transform: perspective(350px) rotateX(10deg);
  }
  66% {
    transform: perspective(350px) rotateX(0deg);
  }
  100% {
    transform: perspective(350px) rotateX(-90deg);
  }
}

@-webkit-keyframes flipperUp {
  0% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
  33% {
    -webkit-transform: perspective(350px) rotateX(10deg);
  }
  66% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
  100% {
    -webkit-transform: perspective(350px) rotateX(-90deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

this is only example

ani_css
  • 2,118
  • 3
  • 30
  • 73
  • Thank you - i know jQuery is the easy solution here, but this project doesn't allow any jQuery or JS. Is it possible with pure CSS? Also, the main issue here is that using animation-direction:alternate and animation-direction:reverse don't seem to be working, even when I increase iterations. – Heather Mar 16 '17 at 14:18
  • I'm not sure but this link can be help you http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover – ani_css Mar 16 '17 at 14:30