CSS缓和进出悬停

Question

我有一个简单的div，其中一个是border-radius的50％。在hover边框半径变为零。我已经使用了以下完美工作的CSS代码。

.design-box { 
 
    width: 100%; 
 
    height: 250px; 
 
    margin: 100px auto; 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    position: relative; 
 
} 
 

 
.design-box:hover { 
 
    border-radius: 0; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
}

<div class="design-box"></div>

我想发生这样的是，当DIV不再徘徊，我想过渡到ease out慢慢转变回原来的50的border-radius％。我无法完成它的工作，我错过了一个简单的步骤吗？

谢谢

Answer 1

把transition只在正常状态：

.design-box { 
    transition: all 1s ease; 
} 

看一看下面的代码片段：

.design-box { 
 
    width: 100%; 
 
    height: 250px; 
 
    margin: 100px auto; 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    position: relative; 
 
    transition: all 1s ease; 
 
} 
 

 
.design-box:hover { 
 
    border-radius: 0; 
 
}

<div class="design-box"></div>