animação de transição css3 em carga?

195

É possível usar animação de transição CSS3 no carregamento da página sem usar Javascript?

É o que eu quero, mas no carregamento da página:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

O que eu encontrei até agora

css  webkit  css-transitions  css-animations 
— Jens Törnell
fonte
— NickFitz
2
Os quadros-chave conseguirão isso e fornecerão o melhor retorno quando as animações CSS3 não forem suportadas. Por que você acha que eles são muito lentos?
— Zachleat
Oi! O link agora está quebrado e eu não sei para onde ele deveria ir, então alguém pode corrigi-lo, por favor!
— Linux4Life531

Respostas:

459

Você pode executar uma animação CSS no carregamento da página sem usar JavaScript; você só precisa usar os quadros-chave CSS3 .

Vejamos um exemplo ...

Aqui está uma demonstração de um menu de navegação deslizando para o lugar usando apenas CSS3 :

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>
Expandir snippet

Quebre isso ...

As partes importantes aqui são a animação do quadro-chave que chamamos de slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

... que basicamente diz "no início, o cabeçalho estará fora da borda esquerda da tela por toda a largura e no final estará no lugar".

A segunda parte está chamando essa slideInFromLeftanimação:

animation: 1s ease-out 0s 1 slideInFromLeft;

Acima está a versão abreviada, mas aqui está a versão detalhada para maior clareza:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

Você pode fazer todo tipo de coisa interessante, como deslizar no conteúdo ou chamar atenção para áreas.

Aqui está o que o W3C tem a dizer.

— Chris Spittles
fonte
20
O que faz com que isso seja executado no carregamento da página, e não antes?
— Rolf
2
Apenas para responder à pergunta acima, parece que a animação inicia 0s após ser aplicada, sem demora. Há uma propriedade adicional, animação-atraso, que pode ser configurada para controlar isso. Veja: w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
Para garantir que a animação comece após o carregamento do documento, coloque o código da animação em uma folha de estilo abaixo do elemento do corpo ou da marca de estilo na parte inferior do elemento do corpo.
— precisa saber é o seguinte
@SuzanneEdelmanCreoconcept, eu sei, o IE9 não suporta a propriedade de transição. Suas opções seriam JS ou degradação normal.
— Chris Spittles
1
Excelente resposta, me ajudou em 2019!
— Gosi 25/07/19
28

É necessário muito pouco Javascript:

window.onload = function() {
    document.body.className += " loaded";
}

Agora o CSS:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

Eu sei que a pergunta dizia "sem Javascript", mas acho que vale ressaltar que existe uma solução fácil que envolve uma linha de Javascript.

Pode até ser Javascript embutido, algo assim:

<body onload="document.body.className += ' loaded';" class="fadein">

É todo o JavaScript necessário.

— Rolf
fonte
2
Uma pequena correção: <body onload = "document.body.setAttribute ('class', 'loaded')">
— Ivan
1
Se não for necessário aguardar o evento onLoad da página, insira esse código antes da tag </body>: <script type = "text / javascript"> document.body.setAttribute ('class', 'loading'); </script>
— Ivan
7
Para evitar a substituição de bodyclasses existentes , use:document.body.classList.add('loaded)
— Vyacheslav Cotruta
1
Eu achei document.body.className += " loaded";um pouco menos detalhado para adicionar a loadedclasse às classes existentes.
— Pim Schaaf
1
@PimSchaaf Obrigado pela sua sugestão, faz totalmente sentido. Vou editá-lo agora. Atualmente, você também pode usar o classList, que é um pouco mais elegante (mas menos compatível).
— Rolf
20

Acho que encontrei uma espécie de solução alternativa para a questão do OP - em vez de uma transição que começa com 'on.load' da página - descobri que o uso de uma animação para diminuir a opacidade tinha o mesmo efeito (eu estava procurando por a mesma coisa que OP).

Então, eu queria que o texto do corpo aparecesse do branco (igual ao plano de fundo do site) para a cor do texto preto no carregamento da página - e só codifico desde segunda-feira, então estava procurando um código de coisa no estilo 'on.load', mas ainda não sei o JS - então aqui está o meu código que funcionou bem para mim. 

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

E por qualquer motivo, isso não funciona .classapenas para #idos (pelo menos não para os meus)

Espero que isso ajude - como eu conheço este site me ajuda muito!

— Lee John
fonte
6

Bem, isso é complicado.

A resposta é "não realmente".

CSS não é uma camada funcional. Não tem consciência do que acontece ou quando. É usado simplesmente para adicionar uma camada de apresentação a diferentes "sinalizadores" (classes, IDs, estados).

Por padrão, o CSS / DOM não fornece nenhum tipo de estado "em carga" para o CSS usar. Se você quisesse / fosse capaz de usar JavaScript, alocaria uma classe bodyou algo para ativar algum CSS.

Dito isto, você pode criar um hack para isso. Vou dar um exemplo aqui, mas pode ou não ser aplicável à sua situação.

Estamos trabalhando com a suposição de que "fechar" é "bom o suficiente":

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

Aqui está um trecho da nossa folha de estilo CSS:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

Também assumimos que os navegadores modernos são processados ​​progressivamente; portanto, nosso último elemento será processado por último e, portanto, esse CSS será ativado por último.

— foxy
fonte
1

Semelhante à solução de @ Rolf, mas pule a referência a funções externas ou brinque com a classe. Se a opacidade permanecer fixa em 1 depois de carregada, basta usar o script embutido para alterar diretamente a opacidade por meio do estilo. Por exemplo

<body class="fadein" onload="this.style.opacity=1">

onde o sytle CSS "fadein" é definido por @ Rolf, definindo a transição e configurando a opacidade para o estado inicial (ou seja, 0)

o único problema é que isso não funciona com elementos SPAN ou DIV, pois eles não têm evento onload de trabalho

— user3907296
fonte
1

inicie-o com o foco do corpo do que Ele começará quando o mouse se mover pela primeira vez na tela, que ocorre quase um segundo após a chegada, o problema aqui é que ele será revertido quando estiver fora da tela.

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

é a melhor coisa que consigo pensar: http://jsfiddle.net/faVLX/

tela cheia: http://jsfiddle.net/faVLX/embedded/result/

Editar, veja os comentários abaixo:
Isso não funcionará em nenhum dispositivo de tela sensível ao toque, pois não há pairar o mouse; portanto, o usuário não verá o conteúdo a menos que toque nele. - Rich Bradshaw

— beardhatcode
fonte
Sim, eu mesmo descobri isso. É uma solução aceitável se nada mais funcionar. Um voto para isso.
— Jens Törnell
13
É uma péssima ideia - em qualquer dispositivo com tela sensível ao toque não há foco, para que o usuário não veja o conteúdo a menos que toque nele.
— Rich Bradshaw
1

CSS apenas com um atraso de 3s

alguns pontos a serem tomados aqui:

  • várias animações em uma chamada
  • criamos uma animação de espera que atrasa apenas a real (a segunda no nosso caso).

Código:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
— Claudiu
fonte
0

Ok, eu consegui obter uma animação quando a página é carregada usando apenas transições css (mais ou menos!):

Eu criei 2 folhas de estilo css: a primeira é como eu quero o estilo html antes da animação ... e a segunda é como eu quero que a página cuide da execução da animação.

Eu não entendo completamente como consegui isso, mas ele só funciona quando os dois arquivos css (ambos no cabeçalho do meu documento) são separados por algum javascript da seguinte maneira.

Eu testei isso com o Firefox, safari e ópera. Às vezes a animação funciona, às vezes pula direto para o segundo arquivo css e às vezes a página parece estar carregando, mas nada é exibido (talvez seja apenas eu?)

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

Aqui está um link para meu site de trabalho em andamento: http://www.hankins-design.co.uk/beta2/test/index.html

Talvez eu esteja errado, mas achei que os navegadores que não suportam transições de CSS não devem ter problemas, pois devem pular diretamente para o segundo arquivo CSS sem demora ou duração.

Estou interessado em conhecer pontos de vista sobre como esse método é amigável para os mecanismos de pesquisa. Com meu chapéu preto, suponho que poderia preencher uma página com palavras-chave e aplicar um atraso de 9999s em sua opacidade.

Gostaria de saber como os mecanismos de pesquisa lidam com o atributo de atraso de transição e se, usando o método acima, eles ainda veriam os links e as informações na página.

Mais importante, eu realmente gostaria de saber por que isso não é consistente cada vez que a página é carregada e como posso corrigir isso!

Espero que isso possa gerar alguns pontos de vista e opiniões, se nada mais!

— Michael Walkling
fonte
0

Se alguém mais teve problemas para fazer duas transições ao mesmo tempo, aqui está o que eu fiz. Eu precisava que o texto fosse de cima para baixo no carregamento da página.

HTML 

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML 

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS 

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

Não sei por que continuei tentando usar 2 declarações de transição em 1 seletor e (não realmente) pensando que usaria ambas.

— s3c
fonte
0

Solução ainda mais simples (ainda com javascript [uma linha em linha]):

Use isso como a etiqueta do corpo: observe que body.ou this.não funcionou para mim. Apenas o longo; querySelectorpermitir o uso de classList.remove(Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

e adicione esta linha sobre suas outras regras de CSS.

body.onload *{ transform: none !important; }

Observe que isso pode se aplicar à opacidade (conforme solicitado pelo OP [outros pôsteres]) simplesmente usando a opacidade como um gatilho de transição. (pode até funcionar com qualquer outra regra CSS da mesma maneira e você pode usar várias classes para atrasos explícitos entre o acionamento)

A lógica é a mesma. Impor nenhuma transformação (com :none !importanttodos os elementos filhos de body.onloade depois que o documento for carregado, remova a classe para acionar toda a transição em todos os elementos, conforme especificado em seu css.

PRIMEIRA RESPOSTA ABAIXO (VEJA EDITAR ACIMA PARA RESPOSTA MAIS CURTA)

Aqui está uma solução inversa:

  1. Faça seu layout de html e defina o css de acordo com o resultado final (com toda a transformação que você deseja).
  2. Defina a propriedade de transição ao seu gosto
  3. adicione uma classe (por exemplo: waitload) aos elementos que você deseja transformar após o carregamento. A palavra-chave CSS ! Important é a palavra-chave aqui.
  4. Depois que o documento for carregado, use JS para remover a classe dos elementos para iniciar a transformação (e remova a transição: nenhuma substituição).

Funciona com várias transições em vários elementos. Não tentou compatibilidade entre navegadores.

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}
<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>
— Louis Loudog Trottier
fonte
-2

Na verdade, o CSS é aplicado o mais rápido possível, mas os elementos ainda não podem ser desenhados. Você pode adivinhar um atraso de 1 ou 2 segundos, mas isso não parecerá adequado para a maioria das pessoas, dependendo da velocidade da internet.

Além disso, se você deseja desvanecer algo, por exemplo, seria necessário CSS que oculte o conteúdo a ser entregue. Se o usuário não tiver transições CSS3, nunca o verá.

Eu recomendo usar o jQuery (para facilitar o uso + você pode adicionar animação para outros UAs) e algumas JS como esta: 

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

Junto com as transições adicionadas no CSS. Isso tem a vantagem de permitir facilmente o uso de animar, em vez do segundo CSS, em navegadores herdados, se necessário.

— Rich Bradshaw
fonte
17
Por que essa resposta foi aceita? Realmente não faz nada que a pergunta pediu. Simplesmente (e muito rapidamente, às vezes imperceptivelmente) inicia o elemento invisível, espera a pequena fração de segundo (200 ms) e instantaneamente o torna visível novamente. Isso não é um desvanecimento, a última vez que verifiquei.
— VoidKing
Você incluiria uma transição de css no #id_to_fade in, embora eu concorde, isso não está claro na resposta.
— Ricos Bradshaw
como em, adicione outro .css ({transição: 'opacidade 2s'}) à chamada do jQuery? Ou apenas no seu css? Eu tenho a sensação de que eu vou sentir como esta é uma pergunta estúpida ...
— VoidKing
3
Tudo bem - eu deveria ter feito uma demonstração realmente. No CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-prefixos também.
— Ricos Bradshaw
2
Esta não deve ser a resposta aceita, usar quadros-chave é o caminho a percorrer.
— Eduardo Naveda
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.