CSS3 animación de relleno de modo de relleno

Prefacio

Vamos a pretender que un div está animado desde la opacity:0; a la opacity:1; Y quiero mantener la opacity:1; una vez finalizada la animación.

Eso es lo que animation-fill-mode:forwards; hace.

 @keyframes myAnimation { from { opacity:0; } to { opacity:1; } } div { opacity:0; animation-name:myAnimation; animation-delay:1s; animation-duration:2s; animation-fill-mode:forwards; }​ 
just a test

Ejecutalo en jsFiddle

  • Nota 1: no incluí los prefijos del proveedor aquí para simplificar
  • Nota 2: eso es solo un ejemplo, no responda con “solo use la función fQueIn jQuery” etc.

Algunas cosas para saber

En esta respuesta leí que Chrome 16+, Safari 4+, Firefox 5+ son compatibles con el animation-fill-mode .

Pero la animation sola es compatible con Chrome 1+ y Opera también. Por lo tanto, una prueba general con Modernizr puede dar un resultado positivo incluso si no se admite el fill-mode .

Para apuntar animation-fill-mode agregué una nueva prueba en Modernizr:

 Modernizr.addTest('animation-fill-mode',function(){ return Modernizr.testAllProps('animationFillMode'); }); 

Ahora tengo una clase .no-animation-fill-mode para CSS y Modernizr.animationFillMode para JavaScript.

También leo de las especificaciones de animaciones CSS3 que:

una animación especificada en la hoja de estilo del documento comenzará en la carga del documento


Finalmente, la (s) pregunta (s)

¿Está bien ejecutar una función jQuery simple en el número exacto de segundos que finaliza la animación?

 $(document).ready(function(){ if(!Modernizr.animation){ $('div').delay(1000).fadeIn(2000); }else if(!Modernizr.animationFillMode){ $('div').delay(3000).show(); } }); 

Y en CSS:

 .no-animation-fill-mode div { animation-iteration-count:1; } /* or just animation:myAnimation 2s 1s 1; for everyone */ 

¿O existe algún polietileno específico conocido para el animation-fill-mode de animation-fill-mode ?


Además, ¿qué pasa si uso la syntax abreviada

 animation:myAnimation 2s 1s forwards; 

¿En navegadores que admiten animation pero no animation-fill-mode ?

¡Muchas gracias!

Si fuera yo, intentaría optar por la alternativa más simple, si es posible. Disminuiría mi implementación para que solo esté usando lo que comúnmente se acepta. Más adelante, cuando la característica es más ampliamente compatible, entonces pienso en implementarla. Raramente considero usar una función que tiene This is an experimental technology transmisión de This is an experimental technology en páginas de documentación, pero tal vez debería ser clasificado como aburrido 🙂

En su ejemplo, podría lograr el mismo resultado que animation-fill-mode:forwards definiendo inicialmente el estado final de su elemento y utilizando una animación encadenada (si se necesita un retraso antes de la acción) :

 @keyframes waitandhide { from { opacity:0; } to { opacity:0; } } @keyframes show { from { opacity:0; } to { opacity:1; } } div { opacity:1; animation: waitandhide 2s 0s, show 2s 2s; } 
just a test

http://jsfiddle.net/RMJ8s/1/

Ahora es posible que los navegadores más lentos puedan actualizar sus estados de elementos iniciales antes de ocultarlos nuevamente. Pero en mi experiencia, solo he visto esto en máquinas muy antiguas y en páginas que tienen una gran cantidad de css para renderizar.

Obviamente, lo anterior hace que tu css se hinche un poco más (ya que tienes que duplicar estilos) , y sería más complicado cuando se trata de animaciones complejas. Sin embargo:

  1. Debería funcionar para casi cualquier situación de animación.
  2. Evitaría la necesidad de JavaScript (excepto el $ (). FadeIn fallback) .
  3. Funcionará en todos los navegadores compatibles con la animación css.
  4. No corres el riesgo de que JS y CSS se desincronicen.

Con respecto al uso de formularios cortos, sería mejor no hacerlo si desea obtener la compatibilidad de navegador más amplia posible. Sin embargo, como se muestra en mis ejemplos anteriores, opté por usar formas cortas porque tienen más claridad y puedo entender que no quiero escribir (o leer) las versiones de largo aliento todo el tiempo. Por esta razón, recomendaría usar menos para generar tu css:

http://lesscss.org/

http://radiatingstar.com/css-keyframes-animations-with-less

No conozco ningún polyfill … Pero diría que debería usar su propia prueba Modernizr personalizada, y para el navegador que no admite el modo de relleno de animación, debe usar el evento animationEnd para activar su callback y configurar opacidad a 1 (o eliminar una clase).

Ver: eventos de transición CSS3

En cuanto a la notación abreviada, IE <10 no admite la propiedad animation-fill-mode y estoy bastante seguro de que rompería toda la declaración.

Para tu información, así es como estoy implementando la respuesta de Pebbl (que es una respuesta muy inteligente) hoy en día. Solo necesito la detección css-animation de Modernizr .

Supongamos que quiero deslizar y desvanecer este div:

 
Some stuff

En primer lugar, escribo la animación. con prefijos de vendedor

 @keyframes byebye { 0% { height:100px; opacity:1; } 100% { opacity:0; height:0; } } 

entonces una nueva clase

 .target-animation { height:0; opacity:0; // same as "100%" state animation:byebye 750ms 1; } 

moviéndose a javascript:

 // $('.whatever').on('click',function(){ ... if(Modernizr.cssanimations) // css animations are supported! $('.target').addClass('target-animation'); else // i hate you IE $('.target').animate({height:0,opacity:0},750); 

Manifestación

Si necesita activar la animación varias veces, simplemente elimine la clase con javascript como se explica aquí :

 // if(Modernizr.cssanimations) ... $('target').addClass('target-animation').on('webkitAnimationEnd oAnimationEnd oanimationend animationend msAnimationEnd',function(){ $(this).removeClass('target-animation') // don't forget to .hide() if needed }); // ... else