css3 animation de transition sur la charge?

Question

css3 animation de transition sur la charge?

Demandé el 24 de Juillet, 2011: Quand la question a-t-elle été
68352 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

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.

Demandé el 24 de Juillet, 2011 par Jens Törnell

Answer 1

5 Réponses

Answer 2

554voto

Chris Spittles Points 2466

Contrairement aux autres réponses ici, vous pouvez exécuter une CSS animation de chargement de page sans utiliser de JavaScript; vous avez juste à utiliser CSS3 images clés.

Voici une démonstration d'un menu de navigation coulissantes en place à l'aide de CSS3 uniquement: DÉMO

Voici le code:

header {
    background: #000;
    color: #fff;
    height: 20px;
    position: relative;
    padding: 10px;

    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;

    animation-name: dropHeader;
    animation-iteration-count: once;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}
header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
header ul li{
    display: inline-block;
    margin-right: 20px
}
@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateY(-40px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateY(-40px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropHeader {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
    }
}


/* Added for aesthetics */

body {
    margin: 0; 
    font: normal 14px "Segoe UI", Arial, Helvetica, Sans Serif;
}
a {
     color: #eee;
     text-decoration: none;
}

<header>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</header>

Vous pouvez faire toutes sortes de choses intéressantes, comme un glissement dans le contenu, ou en attirant l'attention sur les zones.

Voici ce que le W3C a à dire: http://www.w3.org/TR/css3-animations/#keyframes

Répondu el 28 de Septembre, 2012 par Chris Spittles (2466 Points )

Answer 3

37voto

Rolf Points 922

Très peu de javascript est nécessaire:

window.onload = function(){
    document.body.setAttribute("class","loaded");
}

Avertissement: qui va enlever toute la classe qui est déjà mis sur la balise body.

Si vous avez besoin d'autres classes sur la balise body, vous pouvez donc quelque chose comme cela dans le corps de la fonction au lieu de cela, ajouter "chargé" de la classe à ce qui est déjà là:

document.body.setAttribute("class", document.body.getAttribute('class') + " 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;
    }

Exemple: http://weknowtoomuch.com/

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.setAttribute('class','loaded')">

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

Répondu el 7 de Juillet, 2013 par Rolf (922 Points )

Answer 4

6voto

freedompeace Points 4717

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

La réponse est "pas vraiment".

Le CSS est une couche de présentation, n'est pas fonctionnel. Il n'a pas la moindre conscience de ce qui se passe ou quand, mais il est utilisé simplement pour ajouter une couche de présentation à 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 à l' body ou quelque chose à activer un peu de CSS.

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

Nous sommes ici 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 rendre progressivement, de sorte que notre dernier élément sera rendu en dernier, et donc ce CSS sera activé.

Répondu el 24 de Juillet, 2011 par freedompeace (4717 Points )

Answer 5

1voto

gar_onn Points 1736

démarrer avec passez de corps qu'Il va commencer quand d'abord la souris se déplace sur l'écran, la sorcière est mostely moins d'une seconde après l'arrivée, le problème ici c'est qu'il va s'inverser lorsque ouit de 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

Répondu el 24 de Juillet, 2011 par gar_onn (1736 Points )

Answer 6

0voto

Michael Walkling Points 54

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 encore, 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!

Répondu el 18 de Juillet, 2012 par Michael Walkling (54 Points )

css3 animation de transition sur la charge?

Réponses

Voici le code:

Questions en vedette

Top Tags

Prograide.com

Powered by:

css3 animation de transition sur la charge?

Réponses

Voici le code:

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: