meaning - css tricks almanac
Animación de visibilidad CSS no funciona (2)
La propiedad de visibilidad (y visualización) no se puede animar. Un elemento es visible o no. Pruebe la propiedad de opacity lugar:
@-moz-keyframes toggle {
from {
opacity:0;
}
50% {
opacity:1;
}
to {
opacity:0;
}
}
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 que permanece oculto hasta el 5to segundo, apareciendo y luego otra vez desapareciendo al final de la animación.
<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>
Una transición o animación de CSS en la propiedad de visibilidad mantiene el elemento visible durante la transición y luego aplica de forma abrupta 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 visibilidad no muestran un efecto visual gradualmente cambiante; sin embargo, cuando leo la pregunta, la idea es mantener el elemento oculto hasta el 5º segundo .
Su animación CSS especifica una primera transición de 0% a 50% pasando de oculto a visible que muestra el elemento de acuerdo con la regla anterior y luego especifica una transición de 50% a 100% de visible a oculto, que también muestra el elemento mientras 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á abruptamente. Para ocultarlo al final, debe agregar visibilidad: oculto a la regla de la hoja de estilo principal, no a los fotogramas clave. También vea la publicación de mi blog sobre la visibilidad de transición de CSS http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility