如何使用css消除按钮上的动画闪烁？答案

【问题标题】：How to eliminate animation flicker on button using css?如何使用css消除按钮上的动画闪烁？
【发布时间】：2019-09-17 04:55:05
【问题描述】：

我创建了具有悬停效果的按钮。按钮从下到上用白色背景填充，文本改变颜色。但是，当动画发生时，底部会出现一条奇怪的线。任何帮助将不胜感激。

.project-button div {
    position: relative;
    display: inline-block;
    padding: 1rem;
    margin: 0 1rem 1rem 1rem;
    
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid white;
    border-radius: 15px;
    
    background-repeat: no-repeat;
    transition: background-size .5s, color .5s;
}

.to-top {
    background-position: 50% 100%;
    background-size: 100% 0%;
}

.project-button a {
    color: white;
}

.project-button div:hover {
    background-size: 100% 100%;
    background-image: linear-gradient(white, white);
}

.color-blue:hover {
    color: #51d0de;
}

/* Misc */
html {
  background: black;
  margin: 1em;
}

<div class="project-button">
    <a href="###"><div class="to-top color-blue">Visit Site</div></a>
</div>

【问题讨论】：

应该className 不是class？
我正在使用 React。忘了在原始评论中提到这一点。
以纯 HTML/CSS 运行时没有闪烁。你有实时链接吗？
我在chrome上，我可以通过堆栈溢出运行上面的代码sn-p，并在动画发生时看到按钮内部底部有一条黑线
在 Chrome 上也是如此。正在调查。

标签： html css

【解决方案1】：

尝试以下方法：

我认为问题与 Chrome 计算动画的方式有关。有时（取决于框架）白色背景有点太小，无法填充显示黑色背景的按钮（因此会闪烁）。

.project-button div {
  position: relative;
  display: inline-block;
  padding: 1rem;
  margin: 0 1rem 1rem 1rem;

  font-size: 1rem;
  font-weight: 700;
  border: 1px solid white;
  border-radius: 15px;

  background-image: linear-gradient(white, white);
  background-repeat: no-repeat;
  background-position: 0 -100%;
  background-size: 100% 200%;
  transition: background-position .5s, color .5s;
}

.project-button a {
  color: white;
}

.project-button div:hover {
  background-position: 0% 0%;
}

.color-blue:hover {
  color: #51d0de;
}

/* Misc */
html {
  background: black;
  margin: 1em;
}

<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div class="project-button">
      <a href="###"><div class="color-blue">Visit Site</div></a>
    </div>
  </body>
</html>

灵感来自Transition background-color via slide up animation

【讨论】：

太棒了！我仍然无法弄清楚你所做的与我的代码不同，因为它解决了问题！谢谢！
总是很开心！