Начать анимацию css3 после загрузки всей страницы

Ответ 1

Это выходит за рамки CSS, но это очень просто сделать с JQuery

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

Или читайте об этом здесь = > http://api.jquery.com/ready/

Поместите код анимации в класс, скажем .animation

Затем вызовите этот класс в элементе, который вы хотите оживить, используя JQuery.addclass() (http://api.jquery.com/addClass/)

Что-то вроде этого

   <script type="text/javascript">
    $(document).ready(function() {
    $("#element-to-animate").addClass("animation"); 
    });
   </script>

Ответ 2

function atload() {dom_rdy()}window.onload=atload;

Вставьте его в верхнюю часть вашего js и работая с функцией dom_rdy(), он вызывается, когда dom готов, без jQuery и других тонны кода.

Ответ 3

.bodyclass div{
    some animation css code
}

После загрузки тела просто примените bodyclass к тегу body, тогда все div на странице будут анимированными. Это решение эффективно тогда, когда @Husar сказал, потому что нам нужно искать только элемент body после завершения загрузки страницы, но в другом случае нам нужно изменить все имена классов элементов, которые необходимо анимировать.

Ответ 4

   div
    {
    -webkit-animation-delay: 5s; 
     animation-delay: 5s;
    }

Ответ 5

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

отлично работает!

Но используйте только тогда, когда вы хотите, чтобы изображения загружались.

Ответ 6

Решение @Mavericks работает. Но гораздо более простое решение, которое сработало для меня, было:

CSS

body {
   display: none;
}

JS:

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

или вы можете использовать show/hide. Но анимация стала ошибкой в ​​IE10 и IE11. Итак, я изменил код специально для этих браузеров, чтобы:

CSS

body {
   visibility: hidden;
}

JS:

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

Я также нашел это: https://css-tricks.com/transitions-only-after-page-load/

Возможно, это может помочь кому-то.