web-dev-qa-db-fra.com

Animation de transition CSS3 sur charge?

Est-il possible d'utiliser l'animation de transition CSS3 lors du chargement de 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'à présent

  • CSS3 transition-delay , un moyen de retarder les effets sur les éléments. Ne fonctionne qu'en vol stationnaire.
  • CSS3 Keyframe , fonctionne à la charge mais est extrêmement lent. Pas utile à cause de ça.
  • transition CSS est assez rapide mais n'anime pas au chargement de la page.
csscss3webkitcss-transitionscss-animations
163
Jens Törnell

Vous pouvez exécuter une animation CSS au 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 à l'aide de 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écompose-le ...

Les parties importantes ici sont l’animation des images clés appelée slideInFromLeft...

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

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

La deuxième partie appelle cette animation slideInFromLeft:

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

Ci-dessus, la version abrégée, mais voici la version commentée 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 du contenu ou attirer l'attention sur des zones.

Voici ce que le W3C a à dire.

396
Chris Spittles

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 connais la question "sans Javascript", mais je pense qu'il est utile de souligner qu'il existe une solution simple impliquant une ligne de code Javascript.

Il pourrait même s'agir de Javascript en ligne, quelque chose comme ça:

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

C'est tout le JavaScript nécessaire.

25
Rolf

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

Je voulais donc que le corps du texte passe du blanc (comme l’arrière-plan du site) au noir en couleur lors du chargement de la page - et que je ne code que depuis lundi, j’étais à la recherche d’un code 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 pas pour .class seulement #id (du moins pas sur le mien)

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

19
Lee John

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 simplement utilisé pour ajouter une couche présentation à différents "drapeaux" (classes, identifiants, états).

Par défaut, CSS/DOM ne fournit aucun type d'état "en charge" à utiliser par CSS. Si vous vouliez/pouviez utiliser JavaScript, vous alloueriez une classe à body ou à quelque chose d'activer du CSS.

Cela étant dit, vous pouvez créer un hack pour cela. Je vais donner un exemple ici, mais cela 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 supposons également que les navigateurs modernes affichent un rendu progressif. Ainsi, notre dernier élément restituera le dernier, et donc ce CSS sera activé en dernier.

5
foxy

commencez avec le survol du corps que cela commencera lorsque la souris se déplacera pour la première fois à l’écran, ce qui est généralement moins d’une seconde après son arrivée.

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, de sorte que l'utilisateur ne verra pas le contenu à moins de le toucher. - Rich Bradshaw

1
beardhatcode

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

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

où le type CSS "fadein" est défini par @ Rolf, définissant la transition et définissant l'opacité sur 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 actif

1
user3907296

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 manière dont je veux le style html avant l'animation ... et la seconde, la manière dont je souhaite que la page prenne en compte l'animation.

Je ne comprends pas bien comment j'ai accompli cela, mais cela ne fonctionne que lorsque les deux fichiers css (tous deux situés en tête de mon document) sont séparés par du code 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 (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 site Web sur les travaux en cours: http://www.hankins-design.co.uk/beta2/test/index.html

Peut-être que je me trompe, mais j’ai pensé que les navigateurs qui ne prennent pas en charge les transitions CSS ne devraient pas rencontrer de problèmes, car ils devraient passer directement au second fichier CSS sans délai ni durée.

Je suis intéressé de connaître les points de vue sur la façon dont cette méthode est conviviale pour les moteurs de recherche. Avec mon chapeau noir, je suppose que je pourrais remplir une page avec des mots-clés et appliquer un délai de 9999s 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 chargement de la page et comment je peux rectifier cela!

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

0
Michael Walkling