时间戳

首页 > 解决方案 > 在 chrome 中，我选择的 CSS 动画不再起作用，除非边框被覆盖

css - 在 chrome 中，我选择的 CSS 动画不再起作用，除非边框被覆盖

问题描述

这似乎是从 Chrome 83 版本开始发生的事情。

在这个 JSFiddle 中，当页面首次加载时，选择的背景应该从红色变为白色。但是，由于某种原因，我发现这仅在覆盖边框属性时才有效（取消注释 CSS 中的该行以查看此操作）。

https://jsfiddle.net/nqfdx9ug/

HTML：

<select class="highlight-and-fade">
    <option>---Select---</option>
    <option>hi</option>
    <option>hello</option>
</select>

CSS：

select {
  width: 120px;
  
  /* Uncomment below to fix the animation */
  /* border: 1px solid black; */
}
        
.highlight-and-fade {
  animation: highlightAndFade 3s linear;
}

@keyframes highlightAndFade {
  0% {
    background-color: red;
  }
  100% {
    background-color: white;
  }
}

任何人都知道发生了什么变化以及为什么发生了变化，或者是否有更简单的解决方法？Firefox 对我来说没有这个问题，Chrome 版本 81 也没有。谢谢！

标签： cssgoogle-chrome

解决方案

Google Chrome - 版本 84.0.4147.105（官方版本）（64 位）这对我来说很好，没有边框解决方法。也许您的浏览器正在存储缓存，这就是它无法正确显示的原因（这是清除缓存的方法）

推荐阅读