CSS动画禁用悬停过渡效果

Question

我创建了一个带有动画（更改形状）的类，用于单击将触发的按钮。在变形之后，我想要一个只改变颜色的悬停效果。每个都可以单独工作：.playBtn:hover 和 .pauseBtn:hover。

但是，当我同时添加它们时，动画似乎禁用了悬停效果（悬停效果不适用！）。有谁知道为什么会发生这种情况？

这是我的代码（主要是CSS，但也添加了HTML和JS以防万一）：

var bgMusic = document.getElementById("bgMusic"),
    musicBtn = document.getElementById("musicBtn"),
    music = false;

function toggleMusic() {
  if (music) {
    bgMusic.pause()
  } else {
    bgMusic.play();
  }
};

bgMusic.onplaying = function() {
  musicBtn.classList.remove("playBtn");
  musicBtn.classList.add("pauseBtn");
  music = true;
};

bgMusic.onpause = function() {
  musicBtn.classList.remove("pauseBtn");
  musicBtn.classList.add("playBtn");
  music = false;
};

#musicBtn {
  width: 0;
  height: 0;
  border-left: 16px solid grey;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-top: 3.5px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .4s;
  -moz-transition-duration: .4s;
  -ms-transition-duration: .4s;
  -o-transition-duration: .4s;
  transition-duration: .4s;
}

#musicBtn:hover {border-left: white 16px solid;}

.playBtn {animation: play-btn .6s ease forwards;}

@keyframes play-btn {
  from {
    transform: rotateZ(0);
    width: 5px;
    height: 15px;
    border-left: 5px solid white;
    border-top: 0 solid transparent;
    border-right: 5px solid white;
    border-bottom: 0 solid transparent;
  } to {
    transform: rotateZ(-360deg);
    width: 0;
    height: 0;
    border-left: 16px solid grey;
    border-top: 8px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 8px solid transparent;
  }
}

.playBtn:hover {border-left: 16px solid white;}  /*IT WON'T TAKE EFFECT!*/

.pauseBtn {animation: pause-btn .6s ease forwards;}

@keyframes pause-btn {
  from {
    transform: rotateZ(0deg);
    width: 0;
    height: 0;
    border-left: 16px solid grey;
    border-top: 8px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 8px solid transparent;
  } to {
    transform: rotateZ(360deg);
    width: 5px;
    height: 15px;
    border-left: 5px solid white;
    border-top: 0 solid transparent;
    border-right: 5px solid white;
    border-bottom: 0 solid transparent;
  }
}

.pauseBtn:hover {border-left: 5px solid grey; border-right: 5px solid grey;}  /*IT WON'T TAKE EFFECT!*/

<audio id="bgMusic" src="some music ...."></audio>
<div><div id="musicBtn" onclick="toggleMusic();"></div></div>

jsfiddle：https://jsfiddle.net/cf5abeoz/

Answer 1

从animation 中删除forwards 填充模式，:hover 样式将正常工作。

有关不同填充模式的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode。

Answer 2

当animation-fill-mode 属性设置为forwards 时，初始值将被
“在[动画]执行期间遇到的最后一个关键帧设置的计算值”覆盖 (MDN docs)。

我不完全确定这是否意味着 :hover 规则本身也会被覆盖，但无论哪种方式，尽管计算值与初始值相同，:hover 规则将不再适用于计算值。 Also see this answer.

因此，您最好的选择可能是从您的 animation 速记属性中删除 forwards。
当然，这会在您当前的代码中产生其他问题。为了解决这个问题，您需要为.playBtn 和.pauseBtn 的基本选择器设置与动画结尾相同的样式。
最后，为了防止#musicBtn（尤其是暂停按钮）设置的规则干扰，您需要在所有选择器前面加上#musicBtn。

因此，对于 播放按钮：（对于 暂停按钮也是如此）

.playBtn {animation: play-btn .6s ease forwards;}

变成

#musicBtn.playBtn {
  width: 0;
  height: 0;
  border-left: 16px solid grey;
  border-top: 8px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 8px solid transparent;
  animation: play-btn .6s ease;
}

基本上就是这样。在下面的实时 sn-p 中，我还更改了一些其他内容，您可以简单地忽略这些内容，或者查看您是否喜欢它们并将它们应用到您自己的代码中。它们不是您的代码运行所必需的。

document.getElementById("musicBtn").onclick = function() {
  if (this.classList.contains("pause")) {
    this.classList.replace("pause","play");
  } else {
    this.classList.replace("play","pause");
  }
};

body {background:black;}

#musicBtn {-webkit-transition-duration:.4s; -moz-transition-duration:.4s; -ms-transition-duration:.4s; -o-transition-duration:.4s; transition-duration:.4s;}

#musicBtn.play {animation:play-btn .6s ease; width:0; height:0; border-left:16px solid grey; border-top:8px solid transparent; border-right:0 solid transparent; border-bottom:8px solid transparent;}
#musicBtn.play:hover {border-left:16px solid white;}
@keyframes play-btn {
  from {transform:rotateZ(0deg); width:5px; height:15px; border-left:5px solid white; border-top:0 solid transparent; border-right:5px solid white; border-bottom:0 solid transparent;}
  to {transform:rotateZ(-360deg); width:0; height:0; border-left:16px solid white; border-top:8px solid transparent; border-right:0 solid transparent; border-bottom:8px solid transparent;}
}

#musicBtn.pause {animation:pause-btn .6s ease; width:5px; height:15px; border-left:5px solid grey; border-top:0 solid transparent; border-right:5px solid grey; border-bottom:0 solid transparent;}
#musicBtn.pause:hover {border-left:5px solid white; border-right:5px solid white;}
@keyframes pause-btn {
  from {transform:rotateZ(0deg); width:0; height:0; border-left:16px solid white; border-top:8px solid transparent; border-right:0 solid transparent; border-bottom:8px solid transparent;}
  to {transform:rotateZ(360deg); width:5px; height:15px; border-left:5px solid white; border-top:0 solid transparent; border-right:5px solid white; border-bottom:0 solid transparent;}
}

<div class="play" id="musicBtn"></div>

jsfiddle：https://jsfiddle.net/njkqpz9L/1/