CSSでトランジション楕円を作る方法

Question

サイドバーは、コンテンツの一部を表示するだけで、サイドバーの幅がすべて表示されます。

これはCSSコードです：

.sidenav { 
    height: 100%; 
    width: 100px; 
    position: fixed; 
    z-index: 2; 
    top: 0; 
    left: 0; 
    background-color: #fff; 
    overflow: hidden; 
    padding-top: 20px; 
    transition: 0.8s; 
    -webkit-transition: 0.8s; 
    opacity: 0.8; 
    box-shadow: 0px 20px 50px black; 
} 
.sidenav:hover{ 
    width: 215px; 
    transition: 0.8s; 
    -webkit-transition: 0.8s; 
    overflow: hidden; 
} 

私の質問は、私のサイドバーの遷移は全幅を表示し、次に楕円最初になるようにする方法です。

前のおかげで、これは例示である：

Answer 1

あなただけの単純なトランジション効果でこれを達成することはできません。あなただけの幅遷移に国境半径を達成するためにCSS keyframe animationsを使用する必要があります。もちろん

.sidenav { 
 
    height: 100%; 
 
    width: 100px; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #fff; 
 
    overflow: hidden; 
 
    padding-top: 20px; 
 
    transition: 0.8s; 
 
    opacity: 0.8; 
 
    box-shadow: 0px 20px 50px black; 
 
    border-radius: 0; 
 
    background: black; 
 
} 
 

 
.sidenav:hover { 
 
    width: 215px; 
 
    overflow: hidden; 
 
    animation-name: roundborder; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
} 
 

 
@keyframes roundborder { 
 
    0% { border-radius: 0; } 
 
    50% { border-radius: 0 50% 50% 0; } 
 
    100% { border-radius: 0; } 
 
}

<div class="sidenav"></div>

古いブラウザのサポートのために適切なベンダープレフィックスを必要とします。詳細については、border-radius on MDNを参照してください。