Reverse opacity animation on mouse out after hover - html

Question

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/

Answer 1

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