css3 animation de transition sur la charge?

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

C'est le genre de 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'à présent

CSS3 transition-delay, un moyen de retarder les effets sur les éléments. Ne fonctionne que sur le vol stationnaire.
CSS3 image clé, les travaux sur la charge, mais sont extrêmement lents. Pas utile à cause de cela.
CSS3 transition est assez rapide, mais ne pas les animer au chargement de la page.

presque rien à voir, par exemple, mysociety.org/2011/08/11/mobile-operators-breaking-content et robertnyman.com/2006/04/25/...
Les images clés permettra d'atteindre cet objectif et d'offrir le meilleur de secours lorsque les animations CSS3 ne sont pas pris en charge. Pourquoi pensez-vous qu'ils sont trop lent?

InformationsquelleAutor Jens Törnell | 2011-07-24

413

Vous peut exécuter un CSS animation de chargement de page sans utiliser de JavaScript; vous avez juste à utiliser CSS3 images clés.

Regardons un Exemple...

Voici une démonstration d'un menu de navigation coulissantes en place à l'aide CSS3 seulement:

CSS:
```
@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;}
```
HTML:
```
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>
```
Décomposer...

Les parties importantes ici sont l'animation avec des images clés que nous appelons slideInFromLeft...
```
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
```
...qui dit en gros "au début, l'en-tête sera au large de la côté gauche de l'écran par sa largeur et à la fin sera en place".

La deuxième partie est l'appel que slideInFromLeft animation:
```
animation: 1s ease-out 0s 1 slideInFromLeft;
```
Ci-dessus est la version courte, mais ici est la version détaillé 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 un glissement dans le contenu, ou en attirant l'attention sur les domaines.

Voici ce que le W3C a à dire.
- Ce qui rend cette course au chargement de la page, et pas plus tôt?
- Juste pour répondre à la question ci-dessus, il s'affiche par défaut, l'animation démarre de 0 fois qu'il est appliqué, sans délai. Il y a une propriété supplémentaire, animation-delay, qui peuvent être définies pour le contrôle de cette. Voir: w3.org/TR/css3-animations/#animation-delay-property
- Pour assurer l'animation commencera après le document se charge, le lieu de l'animation de code dans une feuille de style au-dessous de l'élément de corps ou le style d'étiquette au bas de l'élément body.
- à ma connaissance, IE9 ne prend pas en charge la propriété transition. Vos options serait JS ou la dégradation gracieuse.
- C'est fantastique! Merci!!!! Je tiens à noter que la !important indicateur dans votre @keyframes sera ignorée et peut avoir un comportement inattendu. Vérifier ici pour plus d'info. Par exemple, je voulais à la transition de la largeur sur un diagramme à barres horizontales. La largeur sur les barres sont définies comme des styles en ligne, donc je voulais width: 0px !important à 0%. J'ai plutôt utilisé transform: translateX (-100%); à 0% et transform: translateX (0%); à 100% avec overflow:hidden sur l'élément parent.
- Excellente réponse, m'a aidé en 2019!
InformationsquelleAutor Chris Spittles
24

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 a dit "sans Javascript", mais je pense qu'il vaut la peine de remarquer qu'il y est une solution simple comprenant une ligne de Javascript.

Il pourrait même être le Javascript en ligne, quelque chose comme ça:
```
<body onload="document.body.className += ' loaded';" class="fadein">
```
C'est tout le JavaScript qui est nécessaire.
- Un peu Corrigé: <body onload="document.corps.setAttribute ("class", "chargé")">
- Si aucun besoin d'attendre que la page événement onLoad insérez ce code avant </body> balise: <script type="text/javascript"> document.corps.setAttribute ("class", "chargé"); </script>
- Merci pour le correctif, Ivan! Je l'ai corrigé dans mon post. Étrange, je pensais que ce serait le point de l'élément body.
- Pour éviter le remplacement de l'existant body classes d'utilisation: document.body.classList.add('loaded)
- J'ai trouvé document.body.className += " loaded"; à être un peu moins verbeux pour ajout le loaded classe dans les classes existantes.
- Merci pour votre suggestion, c'est tout à fait logique. Je vais le modifier maintenant. Aujourd'hui, vous pouvez également utiliser classList qui est un peu plus élégant (mais de moins en moins compatible).
InformationsquelleAutor Rolf
20

Je pense avoir trouvé une sorte de travail autour de l'OP question - au lieu d'une transition de début " sur.chargement de la page - j'ai trouvé que l'utilisation d'une animation pour une opacité fondu eu le même effet, je cherchais la même chose que l'OP).

Donc je voulais avoir le corps du texte fondu de blanc(de même que le site de fond) noir couleur du texte sur la page de la charge - et je ne l'ai été de codage depuis lundi alors que je cherchais un " sur les.charger le style de chose code, mais ne savez pas par JS - donc voici mon code qui a bien fonctionné pour moi.
```
#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}
```
Et pour quelque raison que ce soit, cela ne fonctionne pas pour .class seulement #id's(du moins pas sur le mien)

Espère que cette aide comme je sais que ce site m'aide beaucoup!

InformationsquelleAutor Lee John
5

Bien, c'est une question délicate.

La réponse est "pas vraiment".

CSS n'est pas une couche fonctionnelle. Il n'a pas la moindre conscience de ce qui se passe et quand. Il est utilisé simplement pour ajouter un de présentation couche à différents "flags" (classes, id, états).

Par défaut, CSS/DOM ne pas fournir tout type de "charge" de l'état pour CSS à utiliser. Si vous vouliez/ont été en mesure d'utiliser le JavaScript, vous souhaitez affecter une classe à body ou quelque chose à activer un peu de CSS.

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

Nous fonctionnons sur l'hypothèse que "fermer" est "assez bon":
```
<html>
<head>

</head>
<body>
    
    <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 sommes également sur l'hypothèse que les navigateurs modernes rendre progressivement, de sorte que notre dernier élément sera rendu en dernier, et donc ce CSS sera activé.

InformationsquelleAutor foxy
1

Similaire à @Rolf de solution, mais ignorer référence à des fonctions externes ou en jouant avec classe. Si l'opacité est de rester fixé à 1 une fois chargé, il suffit d'utiliser de script en ligne de changer directement l'opacité via style. Par exemple
```
<body class="fadein" onload="this.style.opacity=1">
```
où CSS sytle "fadein" est défini par @Rolf,la définition de la transition et de réglage de l'opacité à l'état initial (c'est à dire 0)

le seul hic, c'est que cela ne fonctionne pas avec SPAN ou DIV éléments, car ils n'ont pas de travail d'événement onload

InformationsquelleAutor user3907296
1

démarrer avec passez de corps qu'Il va commencer quand d'abord la souris se déplace sur l'écran, ce qui est la plupart du temps moins d'une seconde après l'arrivée, le problème ici est qu'il s'inverse lorsque l'écran.
```
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
```
c'est la meilleure chose que je peux penser de: http://jsfiddle.net/faVLX/

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

Modifier voir les commentaires ci-dessous:

Cela ne fonctionne pas sur tout l'écran tactile de l'appareil, car il n'y a pas de vol stationnaire, de sorte que l'utilisateur ne verra pas le contenu, à moins qu'ils le robinet. Riche En Bradshaw
- Oui, j'ai pensé que moi-même. C'est une solution de contournement ok si rien d'autre ne fonctionne. On vote pour qui.
- C'est une terrible idée sur un écran tactile de l'appareil il n'y a pas de vol stationnaire, de sorte que l'utilisateur ne verra pas le contenu, à moins qu'ils le robinet.
InformationsquelleAutor beardhatcode
0

Ok j'ai réussi à réaliser une animation lors du chargement de la page en utilisant uniquement les transitions css (un peu!):

J'ai créé 2 feuilles de style css:
la première est de savoir comment je veux le code html de style avant de l'animation...
et la deuxième est comment je veux que la page pour s'occuper de l'animation a été réalisée.

Je ne comprends pas tout ce que j'ai accompli cela, mais il ne fonctionne que lorsque les deux fichiers css (à la fois dans la tête de mon document) sont séparés par un peu de javascript comme suit.

J'ai testé avec Firefox, safari et opera. Parfois, l'animation fonctionne, parfois, il saute directement à la deuxième fichier css et parfois, la page semble être le chargement mais rien ne s'affiche (c'est peut-être 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 travail en cours, site web: 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 devriez pas avoir des problèmes à mesure qu'ils devraient passer directement à la deuxième fichier css sans délai ou la durée.

Je suis intéressé à connaître les opinions sur la façon de moteur de recherche convivial de cette méthode est. Avec mon chapeau noir sur je suppose que je pourrais remplir une page avec des mots clés et appliquer une 9999s de retard sur son opacité.

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

Plus important, je voudrais vraiment savoir pourquoi ce n'est pas la même à chaque fois que le chargement de la page et comment je peux remédier à cela!

J'espère que cela peut générer des points de vue et opinions dans la mesure où rien d'autre!

InformationsquelleAutor Michael Walkling

Si quelqu'un d'autre a eu des problèmes à faire des transitions à la fois, voici ce que j'ai fait. J'avais besoin de texte à venir de haut en bas sur le 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;
}

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

InformationsquelleAutor s3c

CSS avec un retard de 3

quelques points à prendre ici:

de multiples animations dans un appel
nous créer un attendre animation qui vient de retards réel (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; }
}

InformationsquelleAutor Claudiu

-2

Pas vraiment, comme CSS est appliqué dès que possible, mais les éléments pourraient ne pas être encore dessinés. Vous pouvez deviner un délai de 1 ou 2 secondes, mais ce ne sera pas regarder à droite pour la plupart des gens, en fonction de la vitesse de leur connexion internet.

En outre, si vous voulez quelque chose de fade par exemple, il faudrait CSS qui cache la livraison de contenu. Si l'utilisateur n'a pas de transitions CSS3 alors qu'ils n'auraient jamais le voir.

Je vous recommande d'utiliser jQuery (pour la facilité d'utilisation +, vous pouvez ajouter des animations pour d'autres Samu) 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. Ceci a l'avantage de permettre l'utilisation d'animer la place de la deuxième CSS dans les navigateurs existants si nécessaire.
- Pourquoi cette réponse acceptée? Il n'a pas vraiment quoi que ce soit que la question posée. Simplement (et très rapidement, parfois de manière imperceptible) commence l'élément invisible, attend la petite fraction de seconde (200 ms) alors instantanément rend à nouveau visible. Ce n'est pas un fondu, dernière, j'ai vérifié.
- Vous devez inclure une transition css sur le #id_to_fade in, si je suis d'accord, ça n'est pas clair à partir de la réponse.
- comme, en ajouter un autre .css({transition: 'opacité 2s'}) pour le jQuery appel? Ou tout simplement dans votre css? J'ai le sentiment que je vais me sentir comme ce est une question stupide...
- C'est OK – j'aurais dû mettre en place une démo vraiment. Dans le CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; } + -o-,-moz- préfixes ainsi.
- Ok, Merci beaucoup, Monsieur!
- Cela ne devrait pas être accepté de répondre, en utilisant les images clés est le chemin à parcourir.
- Il a dit qu'il ne serait pas utiliser les Images Clés si les, @Chris Crachats solution est la meilleure façon de le faire ici.
- Il est intéressant de noter que j'ai répondu à cette question, en 2011, quand les choses n'étaient pas là où ils sont - des images-clés ont été mal pris en charge et souvent mauvais framerate et à ce moment, personne n'avait produit une démo où il n'y avait pas un fouc.
InformationsquelleAutor Rich Bradshaw

Vous devez vous connecter pour publier un commentaire.

Regardons un Exemple...

Décomposer...