ラジアルスライド材料設計のように、

Question

私はラジアルマスクとしてマテリアルデザインで行うのと同じ方法で、ページ上のエレメントのラジアル外観を実現しようとしています。

私のHTMLが含まれています

<div class="map"></div> 

私のCSSは次のとおりです。

.map { 
width:100%; 
height: 100vh; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
position: absolute; 
} 
.l { 
animation: fromLeft 1s; 
z-index: 9; 
transition: all 3s; 
background: red; 
} 

@keyframes fromLeft { 
from { 
clip-path: circle(0 at bottom 0px left 0px); 
background: transparent; 
} 
to { 
clip-path: circle(280px at bottom 100px left 100px); 
background:red !important; 
} 
} 

私は取得しています効果は、単にフェードインではなく、半径1です。

私が間違っていることを誰かが助けてくれますか？

私codepenはここにある：http://codepen.io/anon/pen/wWXwAr

はそれを修正すること自由に感じなさい。前もって感謝します。

Answer 1

問題は私のオリジナルのCSSコードの中で、特に最初から要素を隠すためにありました。同じ問題がある場合は、下の例を使用してください。

shape-inside: circle(0px at 0px 0px); 
-webkit-clip-path: circle(0px at 0px 0px); 

又は

shape-inside: circle(0px, 0px, 0px); 
-webkit-clip-path: circle(0px, 0px, 0px); 

http://codepen.io/anon/pen/wWXwAr