我试图擦拭动画，使一个圆看起来像它充满了水。我遇到了两个错误，甚至无法解决第三个问题：
>它填补了错误的方式
>它填满后重置为空(黑色)*
>现在，我使用< img>标签，但我想将此效果移动到body {background-image：}，需要一些方向如何做到这一点。
#banner {
width: 300px;
height: 300px;
position: relative;
}
#banner div {
position: absolute;
}
#banner div:nth-child(2) {
-webkit-animation: wipe 6s;
-webkit-animation-delay: 0s;
-webkit-animation-direction: up;
-webkit-mask-size: 300px 3000px;
-webkit-mask-position: 300px 300px;
-webkit-mask-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.00,rgba(0,1)),color-stop(0.25,color-stop(0.27,0)),color-stop(0.80,color-stop(1.00,0)));
}
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: 300px 300px;
}
}
<div id="banner">
<div>
<img src="http://i.imgur.com/vklf6kK.png" />
</div>
<div>
<img src="http://i.imgur.com/uszeRpk.png" />
</div>
</div>
给它一个默认掩码位置为@anpsmn建议，不会重置它黑色了。
解决方法
这可以用一个div和一个
::before pseudo element:来实现
> #banner给出了border-radius：50％来创建一个圆和overflow：hidden来剪切它的孩子
> :: before伪元素被动画化为100％高度，动画使用the forwards value以100％暂停。它从底部开始，使用底部：0
>背景图片将应用于#banner和#banner ::之前的黑色和蓝色背景
兼容性：IE10和所有现代浏览器。 -webkit-前缀属性很可能不再是关键帧动画所必需的。 Check the browser compatibility chart over here on caniuse.com
工作示例
我添加了立方贝塞尔曲线(.2，.6，.8，.4)which is explained in @ChrisSpittles answer.它提供了一个整洁的效果！
#banner {
width: 300px;
height: 300px;
position: relative;
background: #000;
border-radius: 50%;
overflow: hidden;
}
#banner::before {
content: '';
position: absolute;
background: #04ACFF;
width: 100%;
bottom: 0;
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
@keyframes wipe {
0% {
height: 0;
}
100% {
height: 100%;
}
}
<div id="banner"> </div>
