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

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

  1. Он заполняет неправильный путь
  2. Он сбрасывается до пустого (черного) после его заполнения *
  3. На данный момент я использую tags , но я хотел бы переместить этот эффект в 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; } } 
  


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

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

  • #banner предоставляется border-radius: 50% для создания круга и overflow: hidden чтобы #banner внутри него

  • Элемент ::before псевдоэлементом анимируется до 100% высоты, а анимация приостанавливается на 100% с использованием значения forwards . Он начинается внизу с помощью bottom: 0

  • #banner изображения будут применены вместо черно-синего фона на #banner и #banner::before

Совместимость: IE10 + и все современные браузеры. Свойство -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%; } } 
  

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

1. С облегчением


объяснение

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

Для этого мы можем использовать функцию ослабления 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%; } } 
  

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

 #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; } } 
 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{ 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} } 
 
  • Пакетное преобразование изображений SVG в нужный размер PNG или ICO
  • Можете ли вы контролировать, как нарисована ширина штриха SVG?
  • firefox svg canvas drawImage error
  • Рисование SVG-файла на canvasе HTML5
  • Способ преобразования canvasа HTML5 в SVG?
  • Круговой рисунок с дуговой дорожкой SVG
  • SVG-координаты с матрицей преобразования
  • вертикальное выравнивание текстового элемента в SVG
  • SVG перетаскивается с помощью JQuery и JQuery-svg
  • Элемент SVG USE и стиль наведения
  • Вставить SVG в SVG?
  • Давайте будем гением компьютера.