Question

为什么我不能使用动画：转发：悬停？动画有效，但命令“前锋没有。

问题：

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状态，你可以使用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;
  }
}

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

动画转发不适用于：悬停

1 个答案: