CSS过渡边框瞬间恢复答案

【问题标题】：CSS Transition border reverting instantaneouslyCSS过渡边框瞬间恢复
【发布时间】：2017-02-05 01:28:20
【问题描述】：

为什么边框会瞬间消失，而不是像其他属性一样慢慢消失？

注意：在ie中边框是瞬间出现的，而不是2秒的延迟。

.figure {
	height: 160px;
	width: 160px;
	background-color: red;
	transition-property: all;
	transition-duration: 2s;
}

.figure:hover{
	background-color: blue;
	border: 10px solid pink;
	color: yellow;
}

&lt;div class='figure'&gt;Stackoverflow&lt;/div&gt;

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

initial value of the border-style property 是 none。

这意味着边框不会变回，因为当border-style 设置为none 时，根本不会显示边框。如果您将初始的border-style 属性值设置为solid 之类的值，那么它将按预期进行转换。

还值得指出的是，默认的border-width property 值为medium，默认的border-color property 值为currentColor（这基本上意味着它将是color 属性设置的任何值）。

.figure {
  height: 160px;
  width: 160px;
  background-color: red;
  border-style: solid;
  border-width: 0;
  transition-property: all;
  transition-duration: 2s;
}
.figure:hover {
  background-color: blue;
  border: 10px solid pink;
  color: yellow;
}

&lt;div class='figure'&gt;Stackoverflow&lt;/div&gt;

【讨论】：

哈！嗯，这是有道理的！谢谢！
更准确的解释是边框样式根本无法过渡。您甚至无法在实线和虚线之间转换。当然，过渡到或从任何 3d 外观的边框样式看起来都将是一个挑战，更不用说标准化了。
另见stackoverflow.com/questions/14385422/…，同样适用于大纲样式。

【解决方案2】：

您需要在class 和class:hover 中添加过渡属性

.figure {
    height: 160px;
    width: 160px;
    background-color: red;
    transition: all linear 2s;
    -webkit-transition: all linear 2s;
    -moz-transition: all linear 2s;
}

.figure:hover{
    background-color: blue;
    border: 10px solid pink;
    color: yellow;
    transition: all linear 2s;
    -webkit-transition: all linear 2s;
    -moz-transition: all linear 2s;
}

将transition 添加到class 及其:hover 使div 在hover 发生变化的同时恢复到正常状态

【讨论】：