鼠标悬停后反转不透明动画

Question

我想知道是否有可能在不使用JavaScript的情况下，在鼠标悬停后反转鼠标的关键帧动画(这是我正在研究的项目的要求)。我已经在原始的.molehill选择器和.molehill:hover > img选择器上尝试了动画方向:alternate和动画方向: reverse，但都没有成功。有关当前状态的信息，请参见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>

​

这只是一个例子