début css3 animation après l'ensemble du chargement de la page

Ce que quelqu'un sait comment faire pour démarrer un css3 animation après le reste de la page se charge complètement (images et tout et tout)?

Je suis à l'aide d'un retard dès maintenant à imiter, mais ce n'est pas ce que je cherche.

Grâce

Peter

InformationsquelleAutor user127181 | 2011-04-24
  1. 21

    Qui est au-delà de la portée de CSS, mais il est assez simple à faire avec JQuery 

    $(document).ready(function() {/*You code here*/ }

    Ou en lire plus à ce sujet ici => http://api.jquery.com/ready/

    Placer votre code d'animation dans une classe, permet de le dire .animation

    Puis appeler cette classe sur l'élément que vous souhaitez animer à l'aide de JQuery .addclass() (http://api.jquery.com/addClass/)

    Quelque chose comme cela 

       <script type="text/javascript">
    $(document).ready(function() {
    $("#element-to-animate").addClass("animation"); 
    });
   </script>
    • merci pour votre réponse, mais le code pour les animations de vie sur ma page css, comment pourrais-je intégrer mon css dans la fonction?
    • $(document).ready(function(){...}) ne pas attendre pour les images chargées. Je suggère $(window).load(function(){...}) à la place.
    • veuillez modifier .élément à animer si c'est pour avoir une classe comme vous l'avez dit. détesterais pour un débutant d'être confus par ce.
    InformationsquelleAutor Maverick
  2. 2
       div
    {
    -webkit-animation-delay: 5s; 
     animation-delay: 5s;
    }
    • S'il vous plaît ajouter quelques explications pour votre réponse
    InformationsquelleAutor user3916054
  3. 1
    function atload() {dom_rdy()}window.onload=atload;

    De le coller sur le haut de votre js, et de travailler avec la fonction dom_rdy() il appelle lorsque le dom est prêt, sans jQuery et d'autres des tonnes de code.

    InformationsquelleAutor Maxim Aleksandrovich
  4. 1
    .bodyclass div{
    some animation css code
}

    Après le corps de la charge il suffit d'appliquer bodyclass à la balise body, puis tous les divs dans la page sera animables. Cette solution est efficace alors @Husar dit, parce que, nous avons besoin de rechercher seulement pour le corps de l'élément après le chargement de la page est complète, mais dans d'autres cas, nous avons besoin de changer tous les éléments nom de la classe qui a besoin d'animation.

    InformationsquelleAutor Rajkamal Subramanian
  5. 0

    $(window).load(function(){...})

    fonctionne très bien!

    Mais à utiliser uniquement si vous voulez des images de se charger.

    InformationsquelleAutor gitesh.tyagi
  6. 0

    @Mavericks solution fonctionne. Mais une solution beaucoup plus simple qui a fonctionné pour moi a été:

    CSS:

    body {
   display: none;
}

    JS:

    (function() {
    $('body').css('display', 'block');
})();

    ou vous pouvez utiliser afficher/masquer. Mais, l'animation est devenu buggy sur IE10 et IE11. Ainsi, j'ai changé le code pour spécifiquement pour ces navigateurs:

    CSS:

    body {
   visibility: hidden;
}

    JS:

    (function() {
    $('body').css('visibility', 'visible');
})();

    J'ai aussi trouvé ceci: https://css-tricks.com/transitions-only-after-page-load/

    Peut-être que ça pourrait aider quelqu'un.

    • S'il vous plaît laissez-moi savoir la raison, avant le vote, comme il a travaillé pour moi.
    InformationsquelleAutor rash.tay