html - 悬停后鼠标移开时反转不透明度动画

Question

我想知道是否可以在不使用 JavaScript 的情况下在鼠标悬停后反转关键帧动画(这是我正在从事的元素的要求)。我试过 animation-direction: alternate;和动画方向:在原始 .molehill 选择器和 .molehill:hover > img 选择器上反转，没有任何运气。有关当前状态，请参阅 JSFiddle，但本质上，鼹鼠动画是在悬停时从鼹鼠丘中出来。当你移开鼠标时，他就消失了，但我宁愿让动画倒过来，这样看起来他正慢慢地回到里面。

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

JSFiddle 上的完整代码:
https://jsfiddle.net/qmgy4133/

Answer 1

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

这只是例子