Usando CSS para um efeito de desvanecimento no carregamento da página

442

As transições CSS podem ser usadas para permitir que um parágrafo de texto desapareça no carregamento da página?

Eu realmente gosto da aparência em http://dotmailapp.com/ e adoraria usar um efeito semelhante usando CSS. O domínio já foi adquirido e não tem mais o efeito mencionado. Uma cópia arquivada pode ser visualizada na Wayback Machine .

Ilustração

Com esta marcação:

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

Com a seguinte regra 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;
}

Como a transição pode ser acionada com carga?

css css-transitions opacity

— user1556266
fonte

Você pode querer ler este: bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

Ou isto: css-tricks.com/snippets/css/…

— raksheetbhat

Respostas:

914

Método 1:

Se você estiver procurando por uma transição auto-invocadora, use CSS 3 Animations . Eles também não são suportados, mas é exatamente para isso que eles foram criados.

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

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

Suporte do navegador

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

Método 2:

Como alternativa, você pode usar o jQuery (ou JavaScript simples; consulte o terceiro bloco de código) para alterar a classe no carregamento:

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 simples (não na demo)

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

Demo

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

Suporte do navegador

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

Método 3:

Ou, você pode usar o método que .Mail usa:

jQuery

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

CSS

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

Demo

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

Suporte do navegador

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

Este método é o mais compatível entre si, pois o navegador de destino não precisa suportar transições ou animações CSS 3 .

— AMK
fonte

149

A animação CSS3 é suportada perfeitamente por todos os navegadores modernos que existem. Obviamente, o IE não é um navegador moderno.

— 27412 Rob

Sim, mas e se você quiser / precisar ser compatível com o IE6? Nesse caso, acho que o jQuery é a melhor opção. Mas, o solicitante deseja em CSS, então eu o publiquei como uma alternativa.

— AMK

Não é melhor definir a opacidade inicial como 0 em javascript? Dessa forma, se o usuário tiver o javascript desativado, o elemento estará lá em vez de nunca aparecer.

— Jonathan.

@AMK Tentei fazer "consertar" isso apenas no javascript, mas não consegui, então no final criei um arquivo css separado opacity: 1 !important;e coloquei um <noscript>elemento.

— Jonathan.

Resposta brilhante! Quão difícil é aplicar a animação $("#test p").addClass("load");várias vezes? Fazer $("#test p").removeClass('load').addClass("load");não faz o trabalho, pois a animação já parou. Posso acionar uma reinicialização do JavaScript?

— banerban Ghiță

Você pode usar o onload=""atributo HTML e JavaScript para ajustar o estilo de opacidade do seu elemento.

Deixe o seu CSS como você propôs. Edite seu código HTML para:

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>This is a test</p>
    </div>
</body>

Isso também funciona para desvanecer-se na página completa ao terminar o carregamento:

HTML:

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

CSS:

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

Verifique o site do W3Schools : transições e um artigo para alterar estilos com JavaScript .

— Ned
fonte

Ótima resposta. Como alternativa, acho que você pode definir a carga diretamente no elemento. Like <div id="test" onload="this.style.opacity='1'">. Não tenho certeza se isso significa que o evento é disparado antes que o corpo inteiro seja carregado.

— Jeppe

Em resposta à pergunta da @ AMK sobre como fazer transições sem o jQuery. Um exemplo muito simples que joguei juntos. Se eu tiver tempo para pensar um pouco mais sobre isso, talvez eu consiga eliminar completamente o código JavaScript:

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

— Roubar
fonte