Наполнение анимации воды

Я пытаюсь очистить анимацию, чтобы круг выглядел как , наполняющийся водой. Я столкнулся с двумя ошибками и не смог даже решить третий:

Он не соответствует действительности.
~~Сбрасывается до пустого (черного) после того, как он заполнил~~ *
В настоящее время я использую теги <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, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 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>

Ответы

Ответ 1

Это может быть достигнуто с помощью одного div и ::before псевдоэлемент:

#banner предоставляется border-radius: 50%, чтобы создать круг и overflow: hidden, чтобы закрепить его дочерние элементы внутри него
Псевдоэлемент ::before анимируется до 100% высоты и анимация приостанавливается на 100%, используя значение forwards. Он начинается внизу с помощью bottom: 0
Фоновые изображения будут применены вместо черно-синего фона на #banner и #banner::before

Совместимость: IE10 + и все современные браузеры. Свойство prefixed -webkit-, скорее всего, больше не нужно для анимации ключевых кадров. Проверьте схему совместимости браузеров здесь на caniuse.com

Рабочий пример

Я добавил cubic-bezier(.2,.6,.8,.4) который объясняется в ответе @ChrisSpittles. Он обеспечивает аккуратный эффект!

#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>

Ответ 2

Вот четыре разных версии, чтобы дополнить @misterManSam блестящий ответ.

1. С Easing

Объяснение

Если вы заполнили круговую миску с жидкостью, она заполнилась бы быстрее внизу и сверху, чем в середине (потому что в более широкой средней части больше места для покрытия). Итак, с учетом этого грубого объяснения, анимация должна: начать быстро, медленно посередине, а затем быстро закончить, когда чаша сужается снова наверху.

Для этого мы можем использовать функцию ослабления CSS3: cubic-bezier(.2,.6,.8,.4).

Посмотрите пример ниже.

(Если вы хотите настроить ослабление здесь, это отличный ресурс: http://cubic-bezier.com/#.2,.6,.8,.4)

Пример:

#banner {
  width: 150px;
  height: 150px;
  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>

Ответ 3

Я думаю, что это твоя первая цель:

#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,0,0,0)),
    color-stop(0.25,  rgba(0,0,0,0)),
    color-stop(0.27,  rgba(0,0,0,0)),
    color-stop(0.80,  rgba(0,0,0,1)),
    color-stop(1.00,  rgba(0,0,0,1)));
 }

 @-webkit-keyframes wipe {
     0% {
    -webkit-mask-position: 300px 300px;
  }
     100% {
    -webkit-mask-position: 0 0;
  }
}

Ответ 4

div{
  width: 200px;
  height: 200px;
  background: #ccc;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 9;
}
div:before{
  content: '';
  position: absolute; top: 100%; left: 0;
  width: 100%;
  height: 100%;
  background: #00BFFF;  
  -webkit-animation: animtop 5s forwards, animtop2 2s forwards;
  animation: animtop 5s forwards, animtop2 2s forwards;
}
@-webkit-keyframes animtop{  
  0%{top: 100%;}  
  75%{top: 0}
}
@keyframes animtop{  
  0%{top: 100%;}  
  100%{top: 25%}
}
@-webkit-keyframes animtop2{  
  75%{top: 25%;}  
  100%{top: 0}
}
@keyframes animtop2{  
  75%{top: 25%;}  
  100%{top: 0}
}

<div></div>