悬停后鼠标移出时反转不透明度动画

Posted 2023-03-06

【中文标题】悬停后鼠标移出时反转不透明度动画

【英文标题】：Reverse opacity animation on mouse out after hover

【发布时间】：2017-08-07 18:30:55

【问题描述】：

我想知道是否可以在不使用 javascript 的情况下在鼠标悬停后反转关键帧动画（这是我正在处理的项目的要求）。我试过动画方向：交替；和动画方向：在原始 .molehill 选择器和 .molehill:hover > img 选择器上反转，没有任何运气。有关当前状态，请参阅 JSFiddle，但本质上，鼹鼠会在悬停时从鼹鼠丘中出来。当您移开鼠标时，他会消失，但我宁愿让动画反转，这样看起来他会慢慢回到。

html：

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

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

【参考方案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>

这只是例子

【讨论】：

谢谢 - 我知道 jQuery 在这里是最简单的解决方案，但是这个项目不允许任何 jQuery 或 JS。纯CSS可以吗？此外，这里的主要问题是使用 animation-direction:alternate 和 animation-direction:reverse 似乎不起作用，即使我增加了迭代次数。

我不确定，但这个链接可以帮助你***.com/questions/16516793/…