html - 动画转发不适用于 :hover

Question

为什么我不能在 :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;
    }
}

Answer 1

我不太确定你想要实现什么，但如果你希望封面保持在它的状态，即使它不再处于 :hover 状态，你可以使用 动画播放状态 属性。

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

<div class="notebook-cover"></div>