css3 animation de transition de la charge?

StackOverflow https://stackoverflow.com/questions/6805482

Question

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

C'est un peu ce que je veux, mais à la page charge:

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

Ce que je trouve à ce jour

  • CSS3 transition à retard, un moyen d'effets de retard sur éléments. ne fonctionne que sur le vol stationnaire.
  • CSS3 Keyframe , les travaux sur la charge mais sont lents extremly. Pas utile à cause de cela.
  • transition CSS3 est assez rapide, mais ne sont pas animés de la charge de la page.
Était-ce utile?

La solution

peut lancer un CSS animation sur chargement de la page sans utiliser JavaScript; il vous suffit d'utiliser CSS3 images clés .

Look Let un exemple ...

Voici une démonstration d'un menu de navigation glisser en place avec CSS3 uniquement: 

@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écomposer ...

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 le bord gauche de l'écran par sa largeur et à la fin sera en place ».

La deuxième partie appelle cette animation slideInFromLeft: 

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

Au-dessus est la version abrégée, mais voici la version verbeux 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 les zones.

Voici ce que W3C a à dire.

Autres conseils

Très peu 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 est intéressant de souligner qu'il ya une solution facile avec une ligne de Javascript.

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

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

C'est tout le code JavaScript qui est nécessaire.

Je crois que j'ai trouvé une sorte de travail autour de la question OP - au lieu d'un début de transition de « on.load » de la page - j'ai trouvé que l'utilisation d'une animation pour un fondu d'opacité dans le même effet, (I était à la recherche de la même chose que OP).

Je voulais avoir le fondu corps du texte dans du blanc (même en arrière-plan du site) à la couleur de texte noir à la page charge - et je ne l'ai été le codage depuis lundi, donc je cherchais un style « on.load » code chose, mais ne sais pas encore 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 une raison quelconque, cela ne fonctionne pas pour .class de ne #id (du moins pas sur le mien)

Hope this helps - comme je sais que ce site me aide beaucoup

Eh bien, cela est une question délicate.

La réponse est "pas vraiment".

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

Par défaut, CSS / DOM ne fournit aucune sorte d'état « de la charge » pour CSS à utiliser. Si vous vouliez / ont pu utiliser JavaScript, vous souhaitez affecter une classe à body ou quelque chose d'activer certains CSS.

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

Nous fonctionnons sur l'hypothèse que « proche » 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 sommes également sur l'hypothèse que les navigateurs modernes rendent progressivement, de sorte que notre dernier élément sera rendu dernier, et donc ce CSS sera activé dernier.

Tout comme @ solution de Rolf, mais ignorer référence à des fonctions externes ou jouer avec classe. Si l'opacité est de rester fixé à 1 fois chargé, il suffit d'utiliser script en ligne directement l'opacité du changement par le style. Par exemple 

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

où CSS sytle "fadein" est définie par @ Rolf, définissant la transition et la mise en opacité à l'état initial (à savoir 0)

Le seul hic est que cela ne fonctionne pas avec des éléments SPAN ou DIV, car ils ne disposent pas de travail événement onload

il doit commencer par vol stationnaire de corps qu'il démarre lorsque la souris se déplace d'abord sur l'écran, qui est la plupart du temps dans une seconde après l'arrivée, le problème ici est qu'il renversera quand hors de l'écran. 

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

thats la meilleure chose que je peux penser à: http://jsfiddle.net/faVLX/

fullscreen: http://jsfiddle.net/faVLX/embedded/result/

Modifier voir les commentaires ci-dessous: Cela ne fonctionnera pas sur un appareil à écran tactile, car il n'y a pas vol stationnaire, de sorte que l'utilisateur ne verra pas le contenu à moins qu'ils appuyez dessus. - Rich Bradshaw

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

J'ai créé 2 feuilles de style CSS: la première est que je veux que le html style avant que l'animation ... et la seconde est que je veux la page pour regarder après l'animation a été réalisée.

Je ne comprends pas bien comment j'ai accompli cela, mais il ne fonctionne que lorsque les deux fichiers CSS (les deux dans la tête de mon document) sont séparés par javascript comme suit.

J'ai testé cela avec Firefox, Safari et Opera. Parfois, les œuvres d'animation, parfois, il saute directement au second fichier css et parfois la page semble être le chargement, mais rien ne s'affiche (peut-être il 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 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 devrait pas avoir de problèmes car ils doivent passer directement au deuxième fichier css sans délai ou la durée.

Je suis intéressé à connaître point de vue sur les moteurs de recherche cette méthode est. Avec mon chapeau noir sur je suppose que je pourrais remplir une page avec des mots clés et appliquer un retard 9999s sur son opacité.

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

Plus important encore, je voudrais vraiment savoir pourquoi ce ne correspond pas à 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 opinions si rien d'autre!

Si quelqu'un d'autre a eu des problèmes à faire deux transitions à la fois, voici ce que je faisais. Je avais besoin du texte à venir de haut en bas de la charge 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 je continuais d'essayer d'utiliser 2 déclarations de transition dans 1 sélecteur et la pensée (pas vraiment), il utiliserait les deux.

CSS seulement avec un retard de 3 s

quelques points à prendre ici:

  • plusieurs animations dans un appel
  • nous créons un attente animation qui retarde tout le réel (la seconde un 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; }
}

Pas vraiment, comme CSS est appliqué le plus tôt possible, mais les éléments pourraient ne pas tirer encore. Vous pouvez deviner un retard de 1 ou 2 secondes, mais cela ne regarderez pas bon pour la plupart des gens, en fonction de la vitesse de leur Internet.

En outre, si vous voulez effacer quelque chose, par exemple, il faudrait CSS qui cache le contenu à livrer. Si l'utilisateur ne voit pas les transitions CSS3 ils seraient alors jamais.

Je vous recommande d'utiliser jQuery (pour la facilité d'utilisation + vous voudrez peut-être ajouter une animation pour d'autres UAS) 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.
});

En plus des transitions ajoutées dans le CSS. Cela a l'avantage de permettre facilement l'utilisation de Animer au lieu de la deuxième CSS dans les navigateurs existants, si nécessaire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top