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

Posted 2023-03-06

【中文标题】CSS：如何在另一个动画运行时保持悬停过渡平滑

【英文标题】：CSS: How to keep a hover transition smooth while another animation is running

【发布时间】：2016-12-22 19:18:27

【问题描述】：

我创建了一个按钮。此按钮由以下 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，我怎样才能让它如此呢？

【参考方案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>

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

【讨论】：

悬停不平滑的问题你还不解决？

@JocaPinto 您使用的是哪个浏览器？在 Firefox 48 中对我来说非常流畅。

你说得对，它在 Chrome 中运行不顺畅。这是一个错误，我没有找到任何 CSS 解决方案（除了改变你的效果），对不起。

一定有办法