CSS animation 禁用 hover 过渡效果

Question

我创建了一个 class 和一个 animation （更改形状），用于单击将触发的按钮。 变形后，我想要一个只改变颜色的 hover 效果。 每个单独工作正常： .playBtn:hover和.pauseBtn:hover 。

但是，当我添加它们时，动画似乎禁用了 hover 效果（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

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

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

Answer 2

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

我不完全确定这是否意味着:hover规则本身也会被覆盖，但无论哪种方式，尽管计算值与初始值相同，但:hover规则将不再适用于计算值。 另请参阅此答案。

因此，您最好的选择可能是从您的animation速记属性中删除forwards 。
当然，这会在您当前的代码中产生其他问题。 为了解决这个问题，您需要将与 animation 末尾相同的 styles 设置为.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;
}

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

 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/