Animación de visibilidad CSS No funciona

Quiero hacer una animación basada en fotogramas clave en la propiedad CSS de visibilidad. Inicialmente lo intenté en 'pantalla' pero encontré que la animación en 'pantalla' no es compatible, pero sí 'visibilidad'. La idea es hacer que la visibilidad del rectángulo continúe alternando. No quiero usar jquery y quiero implementar todo en CSS. Lo que sigue es mi código pero no da el resultado esperado del rectángulo permaneciendo oculto hasta el 5 segundos, apareciendo y luego otra vez de desaparecer al final de la animaciónAnimación de visibilidad CSS No funciona

<head> 
     <style type="text/css"> 
    #layer1 {    
       -moz-animation-duration: 10s;     
     -moz-animation-name: toggle; 
    } 

    @-moz-keyframes toggle { 
      from { 
       visibility:hidden; 
      } 

     50% { 
        visibility:visible; 
      } 

     to { 
     visibility:hidden; 
      } 
    } 

    </style> 

    <script type="application/javascript"> 
     window.onload = function()    
     { 
      var c = document.getElementById('layer1'); 
      var ctxt = c.getContext('2d'); 
      ctxt.fillStyle = 'red'; 
      ctxt.fillRect(0,0,200,200); 
      ctxt.fillStyle = 'green'; 
      ctxt.fillRect(0,0,100,100); 
     } 

    </script>

<body> 

     <canvas id="layer1" width="200" height="200" >   
    </canvas> 

    </body> 


</html>

Fuente

2011-10-22 Raks

visibilidad (y la pantalla) la propiedad no puede ser animada. Un elemento es visible o no. Pruebe la propiedad opacity lugar:

@-moz-keyframes toggle { 
    from { 
     opacity:0; 
    } 

    50% { 
     opacity:1; 
    } 

    to { 
     opacity:0; 
    } 
}

Fuente

2011-10-22 07:26:48 JJJ

Según http://www.w3.org/TR/css3-transitions/#animatable-properties- visibilidad es una propiedad animatable. Incluso la documentación de Safari menciona que la visibilidad puede ser animada http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4 -SW1. Incluso vi un arreglo ERROR para Mozilla en 2009 que corrige la animación en visibilidad. La visibilidad de – Raks

puede ser animada, a la derecha. Pero no para crear un efecto visual. Tienes que usarlo con propiedades animables "verdaderas". Cuándo y cómo usar la visibilidad como propiedad de animación, puede verla en http://www.greywyvern.com/?post=337 –

Una transición CSS o animación en la propiedad de visibilidad mantiene el elemento visible para la duración de la transición y luego, bruscamente, se aplica el nuevo valor. (asumiendo la especificación actual y siempre que no se use una función de temporización especial) Las transiciones/animaciones en la visibilidad no muestran un efecto visual que cambia gradualmente, sin embargo, cuando leí la pregunta, la idea es para mantener el elemento oculto hasta el 5to segundo.

La animación CSS especifica un primer paso de 0% a 50% pasando de oculta a visible que muestra el elemento de acuerdo a la regla anterior y luego especificar una transición de 50% a 100% de visible a oculta , que también muestra el elemento mientras está jugando . Entonces el elemento es visible permanentemente.

Al especificar

@keyframes toggle { 
     from { 
      visibility:hidden; 
     } 
    50% { 
      visibility:hidden; 
     } 
    to { 
      visibility:visible; 
     } 
}

el elemento permanecerá oculto hasta el 50% y luego aparecer de repente. Para ocultarlo al final, debe agregar visibilidad: oculto en la regla de la hoja de estilo principal no en los fotogramas clave. También ver mi blog sobre la visibilidad de transición CSS http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility

Fuente

2014-08-06 12:13:40

Esta respuesta es correcta, no la que se encuentra a continuación. –

Esto debe marcarse como respuesta –

Animación de visibilidad CSS No funciona

Respuesta

Cuestiones relacionadas