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>