使用 CSS3 自定义形状和动画答案

【问题标题】：Custom shape and animation with CSS3使用 CSS3 自定义形状和动画
【发布时间】：2015-04-25 20:06:58
【问题描述】：

是否可以使用 CSS3 形状创建以下窗帘效果？

【问题讨论】：

你试过了吗？
我尝试使用边界半径和过渡制作动画，但我不知道如何从底部粉碎圆圈并让动画流畅（对不起我的英语）
请包含您尝试过的代码。有很多方法可以解决一个问题。如果你想要一个答案、答案、建议，你必须改进这个问题。

标签： html css svg css-animations css-shapes

【解决方案1】：

我尝试在左侧放置一个圆圈，在右侧放置一个圆圈。每一个都被动画化，以产生几乎窗帘预期的效果（再次抱歉我的英语）。

<div id="animation-curtains">
    <div class="animation-curtain gauche wrap"></div>
    <div class="animation-curtain droite wrap"></div>
</div>

.animation-curtain {
    top: -60%;
    position: absolute;
    border-radius: 1200px;
    width: 2400px;
    height: 2400px;
    background: #000;
    transform: scale(1) rotate(0deg);
     -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition-duration: 3s;
    -moz-transition-duration: 3s;
    -o-transition-duration: 3s;
    transition-duration: 3s;
}

.animation-curtain.gauche { left: -20%; }
.animation-curtain.droite { right: -20%; }

#animation-curtains.animate .animation-curtain.gauche {
    top: -200%;
    left: -85%;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}

#animation-curtains.animate .animation-curtain.droite {
    top: -200%;
    right: -85%;
    -moz-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}

【讨论】：