如何在 CSS 中将所有动画设置为“取消动画”？
Posted
技术标签:
【中文标题】如何在 CSS 中将所有动画设置为“取消动画”？【英文标题】：How can I set all animations to "unanimate" as well in 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）
我尝试使用轮廓，但很快就放弃了，因为它只能用于所有方面。
悬停时，一切正常，但将鼠标移动到其他地方时，边框很快消失并且高度动画化。我怎样才能让它们都动画化？
【问题讨论】：
【参考方案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;
<div class="button-orange">Button</div>但是，您会注意到过渡 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%;
<div class="button-orange">Button</div>另一个可能的选择是保持相同的边框宽度并将边框从“纯”颜色动画到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;
<div class="button-orange">Button</div>还请注意，在您的初始示例（以及我的第一个 sn-p）中，height 属性实际上不是动画，因为您尝试从默认设置动画，即 auto，到一个特定的值，同样，它是不可动画的。如果要为height 设置动画，则需要在默认状态上设置一个值。它让你相信它正在工作，但事实上，它是 border-width 的动画，创造了元素高度正在改变的错觉。事实上，边框在改变width，而样式为none。
【讨论】：
关于伪元素的好主意，我自己不会想到它：D以上是关于如何在 CSS 中将所有动画设置为“取消动画”？的主要内容，如果未能解决你的问题，请参考以下文章
在 CSS3 或 jQuery 中将元素的宽度从 0% 设置为 100% 动画，它和它的包装器只需要它们需要的宽度，没有预先设置的宽度