画像を移動させずに背景画像に1/4円を近づけて効果を出すにはどうすればいいですか？

Question

角が丸い角があります。私は丸められたコーナーをイメージ上でアニメーション化する必要があります。イメージは移動してはならないので、アニメーションはサークルがイメージを「飲み込んでいる」ように表示されます。

HTML：

<div class="container"> 
    <div class="circle"></div> 
</div> 

のCss：

.container { 
    height: 200px; 
    width: 200px; 
    border: 1px solid #ccc; 
    overflow: hidden; 
} 

.circle { 
    width: 200%; 
    height: 200%; 
    background-image: url(http://www.planwallpaper.com/static/cache/8a/e0/8ae0d4f7338822ba567adfc22c54f1b6.jpg); 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 
    border-radius: 50%; 
    transition: 1s all ease-in-out; 
    position: relative; 
} 

.circle.closed { 
    width: 0%; 
    height: 0%; 
    margin-left: 100%; 
    margin-top: 100%; 
} 

Codepen：https://codepen.io/anon/pen/peLrBG

あなたが見ることができるように、画像が円と縮小。私は動きがないようにイメージが必要です。どうすればこれを達成できますか？また、丸みを帯びたコーナーエフェクトのある正方形を実現するには、より良い方法がありますか？ありがとうございました。

Answer 1

clip-path CSSプロパティがあり、目的の効果が得られます。

.circle { 
    ... 
    clip-path: circle(50% at center); 
} 

.circle.closed { 
    clip-path: circle(0 at center); 
}