Question

你好，我正在研究这个问题，并且在徘徊时我得到了平滑的动画我想知道是否有一种方法可以让它在不再徘徊时顺利回归0？ http://jsfiddle.net/KeenanGalipeault/gY82Q/

<div></div>

div {
width: 300px;
height: 300px;
background: #262626;
transition: 0.6s;
}
div:hover {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 12px solid #0071bc;
}

Answer 1

如果＆＃39;两者结束，那么CSS过渡效果会更好。过渡是明确的，在这种情况下，通过向第一个选择器添加border: 0 solid #0071bc;一切正常，这里是更新的演示：http://jsfiddle.net/gY82Q/1/

div {
    width: 300px;
    height: 300px;
    background: #262626;
     box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    transition: 0.6s;
    border: 0 solid #0071bc;
}
div:hover {
    border: 12px solid #0071bc;
}

Answer 2

您需要为转换添加一个初始边框，以便有一个“out”引用，如下所示：

div {
    width: 300px;
    height: 300px;
    background: #262626;
    transition: 0.6s;
    border: 0 solid /* This is the initial border you have to add. 
                   Just add  a size (0) and a style (solid). 
                   No need to add an initial color, 
                       as in this case it'll be shown in the default 
                           state.*/
}

div:hover {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 12px solid #0071bc;
}

这里的小提琴：http://jsfiddle.net/gY82Q/2/

当Div不再徘徊时，CSS过渡动画

2 个答案: