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来回应。

编辑：这不适用于铬，我怎么能这样做呢？

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>

不要忘记使用需要为您的项目前缀。