动画转发不适用于 :hover

【问题标题】：animation forwards doesn't works on :hover动画转发不适用于 :hover
【发布时间】：2018-03-06 05:56:48
【问题描述】：

为什么我不能使用动画：在 :hover 上前进？动画有效，但命令“forwards”无效。

问题：

HTML：

<img src="images/notebook_desk.svg" class="notebook-cover">

CSS：

.notebook-cover{
max-width: 100%;
width: 100%;
height: auto;
display: block;
grid-column: 4;
margin-left: -40px;
transform-style: preserve-3d;
transform-origin: 0 50%;
transform: perspective(2000px);
z-index: 2;
}
.notebook-cover:hover{
    animation: CoverBook 2s forwards
}
@keyframes CoverBook{    
    to{
        transform: rotateY(180deg);
        z-index: 4;
    }
}

【问题讨论】：

它只在悬停时...你认为它会让你不悬停吗？

标签： html css animation transform

【解决方案1】：

我不太确定您想要实现什么，但如果您希望封面保持其状态，即使它不再处于 :hover 状态，您可以使用 animation-play-state 属性。

.notebook-cover {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  grid-column: 4;
  margin-left: -40px;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: perspective(2000px);
  z-index: 2;
  background: red;
  width: 500px;
  height: 500px;
  animation: CoverBook 2s forwards paused;
}

.notebook-cover:hover {
  animation-play-state: running;
}

@keyframes CoverBook {
  to {
    transform: rotateY(180deg);
    z-index: 4;
  }
}

&lt;div class="notebook-cover"&gt;&lt;/div&gt;

【讨论】：

我喜欢这个......让我们拭目以待，看看这是否是 OP 真正想要的 :)