ホバリングでCSSが容易に出入りする

Question

私はborder-radiusが50％の丸い単純なdivを持っています。 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>