jquery - 径向滑动效果类似于 Material Design

Question

我正在尝试在我的页面上实现元素的径向外观，就像在 Material Design 中作为径向 mask 一样。

我的 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;
}
}

我得到的效果只是淡入，而不是径向效果。

谁能帮我解决我做错了什么？

我的代码笔在这里: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