запуск анимации css3 после полной загрузки страницы

#animation #css

#Анимация #css

Вопрос:

Кто-нибудь знает, как запустить анимацию 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>

1. спасибо за ваш ответ, но код для анимации находится на моей странице css, как бы мне включить мой css в функцию?

2. $(документ). готово (функция(){…}) не ждите загрузки изображений. Я бы предложил вместо этого $(window).load(function(){…}).

3. пожалуйста, измените на .element-to-animate, если это должен быть класс, как вы сказали. не хотелось бы, чтобы новичка это смутило.

Ответ №2:

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

Ответ №3:

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

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

Ответ №4:

 .bodyclass div{
    some animation css code
}

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

Ответ №5:

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

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

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

Ответ №6:

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

CSS:

 body {
   display: none;
}

JS:

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

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

CSS:

 body {
   visibility: hidden;
}

JS:

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

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

Возможно, это могло бы кому-то помочь.