动画转发不适用于：悬停
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画转发不适用于：悬停相关的知识，希望对你有一定的参考价值。
为什么我不能使用动画：转发：悬停？动画有效，但命令“前锋没有。
问题：
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;
}
}
答案
我不太确定你想要实现什么，但是如果你想让封面保持其状态，即使它不再在: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>以上是关于动画转发不适用于：悬停的主要内容，如果未能解决你的问题，请参考以下文章
jQuery背景按钮动画适用于Chrome和IE8，但不适用于Firefox或IE9 [重复]