Animación de agua de relleno

Estoy tratando de obtener una animación de limpieza para hacer que un círculo parezca estar lleno de agua . Me he encontrado con dos errores y no he podido abordar el tercero:

  1. Se llena de la manera incorrecta
  2. Se restablece a vacío (negro) después de que se haya llenado *
  3. Por ahora, estoy usando las tags , pero me gustaría mover este efecto al body { background-image: } y necesito alguna dirección sobre cómo hacer esto.

Lo que he intentado hasta ahora:

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


Darle una posición de máscara predeterminada como se sugirió @anpsmn , ya no la restablece a negro.

Esto se puede lograr con un solo elemento div y a ::before pseudo element:

  • El #banner tiene border-radius: 50% para crear un círculo y overflow: hidden para recortar sus hijos dentro de él

  • El pseudo elemento ::before está animado al 100% de altura y la animación se pausa al 100% utilizando el valor forwards . Comienza en la parte inferior con el uso de la bottom: 0

  • Las imágenes de fondo se aplicarían en lugar de los fondos negros y azules en #banner y #banner::before

Compatibilidad: IE10 + y todos los navegadores modernos. La propiedad con prefijo -webkit- es muy probable que ya no sea necesaria para las animaciones de fotogtwigs clave. Consulte la tabla de compatibilidad del navegador aquí en caniuse.com

Ejemplo de trabajo

He añadido el cubic-bezier(.2,.6,.8,.4) que se explica en la respuesta de @ChrisSpittles . ¡Proporciona un efecto limpio!

 #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%; } } 
  

Aquí hay cuatro versiones diferentes para complementar la shiny respuesta de @ misterManSam .

1. Con Easing


Explicación

Si llenaba un recipiente circular lleno de líquido, se llenaría más rápido en la parte inferior y superior que en el medio (porque hay más área para cubrir en la sección media más ancha). Entonces, teniendo en cuenta esa tosca explicación, la animación necesita: comenzar rápido, lento en el medio, y luego terminar rápido cuando el cuenco se vuelve a estrechar en la parte superior.

Para hacer esto, podemos usar una función de relajación de CSS3: cubic-bezier(.2,.6,.8,.4) .

Echa un vistazo al ejemplo a continuación.

( Si desea ajustar la aceleración aquí, hay un gran recurso: http://cubic-bezier.com/#.2,.6,.8,.4 )

Ejemplo:

 #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%; } } 
  

Creo que esto logra su primer objective:

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