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>

То, что я хотел бы случиться, что, когда ДИВ больше не парил, я не хотел бы, чтобы переход к ease out и медленно преобразовать обратно в первоначальный border-radius 50%. Я не могу заставить его работать, я пропустил простой шаг здесь?

Спасибо

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>