animazione di transizione css3 al caricamento?

196

È possibile utilizzare l'animazione di transizione CSS3 al caricamento della pagina senza utilizzare Javascript?

Questo è un po 'quello che voglio, ma al caricamento della pagina:

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

Quello che ho trovato finora

css  webkit  css-transitions  css-animations 
— Jens Törnell
fonte
— NickFitz,
2
I fotogrammi chiave raggiungeranno questo obiettivo e forniranno il miglior fallback quando le animazioni CSS3 non sono supportate. Perché pensi che siano troppo lenti?
— Zachleat,
Ciao! Il collegamento ora è interrotto e non so dove doveva andare, quindi qualcuno può sistemarlo per favore!
— Linux4Life531

Risposte:

460

È possibile eseguire un'animazione CSS al caricamento della pagina senza utilizzare JavaScript; devi solo usare i keyframe CSS3 .

Vediamo un esempio ...

Ecco una dimostrazione di un menu di navigazione che si sposta in posizione utilizzando solo 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>
Espandi frammento

Abbattilo ...

Le parti importanti qui sono l'animazione dei fotogrammi chiave che chiamiamo slideInFromLeft...

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

... che sostanzialmente dice "all'inizio, l'intestazione sarà fuori dal bordo sinistro dello schermo per tutta la sua larghezza e alla fine sarà a posto".

La seconda parte chiama quell'animazione slideInFromLeft:

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

Sopra è la versione abbreviata ma qui è la versione dettagliata per chiarezza:

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

Puoi fare ogni sorta di cose interessanti, come scivolare nel contenuto o attirare l'attenzione sulle aree.

Ecco cosa ha da dire il W3C.

— Chris Spittles
fonte
20
Ciò che rende questo eseguire al caricamento della pagina e non prima?
— Rolf,
2
Solo per rispondere alla domanda sopra, appare per impostazione predefinita che l'animazione inizia 0s dopo che è stata applicata, senza alcun ritardo. C'è una proprietà aggiuntiva, ritardo animazione, che può essere impostata per controllarla. Vedi: w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
Per assicurarsi che l'animazione inizi dopo il caricamento del documento, posizionare il codice di animazione in un foglio di stile sotto l'elemento del corpo o il tag di stile nella parte inferiore dell'elemento del corpo.
— TaylorMac,
A mia conoscenza, @SuzanneEdelmanCreoconcept, IE9 non supporta la proprietà di transizione. Le tue opzioni sarebbero JS o grazioso degrado.
— Chris Spittles,
1
Ottima risposta, mi ha aiutato nel 2019!
— Gosi,
28

È necessario pochissimo Javascript:

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

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

Conosco la domanda "senza Javascript", ma penso che valga la pena sottolineare che esiste una soluzione semplice che coinvolge una riga di Javascript.

Potrebbe anche essere inline Javascript, qualcosa del genere:

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

Questo è tutto il JavaScript necessario.

— Rolf
fonte
2
Una piccola correzione: <body onload = "document.body.setAttribute ('class', 'loaded')">
— Ivan
1
Se non è necessario attendere l'evento onLoad della pagina, inserire questo codice prima di </body> tag: <script type = "text / javascript"> document.body.setAttribute ('class', 'loaded'); </script>
— Ivan,
7
Per evitare l'override delle bodyclassi esistenti , utilizzare:document.body.classList.add('loaded)
— Vyacheslav Cotruta,
1
Ho trovato document.body.className += " loaded";un po 'meno prolisso per aggiungere la loadedclasse alle classi esistenti.
— Pim Schaaf,
1
@PimSchaaf Grazie per il tuo suggerimento, ha perfettamente senso. Lo modificherò ora. Oggi puoi anche usare classList che è un po 'più elegante (ma meno compatibile).
— Rolf,
21

Penso di aver trovato una sorta di soluzione per la domanda OP - invece di una transizione che inizia 'on.load' della pagina - ho scoperto che l'uso di un'animazione per una dissolvenza dell'opacità ha avuto lo stesso effetto, (stavo cercando la stessa cosa di OP).

Quindi volevo che il testo del corpo svanisse dal bianco (lo stesso dello sfondo del sito) al colore del testo nero al caricamento della pagina - e ho iniziato a programmare solo da lunedì, quindi stavo cercando un codice cosa in stile "on.load", ma non conosco ancora JS - quindi ecco il mio codice che ha funzionato bene per me. 

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

E per qualsiasi motivo, questo non funziona .classsolo per#id (almeno non sul mio)

Spero che questo aiuti - come so questo sito mi aiuta molto!

— Lee John
fonte
6

Bene, questo è difficile.

La risposta è "non proprio".

CSS non è un livello funzionale. Non ha alcuna consapevolezza di ciò che accade o quando. È usato semplicemente per aggiungere una presentazione livello di a diversi "flag" (classi, ID, stati).

Per impostazione predefinita, CSS / DOM non fornisce alcun tipo di stato "al caricamento" che i CSS possono utilizzare. Se volessi / fossi in grado di utilizzare JavaScript, assegneresti una classe bodyo qualcosa per attivare alcuni CSS.

Detto questo, puoi creare un hack per questo. Faccio un esempio qui, ma potrebbe essere o meno applicabile alla tua situazione.

Operiamo partendo dal presupposto che "chiudere" è "abbastanza buono":

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

Ecco un estratto del nostro foglio di stile CSS:

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

Supponiamo anche che i browser moderni vengano visualizzati progressivamente, quindi il nostro ultimo elemento verrà visualizzato per ultimo e quindi questo CSS verrà attivato per ultimo.

— foxy
fonte
1

Simile alla soluzione di @Rolf, ma salta il riferimento a funzioni esterne o gioca con la classe. Se l'opacità deve rimanere fissa su 1 una volta caricata, utilizzare semplicemente lo script in linea per modificare direttamente l'opacità tramite lo stile. Per esempio

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

dove il sytle CSS "fadein" è definito per @ Rolf, definendo la transizione e impostando l'opacità allo stato iniziale (ovvero 0)

l'unico problema è che questo non funziona con gli elementi SPAN o DIV, poiché non hanno un evento onload funzionante

— user3907296
fonte
1

avviarlo con il mouse sopra il corpo di quello che inizierà quando il mouse si sposta per la prima volta sullo schermo, che è principalmente entro un secondo dall'arrivo, il problema qui è che si inverte quando è fuori dallo schermo.

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

questa è la cosa migliore che mi viene in mente: http://jsfiddle.net/faVLX/

schermo intero: http://jsfiddle.net/faVLX/embedded/result/

Modifica vedi i commenti qui sotto:
questo non funzionerà su nessun dispositivo touchscreen perché non c'è il passaggio del mouse, quindi l'utente non vedrà il contenuto a meno che non lo tocchi. - Rich Bradshaw

— beardhatcode
fonte
Sì, l'ho capito da solo. Va bene una soluzione alternativa se nient'altro funziona. Un voto in più per quello.
— Jens Törnell,
13
Questa è un'idea terribile: su qualsiasi dispositivo touchscreen non è presente il passaggio del mouse, quindi l'utente non vedrà il contenuto a meno che non lo tocchi.
— Rich Bradshaw,
1

CSS solo con un ritardo di 3 secondi

alcuni punti da prendere qui:

  • più animazioni in una chiamata
  • creiamo un'animazione di attesa che ritarda solo quella effettiva (la seconda nel nostro caso).

Codice:

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, sono riuscito a realizzare un'animazione quando la pagina si carica usando solo transizioni css (una specie di!):

Ho creato 2 fogli di stile CSS: il primo è il modo in cui voglio che l'html sia in stile prima dell'animazione ... e il secondo è il modo in cui voglio che la pagina appaia dopo che l'animazione è stata eseguita.

Non capisco fino in fondo come ho ottenuto questo risultato, ma funziona solo quando i due file CSS (entrambi in testa al mio documento) sono separati da alcuni javascript come segue.

Ho provato questo con Firefox, Safari e Opera. A volte l'animazione funziona, a volte salta direttamente al secondo file css e talvolta la pagina sembra caricarsi ma non viene visualizzato nulla (forse sono solo io?)

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

Ecco un link al mio sito Web work-in-progress: http://www.hankins-design.co.uk/beta2/test/index.html

Forse mi sbaglio, ma ho pensato che i browser che non supportano le transizioni CSS non dovrebbero avere problemi in quanto dovrebbero passare direttamente al secondo file CSS senza ritardo o durata.

Sono interessato a conoscere le opinioni su quanto sia amichevole questo motore di ricerca. Con il mio cappello nero suppongo di poter riempire una pagina con parole chiave e applicare un ritardo di 9999 sulla sua opacità.

Sarei interessato a sapere come i motori di ricerca gestiscono l'attributo del ritardo di transizione e se, usando il metodo sopra, vedrebbero anche i link e le informazioni sulla pagina.

Ancora più importante, vorrei davvero sapere perché questo non è coerente ogni volta che la pagina viene caricata e come posso correggerlo!

Spero che questo possa generare alcune opinioni e opinioni se non altro!

— Michael Walkling
fonte
0

Se qualcun altro ha avuto problemi a fare due transizioni contemporaneamente, ecco cosa ho fatto. Avevo bisogno che il testo venisse dall'alto verso il basso al caricamento della pagina.

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

Non so perché ho continuato a provare a usare 2 dichiarazioni di transizione in 1 selettore e (non proprio) pensando che avrebbe usato entrambi.

— S3C
fonte
0

Soluzione ancora più semplice (sempre con [una riga in linea] javascript):

Utilizzare questo come il tag body: Si noti che body.o this.non ha funzionato per me. Solo il lungo; querySelectorconsentire l'uso di classList.remove(Linux Chromium)

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

e aggiungi questa riga sopra le altre tue regole css.

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

Si noti che ciò può essere applicato all'opacità (come richiesto dall'OP [altri poster]) semplicemente utilizzando l'opacità come trigger di transizione. (potrebbe anche funzionare su qualsiasi altra regola CSS allo stesso modo e puoi usare più classi per il ritardo esplicito tra l'attivazione)

La logica è la stessa. Non applicare nessuna trasformazione (con :none !importantsu tutto l'elemento figlio di body.onloade una volta caricato il documento, rimuovere la classe per attivare tutta la transizione su tutti gli elementi come specificato nel CSS.

PRIMA RISPOSTA QUI SOTTO (GUARDA LA MODIFICA SOPRA PER LA RISPOSTA PIÙ BREVE)

Ecco una soluzione inversa:

  1. Crea il tuo layout html e imposta i CSS di conseguenza sul risultato finale (con tutta la trasformazione che desideri).
  2. Imposta la proprietà di transizione a tuo piacimento
  3. aggiungi una classe (es: waitload) agli elementi che vuoi trasformare dopo il caricamento. La parola chiave CSS ! Importante è la parola chiave qui.
  4. Una volta caricato il documento, utilizzare JS per rimuovere la classe dagli elementi per avviare la trasformazione (e rimuovere la transizione: nessuna sostituzione).

Funziona con più passaggi su più elementi. Non ho provato la compatibilità tra browser.

#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

Non proprio, poiché il CSS viene applicato il prima possibile, ma gli elementi potrebbero non essere ancora disegnati. Potresti indovinare un ritardo di 1 o 2 secondi, ma questo non sembrerà giusto per la maggior parte delle persone, a seconda della velocità della loro Internet.

Inoltre, se vuoi sbiadire qualcosa, ad esempio, richiederebbe CSS che nasconde il contenuto da consegnare. Se l'utente non ha transizioni CSS3, non lo vedrebbero mai.

Consiglierei di usare jQuery (per facilità d'uso + potresti voler aggiungere l'animazione per altri UA) e alcuni JS come questo: 

$(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.
});

Insieme alle transizioni aggiunte nel CSS. Ciò ha il vantaggio di consentire facilmente l'uso di animate invece del secondo CSS nei browser legacy, se necessario.

— Rich Bradshaw
fonte
17
Perché questa risposta è stata accettata? In realtà non fa nulla di ciò che la domanda ha posto. Semplicemente (e molto rapidamente, a volte in modo impercettibile) avvia l'elemento invisibile, attende la piccola frazione di secondo (200 ms), quindi lo rende nuovamente visibile istantaneamente. Non è una dissolvenza, l'ultima volta che ho controllato.
— VoidKing,
Includeresti una transizione CSS sulla #id_to_fade in, anche se sono d'accordo, non è così chiaro dalla risposta.
— Rich Bradshaw,
come in, aggiungere un altro .css ({transizione: 'opacity 2s'}) alla chiamata jQuery? O semplicemente nel tuo css? Ho la sensazione che mi sentirò come se fosse una domanda stupida ...
— VoidKing,
3
Va bene - avrei dovuto creare una demo davvero. Nei CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, anche i -moz-prefissi.
— Rich Bradshaw,
2
Questa non dovrebbe essere la risposta accettata, usare i key frame è la strada da percorrere.
— Eduardo Naveda,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.