Animazione CSS Visibilità Non funziona

Voglio fare un'animazione basata su fotogramma chiave sulla proprietà CSS visibilità. Inizialmente l'ho provato su 'display' ma ho trovato che l'animazione su 'display' non è supportata ma 'visibilità' lo è. L'idea è di rendere la visibilità del rettangolo continua a commutare. Non voglio usare jquery e voglio implementarlo interamente in CSS. In seguito è il mio codice, ma non dà il risultato previsto del rettangolo rimanendo nascosto fino al 5 ° secondo, che appare e poi di nuovo scomparire alla fine dell'animazioneAnimazione CSS Visibilità Non funziona

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

fonte

2011-10-22 Raks

visibilità (e la visualizzazione) la proprietà non può essere animata. Un elemento è visibile o meno. Prova la proprietà opacity invece:

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

    50% { 
     opacity:1; 
    } 

    to { 
     opacity:0; 
    } 
}

fonte

2011-10-22 07:26:48 JJJ

Come per http://www.w3.org/TR/css3-transitions/#animatable-properties- la visibilità è una proprietà animabile. Anche la documentazione di Safari menziona che la visibilità può essere animata http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4 -SW1. Ho persino visto una correzione di BUG per Mozilla nel 2009 che corregge l'animazione sulla visibilità. – Raks

La visibilità può essere animata, giusto. Ma non per creare un effetto visivo. Devi usarlo con proprietà "vere" animabili. Quando e come utilizzare la visibilità come proprietà di animazione, puoi vedere @ http://www.greywyvern.com/?post=337 –

Una transizione CSS o di animazione sulla proprietà di visibilità mantiene l'elemento visibile per tutta la durata della transizione e quindi vale bruscamente il nuovo valore. (assumendo le specifiche attuali e finché non viene utilizzata alcuna funzione di cronometraggio speciale.) Transizioni/Animazioni sulla visibilità non mostrano un effetto visivo a variazione progressiva , tuttavia mentre leggo la domanda l'idea è effettivamente per mantenere l'elemento nascosto fino al 5 °.

L'animazione CSS specifica un primo passaggio da 0% al 50% girando da nascosto a visibile, che mostra l'elemento di base alla regola di cui sopra e poi si specifica una transizione dal 50% al 100% da visibile a nascosta , che mostra anche l'elemento durante la riproduzione di . Quindi l'elemento è permanentemente visibile.

Specificando

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

l'elemento rimarrà nascosto fino al 50% e quindi appaiono all'improvviso. Per nasconderlo alla fine, è necessario aggiungere visibilità: nascosto a la regola del foglio di stile principale non ai fotogrammi chiave. Vedere anche il mio post sul blog sulla visibilità della transizione CSS http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility

fonte

2014-08-06 12:13:40

Questa risposta è corretta, non quella sotto. –

Questo dovrebbe essere contrassegnato come risposta –

Animazione CSS Visibilità Non funziona

risposta

Problemi correlati