Uso de CSS para un efecto de desvanecimiento en la carga de la página

442

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

Realmente me gusta cómo se veía en http://dotmailapp.com/ y me encantaría usar un efecto similar usando CSS. Desde entonces, el dominio se ha comprado y ya no se menciona el efecto. Se puede ver una copia archivada en Wayback Machine .

Ilustración

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

css css-transitions opacity

— usuario1556266
fuente

Es posible que desee leer esto: bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

O esto: css-tricks.com/snippets/css/…

— raksheetbhat

Respuestas:

914

Método 1:

Si está buscando una transición autoinvocatoria, entonces debe usar animaciones CSS 3 . Tampoco son compatibles, pero este es exactamente el tipo de cosas para las 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; }
}

Manifestación

http://jsfiddle.net/SO_AMK/VV2ek/

Soporte de navegador

Todos los navegadores modernos e Internet Explorer 10 (y posteriores): http://caniuse.com/#feat=css-animation

Método 2:

Alternativamente, puede usar jQuery (o JavaScript simple; vea el tercer bloque de código) para cambiar la clase en la carga:

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

JavaScript simple (no en la demostración)

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

Manifestación

http://jsfiddle.net/SO_AMK/a9dnW/

Soporte de navegador

Todos los navegadores modernos e Internet Explorer 10 (y posteriores): http://caniuse.com/#feat=css-transitions

Método 3:

O puede usar el método que utiliza .Mail :

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

CSS

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

Manifestación

http://jsfiddle.net/SO_AMK/a9dnW/3/

Soporte de navegador

jQuery 1.x : Todos los navegadores modernos e Internet Explorer 6 (y posterior): http://jquery.com/browser-support/
jQuery 2.x : Todos los navegadores modernos e Internet Explorer 9 (y posterior): http: // jquery.com/browser-support/

Este método es el más compatible, ya que el navegador de destino no necesita admitir transiciones o animaciones CSS 3 .

— AMK
fuente

149

La animación CSS3 es compatible con todos los navegadores modernos. Por supuesto, IE no es un navegador moderno.

— Rob

Sí, pero ¿qué pasa si quieres / necesitas ser compatible con IE6? En ese caso, creo que jQuery es la mejor opción. Pero el autor de la pregunta lo quiere en CSS, así que lo publiqué como alternativa.

— AMK

¿No es mejor establecer la opacidad inicial en 0 en javascript? De esa forma, si el usuario tiene JavaScript deshabilitado, el elemento está allí en lugar de no aparecer nunca.

— Jonathan.

@AMK Intenté hacer "arreglar" eso solo en el javascript pero no lo logré, así que al final creé un archivo css separado opacity: 1 !important;y puse un <noscript>elemento.

— Jonathan.

Brillante respuesta! ¿Qué tan difícil es aplicar la animación $("#test p").addClass("load");varias veces? Hacer $("#test p").removeClass('load').addClass("load");no funciona porque la animación ya se detuvo. ¿Puedo activar un reinicio desde JavaScript?

— Șerban Ghiță

Puede usar el onload=""atributo HTML y 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 atenuar 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 */
}

Visite el sitio web de W3Schools : transiciones y un artículo para cambiar estilos con JavaScript .

— Ned
fuente

Gran respuesta. Alternativamente, supongo que puede configurar la carga directamente en el elemento. Al igual <div id="test" onload="this.style.opacity='1'">. Sin embargo, no estoy seguro si significa que el evento se dispara antes de que se cargue todo el cuerpo.

— Jeppe

En respuesta a la pregunta de @ AMK sobre cómo hacer transiciones sin jQuery. Un ejemplo muy simple que arrojé juntos. Si tuviera tiempo para pensarlo un poco más, podría 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>

— Robar
fuente