¿Se pueden utilizar transiciones CSS para permitir que un párrafo de texto se desvanezca al cargar la página?
Me gusta mucho cómo se veía en http://dotmailapp.com/ y me encantaría utilizar un efecto similar usando CSS. El dominio ha sido comprado y ya no tiene el efecto mencionado. Se puede ver una copia archivada en Wayback Machine.
Teniendo este marcado:
<div id="test">
<p>This is a test</p>
</div>
Con la siguiente regla CSS:
#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
¿Cómo se puede activar la transición en la carga?
Si lo que buscas es una transición autoinvitable, entonces debes usar CSS 3 Animaciones. Ellos tampoco son compatibles, pero esto es exactamente el tipo de cosas que se hicieron para.
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Todos los navegadores modernos e Internet Explorer 10 (y posteriores): http://caniuse.com/#feat=css-animation
Alternativamente, puedes usar jQuery (o simplemente JavaScript; ver el tercer bloque de código) para cambiar la clase al cargar:
$("#test p").addClass("load");
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
document.getElementById("test").children[0].className += " load";
Todos los navegadores modernos e Internet Explorer 10 (y posteriores): http://caniuse.com/#feat=css-transitions
O bien, puede utilizar el método que utiliza .Mail:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.x: Todos los navegadores modernos e Internet Explorer 6 (y posteriores): http://jquery.com/browser-support/
jQuery 2.x__: Todos los navegadores modernos e Internet Explorer 9 (y posteriores): http://jquery.com/browser-support/
Este método es el más compatible, ya que el navegador de destino no necesita soportar transiciones CSS 3 o animaciones.
Puede utilizar el atributo HTML `onload="" y utilizar JavaScript para ajustar el estilo de opacidad de su elemento.
Deje su CSS como lo propuso. Edite su código HTML para:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Esto también funciona para hacer un fade-in de la página completa cuando termina de cargar:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Consulta el sitio web de W3Schools: transiciones y un artículo para cambiar estilos con JavaScript.
En respuesta a la pregunta de @A.M.K's sobre cómo hacer transiciones sin jQuery. Un ejemplo muy sencillo que he montado. Si tuviera tiempo para pensar en esto un poco más, podría ser capaz de eliminar el código JavaScript por completo:
<style>
body {
background-color: red;
transition: background-color 2s ease-in;
}
</style>
<script>
window.onload = function() {
document.body.style.backgroundColor = '#00f';
}
</script>
<body>
<p>test</p>
</body>