如何在 CSS 中将所有动画设置为“取消动画”？答案

【问题标题】：How can I set all animations to "unanimate" as well in CSS?如何在 CSS 中将所有动画设置为“取消动画”？
【发布时间】：2018-01-05 15:19:36
【问题描述】：

我有一个网页，我正在尝试使用 CSS 动画制作其菜单：

<html>
<body>
    <div class="orange-button">
    </div>
</body>
</html>

这是我链接的 CSS 文件：

.button-orange {
    border: none;
    transition: background 0.4s, border 0.4s, height 0.4s;
    background: orange;
}

.button-orange:hover {
    border-bottom: 3px solid blue;
    border-top: 3px solid rgba(0, 0, 0, 0);
    background: green;
    height: 94px;
}

div为100x100px，上边框只需要保持文字居中即可（否则向上1.5px）

我尝试使用轮廓，但很快就放弃了，因为它只能用于所有方面。

悬停时，一切正常，但将鼠标移动到其他地方时，边框很快消失并且高度动画化。我怎样才能让它们都动画化？

【问题讨论】：

标签： html css animation hover

【解决方案1】：

border 属性是一种简写形式，可以更改多个属性。通过应用border: none，您将border-style 从solid 更改为none，它不能被转换（不是动画的）。

为了转换border-width，您需要在这两种状态下保持border-style:solid，并且只更改border-width：

.button-orange {
    border: 0 solid;
    border-color: transparent transparent blue;
    transition: background 0.4s, border-width 0.4s, height 0.4s;
    background: orange;
}

.button-orange:hover {
    border-bottom: 3px solid blue;
    border-top: 3px solid rgba(0, 0, 0, 0);
    background: green;
    height: 94px;
}

 &lt;div class="button-orange"&gt;Button&lt;/div&gt;

但是，您会注意到过渡 border-width 并不是很好看，主要是因为主流浏览器对边框的子像素值应用了抗锯齿，并且过渡看起来并不平滑。

“类边框”效果最常用且最引人注目的效果是添加一个附加元素（通常是充当“活动”边框的伪元素），从0 动画到整个元素宽度，在 X 轴上。

例如：

.button-orange {
    transition: background-color 0.4s, height 0.4s;
    background: orange;
    position: relative;
    height: 18px;
}
.button-orange:hover {
    background-color: green;
    height: 94px;
}
.button-orange:after {
  content: '';
  height: 3px;
  width: 0;
  bottom: -3px;
  left: 50%;
  background-color: blue;
  position: absolute;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  transform: translateX(-50%)
}

.button-orange:hover:after {
  width: 100%;
}

&lt;div class="button-orange"&gt;Button&lt;/div&gt;

（在改变宽度的同时不移动伪时看起来更好 - 在我们的例子中，可以放置在元素的顶部而不是底部）。

另一个可能的选择是保持相同的边框宽度并将边框从“纯”颜色动画到transparent，同时保持border-width 不变。由于border-width的不同，它看起来更平滑，并且防止元素“跳跃”。

例如：

.button-orange {
    border: 3px solid transparent;
    transition: background 0.4s, border-color 0.4s, height 0.4s;
    background: orange;
    height: 18px;
}

.button-orange:hover {
    border-bottom-color: blue;
    background: green;
    height: 94px;
}

&lt;div class="button-orange"&gt;Button&lt;/div&gt;

还请注意，在您的初始示例（以及我的第一个 sn-p）中，height 属性实际上不是动画，因为您尝试从默认设置动画，即 auto，到一个特定的值，同样，它是不可动画的。如果要为height 设置动画，则需要在默认状态上设置一个值。它让你相信它正在工作，但事实上，它是 border-width 的动画，创造了元素高度正在改变的错觉。事实上，边框在改变width，而样式为none。

【讨论】：

关于伪元素的好主意，我自己不会想到它：D