animation de transition css3 en charge?
Est-il possible d'utiliser l'animation de transition CSS3 lors du 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'à présent
- CSS3 transition-delay, un moyen de retarder les effets sur les éléments. Ne fonctionne que sur hover.
- CSS3 Keyframe , fonctionne en charge mais est extrêmement lent. Pas utile en raison de que.
- la transition CSS3 est assez rapide mais ne s'Anime pas lors du chargement de la page.
8 réponses
Vous pouvez exécuter une animationCSS lors du chargement de la page sans utiliser de JavaScript; il vous suffit d'utiliser des images clésCSS3 .
Regardons un exemple...
Voici une démonstration d'un menu de navigation glissant en place en utilisant CSS3 seulement:
@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écomposez-le...
Les parties importantes ici sont l'animation d'image clé que nous appelons slideInFromLeft...
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
...qui dit en substance "à la démarrer, l'en-tête sera sur le bord gauche de l'écran par sa largeur et à la fin sera en place".
La deuxième partie appelle cette animation {[5]:
animation: 1s ease-out 0s 1 slideInFromLeft;
Ci-dessus est 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.
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 dit "sans Javascript", mais je pense qu'il vaut la peine de souligner qu'il existe une solution facile impliquant une ligne de Javascript.
Il pourrait même être en ligne Javascript, quelque chose comme ça:
<body onload="document.body.className += ' loaded';">
C'est tout le JavaScript nécessaire.
Je pense que j'ai trouvé une sorte de travail pour la question OP - au lieu d'une transition qui commence.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).
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 n'ai codé que depuis lundi, donc je cherchais un ' on.load ' style thing code, mais je ne connais pas encore JS-alors ici est 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!
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 un présentation couche à différents "flags" (classes, id, états).
Par défaut, CSS / DOM ne fournit aucun type d'état "en charge" à utiliser par CSS. Si vous vouliez/étiez capable d'utiliser JavaScript, vous alloueriez une classe à body ou quelque chose pour activer du CSS.
Cet être dit, vous pouvez créer un hack pour cela. Je vais donner un exemple ici, mais il peut ou peut ne pas être applicable à votre situation.
, Nous fonctionnons sur l'hypothèse 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 sommes également sur l'hypothèse que les navigateurs modernes rendent progressivement, donc notre dernier élément rendra le dernier, et donc ce CSS sera activé en dernier.
Similaire à la solution de @ Rolf, mais ignorer la référence aux fonctions externes ou jouer 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 hic est que cela ne fonctionne pas avec les éléments SPAN ou DIV, car ils n'ont pas d'événement onload
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 à laquelle je peux penser: http://jsfiddle.net/faVLX/
Plein écran: http://jsfiddle.net/faVLX/embedded/result/
Modifier voir les commentaires ci-dessous:
Cela ne fonctionnera pas sur n'importe quel appareil à écran tactile car il n'y a pas survolez, de sorte que l'utilisateur ne verra pas le contenu à moins qu'ils ne le tapent. Riche En Bradshaw
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: le premier est comment je veux le style html avant l'animation... et la seconde est de savoir comment je veux que la page s'occupe de l'animation.
Je ne comprends pas complètement 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 suivre.
J'ai testé cela avec Firefox, safari et opera. Parfois, l'animation fonctionne, parfois elle saute directement au deuxième fichier css et parfois la page semble être en cours de chargement mais rien n'est affiché (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 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 supportent pas les transitions css ne devraient pas avoir de problèmes comme ils doivent passer directement au deuxième fichier css sans délai ni durée.
Je suis intéressé de connaître les points de vue sur la façon dont le moteur de recherche convivial cette méthode est. Avec mon chapeau noir, je suppose que je pourrais remplir une page avec des mots-clés et appliquer un délai de 9999 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, je je voudrais vraiment savoir pourquoi ce n'est pas cohérent chaque fois que la page se charge 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!
Pas vraiment, car CSS est appliqué dès que possible, mais les éléments peuvent ne pas être encore dessinés. Vous pouvez deviner un délai de 1 ou 2 secondes, mais cela ne semblera pas bon pour la plupart des gens, en fonction de la vitesse de leur internet.
En outre, si vous voulez fondu quelque chose dans par exemple, il faudrait CSS qui cache le contenu à livrer. Si l'utilisateur n'a pas de transitions CSS3, il ne le verra jamais.
Je recommande d'utiliser jQuery (pour la facilité d'utilisation + vous pouvez je souhaite ajouter de l'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.
});
Avec les transitions ajoutées dans le CSS. Cela a l'avantage de permettre facilement l'utilisation d'animate au lieu du second CSS dans les navigateurs hérités si nécessaire.