Uso de CSS para el efecto de fundido en la carga de la página

¿Se pueden usar transiciones CSS para permitir que un párrafo de texto se desvanezca al cargar la página?

Realmente me gusta cómo se ve en http://dotmailapp.com / y me encantaría usar un efecto similar usando CSS.

Nota: El dominio ya ha sido comprado y ya no tiene el efecto mencionado. Una copia archivada se puede ver en la Wayback Machine .

Ilustración

Tener este marcado: 

<div id="test">    
    <p>​This is a test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Con el siguiente CSS regla:

#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 al cargar?

Author: A.M.K, 2012-07-27
Source

3 answers

Método 1:

Si estás buscando una transición auto invocable, entonces deberías usar Animaciones CSS3, no son compatibles, pero este es exactamente el tipo de cosa para la que fueron hechas.

CSS 

#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; }
}

Demo

Soporte del navegador

Todos los navegadores modernos, es decir, 10+: http://caniuse.com/#feat=css-animation


Método 2:

Alternativamente, puede usar jQuery (o JS simple, consulte tercer bloque de código) para cambiar la clase al cargar:

[12]} jQuery 
$("#test p").addClass("load");​

CSS 

#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;
}

JS simple (no en demo) 

document.getElementById("test").children[0].className += " load";

Demo

Soporte del navegador

Todos los navegadores modernos, es decir, 10+: http://caniuse.com/#feat=css-transitions


Método 3:

O bien, puede utilizar el método que .Mail usos:

[12]} jQuery 
$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS 

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Demo

Soporte del navegador

JQuery 1.x: Todos los navegadores modernos, IE 6+: http://jquery.com/browser-support /
jQuery 2.x: Todos los navegadores modernos, IE 9+: http://jquery.com/browser-support /

Este método es el más cross-compatible como lo hace el navegador de destino no es necesario admitir animaciones de transiciones o de CSS3.

 682
Author: A.M.K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-14 18:20:42

Puede usar el atributo HTML onload="" y usar 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 fundir la página completa cuando termine de cargar:

HTML: 

<body onload="document.body.style.opacity='1'">
</body>

CSS: 

body{ 
    opacity:0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

Consulte el sitio web de W3Schools: transicionesy un artículo para cambiar estilos con javascript.

 14
Author: Ned,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-06 23:50:19

En respuesta a la pregunta de @A. M. K sobre cómo hacer transiciones sin jQuery. Un ejemplo muy simple que lancé juntos. Si tuviera tiempo para pensar esto un poco más, podría ser capaz de eliminar el 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>
 4
Author: Rob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-08 02:41:46