CSS:如何在另一个动画运行时保持悬停过渡平滑

Question

我创建了一个按钮。此按钮由这些 CSS 属性定义:

#button {
    width: 50px;
    height: 50px;
    border: 3px solid #F1F2F0;
    text-align:center;
    background-color: #02BFC1;
    display: table;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    -webkit-transition: all 0.5s ease;
    cursor: pointer;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
    animation: blinker 2s ease infinite;
}

此按钮使用动画 blinker 闪烁，平滑地将 background-color 从深蓝色变为浅蓝色，定义如下:

@keyframes blinker {  
    50% { background-color: #03FCFF; }
}

它还有一个悬停动画:

#button:hover {
    background-color: #F37C2B;
    transform: scale(1.1);
    box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
    animation-name: none;
}

我的问题是:在我添加闪烁动画之前，悬停动画曾经是完全平滑的。现在，它只是立即将 background-color 更改为橙色，而 transform: scale(1.1) 仍然平滑地更改。

我怎样才能使悬停按钮暂停 blinker 动画并平滑地更改 background-color，并通过鼠标离开按钮恢复动画？如果可能的话，我想为此只使用 CSS，而不使用 js。

如果您愿意，可以修改此 JSFiddle做出回应。

编辑:这不仅仅适用于 chrome，我怎样才能做到这一点？

Answer 1

您的 CSS 中发生了太多事情。作为一般规则，如果您希望代码快速高效，请尝试尽可能简单。

这是你的工作代码和一些解释:

button {
  width: 50px;
  height: 50px;
  display: block;
  border: 3px solid #F1F2F0;
  background-color: #02BFC1;
  margin: 30px auto;
  cursor: pointer;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
  animation: 2s ease infinite blinker;
  transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}

@keyframes blinker {
  50% {
    background-color: #03FCFF;
  }
}

button:hover {
  background-color: #F37C2B;
  box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
  animation: none;
  transform: scale(1.1);
}

<button></button>

不要忘记使用元素所需的前缀。