animation de transition css3 au chargement?

196

Est-il possible d'utiliser l'animation de transition CSS3 au chargement de la page sans utiliser Javascript?

C'est un peu ce que je veux, mais au chargement de la page:

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

Ce que j'ai trouvé jusqu'ici

  • CSS3 transition-delay , un moyen de retarder les effets sur les éléments. Fonctionne uniquement en survol.
  • L'image clé CSS3 , fonctionne à la charge mais est extrêmement lente. Pas utile à cause de ça.
  • La transition CSS3 est assez rapide mais ne s'anime pas au chargement de la page.
css  webkit  css-transitions  css-animations 
— Jens Törnell
source
— NickFitz
2
Les images clés accompliront cela et fourniront la meilleure solution de secours lorsque les animations CSS3 ne sont pas prises en charge. Pourquoi pensez-vous qu'ils sont trop lents?
— zachleat
Salut! Le lien est maintenant rompu et je ne sais pas où il était censé aller, alors quelqu'un peut-il le réparer s'il vous plaît!
— Linux4Life531

Réponses:

460

Vous pouvez exécuter une animation CSS lors du chargement de la page sans utiliser de JavaScript; il vous suffit d'utiliser des images clés CSS3 .

Regardons un exemple ...

Voici une démonstration d'un menu de navigation glissant en place en utilisant uniquement 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>
Développer l'extrait

Décomposez-le ...

Les parties importantes ici sont l'animation d'images clés que nous appelons slideInFromLeft...

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

... qui dit essentiellement "au début, l'en-tête sera sur le bord gauche de l'écran par sa pleine largeur et à la fin sera en place".

La deuxième partie appelle cette slideInFromLeftanimation:

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

Ci-dessus se trouve la version abrégée, mais voici la version verbeuse pour plus de clarté:

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

Vous pouvez faire toutes sortes de choses intéressantes, comme glisser dans le contenu ou attirer l'attention sur des zones.

Voici ce que le W3C a à dire.

— Chris Spittles
source
20
Qu'est-ce qui fait que cela fonctionne au chargement de la page, et pas plus tôt?
— Rolf
2
Juste pour répondre à la question ci-dessus, il apparaît par défaut que l'animation démarre à 0s après son application, sans délai. Il existe une propriété supplémentaire, animation-delay, qui peut être définie pour contrôler cela. Voir: w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
Pour vous assurer que l'animation commencera après le chargement du document, placez le code d'animation dans une feuille de style sous l'élément body ou la balise de style en bas de l'élément body.
— TaylorMac
@SuzanneEdelmanCreoconcept à ma connaissance, IE9 ne prend pas en charge la propriété transition. Vos options seraient JS ou dégradation gracieuse.
— Chris Spittles
1
Excellente réponse, m'a aidé en 2019!
— Gosi
28

Très peu de Javascript est nécessaire:

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

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

Je sais que la question disait "sans Javascript", mais je pense qu'il vaut la peine de souligner qu'il existe une solution simple impliquant une ligne de Javascript.

Cela pourrait même être du Javascript en ligne, quelque chose comme ça:

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

C'est tout le JavaScript nécessaire.

— Rolf
source
2
Un petit correctif: <body onload = "document.body.setAttribute ('class', 'shared')">
— Ivan
1
Si vous n'avez pas besoin d'attendre l'événement onLoad de la page, insérez ce code avant la balise </body>: <script type = "text / javascript"> document.body.setAttribute ('class', 'shared'); </script>
— Ivan
7
Pour éviter le remplacement des bodyclasses existantes , utilisez:document.body.classList.add('loaded)
— Vyacheslav Cotruta
1
J'ai trouvé document.body.className += " loaded";un peu moins verbeux pour ajouter la loadedclasse aux classes existantes.
— Pim Schaaf
1
@PimSchaaf Merci pour votre suggestion, c'est tout à fait logique. Je vais le modifier maintenant. De nos jours, vous pouvez également utiliser classList qui est un peu plus élégant (mais moins compatible).
— Rolf
21

Je pense avoir trouvé une sorte de contournement pour la question OP - au lieu d'une transition commençant `` on.load '' de la page - j'ai trouvé que l'utilisation d'une animation pour un fondu d'opacité avait le même effet, (je cherchais la même chose que OP).

Je voulais donc que le corps du texte passe du blanc (identique à l'arrière-plan du site) à la couleur du texte noir lors du chargement de la page - et je ne codifie que depuis lundi, donc je cherchais un code de chose de style 'on.load', mais je ne connais pas encore JS - voici donc mon code qui a bien fonctionné pour moi. 

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

Et pour une raison quelconque, cela ne fonctionne que pour les .classseuls #id(du moins pas pour les miens)

J'espère que cela aide - car je sais que ce site m'aide beaucoup!

— Lee John
source
6

Eh bien, c'est une question délicate.

La réponse est "pas vraiment".

CSS n'est pas une couche fonctionnelle. Il n'a aucune conscience de ce qui se passe ou quand. Il est utilisé simplement pour ajouter une couche de présentation à différents "drapeaux" (classes, identifiants, états).

Par défaut, CSS / DOM ne fournit aucun type d'état «à la charge» pour CSS à utiliser. Si vous vouliez / pouviez utiliser JavaScript, vous alloueriez une classe à bodyou quelque chose pour activer du CSS.

Cela étant dit, vous pouvez créer un hack pour cela. Je vais vous donner un exemple ici, mais il peut ou non être applicable à votre situation.

Nous partons du principe que "fermer" est "assez bon":

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

Voici un extrait de notre feuille de style CSS:

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

Nous partons également du principe que les navigateurs modernes sont rendus progressivement, donc notre dernier élément sera rendu en dernier, et donc ce CSS sera activé en dernier.

— rusé
source
1

Similaire à la solution de @ Rolf, mais saute la référence aux fonctions externes ou joue avec la classe. Si l'opacité doit rester fixée à 1 une fois chargée, utilisez simplement le script en ligne pour changer directement l'opacité via le style. Par exemple

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

où le sytle CSS "fadein" est défini par @ Rolf, définissant la transition et définissant l'opacité à l'état initial (c'est-à-dire 0)

le seul problème est que cela ne fonctionne pas avec les éléments SPAN ou DIV, car ils n'ont pas d'événement onload fonctionnel

— user3907296
source
1

Commencez-le avec le survol du corps.

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

c'est la meilleure chose à laquelle je puisse penser: http://jsfiddle.net/faVLX/

plein écran: http://jsfiddle.net/faVLX/embedded/result/

Modifier voir les commentaires ci-dessous:
Cela ne fonctionnera sur aucun appareil à écran tactile car il n'y a pas de survol, donc l'utilisateur ne verra pas le contenu à moins qu'il ne le touche. - Rich Bradshaw

— barbe
source
Oui, je l'ai compris moi-même. C'est une solution de contournement correcte si rien d'autre ne fonctionne. Un vote pour cela.
— Jens Törnell
13
C'est une idée terrible - sur n'importe quel appareil à écran tactile, il n'y a pas de survol, donc l'utilisateur ne verra pas le contenu à moins qu'il ne le touche.
— Rich Bradshaw
1

CSS uniquement avec un délai de 3s

quelques points à prendre ici:

  • plusieurs animations en un seul appel
  • nous créons une animation d' attente qui ne fait que retarder celle actuelle (la seconde dans notre cas).

Code:

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

Ok j'ai réussi à réaliser une animation lorsque la page se charge en utilisant uniquement des transitions css (en quelque sorte!):

J'ai créé 2 feuilles de style css: la première est la façon dont je veux que le html soit stylé avant l'animation ... et la seconde est la façon dont je veux que la page ressemble après que l'animation a été réalisée.

Je ne comprends pas entièrement comment j'ai accompli cela mais cela ne fonctionne que lorsque les deux fichiers css (tous deux dans la tête de mon document) sont séparés par du javascript comme suit.

J'ai testé cela avec Firefox, safari et opéra. Parfois, l'animation fonctionne, parfois elle passe directement au deuxième fichier css et parfois la page semble se charger mais rien ne s'affiche (peut-être que c'est juste moi?)

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

Voici un lien vers mon site Web de travail en cours: http://www.hankins-design.co.uk/beta2/test/index.html

Peut-être que je me trompe, mais je pensais que les navigateurs qui ne prennent pas en charge les transitions css ne devraient pas avoir de problèmes car ils devraient passer directement au deuxième fichier css sans délai ni durée.

Je suis intéressé de savoir comment cette méthode est conviviale pour les moteurs de recherche. Avec mon chapeau noir, je suppose que je pourrais remplir une page de mots-clés et appliquer un délai de 9999 secondes sur son opacité.

Je serais intéressé de savoir comment les moteurs de recherche traitent l'attribut transition-delay et si, en utilisant la méthode ci-dessus, ils verraient même les liens et les informations sur la page.

Plus important encore, j'aimerais vraiment savoir pourquoi ce n'est pas cohérent à chaque fois que la page se charge et comment je peux y remédier!

J'espère que cela peut générer des points de vue et des opinions si rien d'autre!

— Michael Walkling
source
0

Si quelqu'un d'autre a eu des problèmes pour faire deux transitions à la fois, voici ce que j'ai fait. J'avais besoin que le texte vienne de haut en bas lors du chargement de la page.

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

Je ne sais pas pourquoi j'ai continué à essayer d'utiliser 2 déclarations de transition dans 1 sélecteur et (pas vraiment) en pensant qu'il utiliserait les deux.

— s3c
source
0

Solution encore plus simple (toujours avec [une ligne en ligne] javascript):

Utilisez ceci comme balise corps: Notez que body.ou this.n'a pas fonctionné pour moi. Seulement le long; querySelectorautoriser l'utilisation de classList.remove(Linux Chromium)

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

et ajoutez cette ligne en plus de vos autres règles css.

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

Notez que cela peut s'appliquer à l'opacité (comme demandé par OP [autres affiches]) simplement en utilisant l'opacité comme déclencheur de transition à la place. (peut même fonctionner sur toute autre règle css de la même manière et vous pouvez utiliser plusieurs classes pour le délai d'explicité entre le déclenchement)

La logique est la même. N'appliquez aucune transformation (avec :none !importantsur tous les éléments enfants de body.onloadet une fois le document chargé, supprimez la classe pour déclencher toutes les transitions sur tous les éléments comme spécifié dans votre css.

PREMIÈRE RÉPONSE CI-DESSOUS (VOIR MODIFICATION CI-DESSUS POUR UNE RÉPONSE PLUS COURTE)

Voici une solution inverse:

  1. Faites votre mise en page html et définissez le css en fonction de votre résultat final (avec toute la transformation que vous souhaitez).
  2. Définissez la propriété de transition à votre convenance
  3. ajoutez une classe (par exemple: waitload) aux éléments que vous souhaitez transformer APRÈS chargement. Le mot-clé CSS ! Important est le mot clé ici.
  4. Une fois le document chargé, utilisez JS pour supprimer la classe des éléments à pour démarrer la transformation (et supprimer la transition: aucun remplacement).

Fonctionne avec plusieurs transitions sur plusieurs éléments. N'a pas essayé la compatibilité entre navigateurs.

#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
source
-2

Pas vraiment, car CSS est appliqué dès que possible, mais les éléments ne sont peut-être pas encore dessinés. Vous pouvez deviner un délai de 1 ou 2 secondes, mais cela ne semblera pas correct pour la plupart des gens, en fonction de la vitesse de leur Internet.

De plus, si vous voulez faire fondre quelque chose, par exemple, il faudrait un CSS qui cache le contenu à livrer. Si l'utilisateur n'a pas de transitions CSS3, il ne la verra jamais.

Je recommanderais d'utiliser jQuery (pour faciliter l'utilisation + vous souhaiterez peut-être ajouter une animation pour d'autres UA) et certains JS comme ceci: 

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

Avec les transitions ajoutées dans le CSS. Cela a l'avantage de permettre facilement l'utilisation d'animation au lieu du deuxième CSS dans les navigateurs hérités si nécessaire.

— Rich Bradshaw
source
17
Pourquoi cette réponse a-t-elle été acceptée? Cela ne fait vraiment rien de ce que la question demandait. Il démarre simplement (et très rapidement, parfois de manière imperceptible) l'élément invisible, attend la petite fraction de seconde (200 ms) puis le rend instantanément visible. Ce n'est pas un fondu, j'ai vérifié la dernière fois.
— VoidKing
Vous incluriez une transition css sur le #id_to_fade in, bien que je sois d'accord, ce n'est pas si clair d'après la réponse.
— Rich Bradshaw
comme dans, ajouter un autre .css ({transition: 'opacity 2s'}) à l'appel jQuery? Ou juste dans votre css? J'ai le sentiment que je vais avoir l'impression que c'est une question stupide ...
— VoidKing
3
C'est bon - j'aurais vraiment dû mettre en place une démo. En CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, les -moz-préfixes également.
— Rich Bradshaw
2
Cela ne devrait pas être la réponse acceptée, l'utilisation d'images clés est la voie à suivre.
— Eduardo Naveda
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.