Animation de visibilité CSS Ne fonctionne pas

Je souhaite créer une animation basée sur une image clé sur la propriété CSS visibility. Je l'ai d'abord essayé sur 'display' mais j'ai trouvé que l'animation sur 'display' n'est pas supportée mais que 'visibility' l'est. L'idée est de faire basculer la visibilité du rectangle. Je ne veux pas utiliser jquery et je veux l'implémenter entièrement en CSS. À la suite de mon code, mais il ne donne pas le résultat attendu du rectangle restant caché jusqu'à la 5ème seconde, apparaissant puis disparaissant à nouveau à la fin de l'animationAnimation de visibilité CSS Ne fonctionne pas

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

Source

2011-10-22 Raks

Visibilité (et l'affichage) La propriété ne peut pas être animée. Un élément est visible ou non. Essayez la propriété opacity à la place:

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

    50% { 
     opacity:1; 
    } 

    to { 
     opacity:0; 
    } 
}

Source

2011-10-22 07:26:48 JJJ

Comme la visibilité par http://www.w3.org/TR/css3-transitions/#animatable-properties- est une propriété animable. Même la documentation de Safari mentionne que la visibilité peut être animée http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4 -SW1. J'ai même vu un correctif BUG pour Mozilla en 2009 qui corrige l'animation sur la visibilité – Raks

la visibilité peut être animée, à droite. Mais pas pour créer un effet visuel. Vous devez l'utiliser avec les propriétés animées "true". Quand et comment utiliser la visibilité comme une propriété d'animation, vous pouvez voir @ http://www.greywyvern.com/?post=337 –

Une transition CSS ou une animation sur la propriété de visibilité conserve l'élément visible pendant toute la durée de la transition, puis applique brutalement la nouvelle valeur. (en supposant la spécification actuelle et tant qu'aucune fonction de minutage spéciale n'est utilisée.) Les transitions/animations sur la visibilité ne montrent pas un changement progressif de l'effet visuel , mais en lisant la question, l'idée est en effet pour garder l'élément caché jusqu'à la 5ème seconde.

Votre animation CSS spécifie une première transition de 0% à 50% tournant de caché à visible qui montre l'élément selon à la règle ci-dessus et vous spécifiez une transition de 50% à 100% du visible à l'invisible , qui montre également l'élément tandis que joue. Donc l'élément est visible en permanence.

En spécifiant

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

l'élément restera caché jusqu'à 50%, puis apparaissent brusquement. Pour le masquer à la fin, vous devez ajouter la visibilité: masqué à la règle de la feuille de style principale non aux images clés. Voir aussi mon blog sur la visibilité de transition CSS http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility

Source

2014-08-06 12:13:40

Cette réponse est correcte, pas celle ci-dessous. –

Ceci devrait être marqué comme réponse –

Animation de visibilité CSS Ne fonctionne pas

Répondre

Questions connexes