Я пытаюсь реализовать анимацию onLoadбез JavaScript, JS это просто, CSS это ... нет.

у меня естьdiv который должен быть наdisplay: none; и должно бытьdisplay: block; через 3 секунды. Много ресурсов сказал мне, что анимация не работает сdisplay, но должен сvisibility (который я часто использую в моем переходе).

Правильно знаю, у меня есть эта ужасная функция JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        $(".js_only").hide();
        setTimeout(function () {
            $(".js_only").show();
        }, 3000);
    });
</script>

Я попробовал анимацию в CSS, но безрезультатно ... ничего не работает.

У меня мало анимации на моей странице, но я просто борюсь сdisplay: none; на анимацию.

@-moz-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@-webkit-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }
}

.css_only {
    -moz-animation-name: showEffect;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 2.3s;

    -webkit-animation-name: showEffect;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 2.3s;

    animation-name: showEffect;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2.3s;
}

Важно как скрытый, этот элемент вообще не занимает места.Я создал JSFiddle сделать вполне тесты.

Моя главная задача - SEO ... Я не думаю, что JS-вариант действительно хорош для этого, поэтому я хотел бы использовать чистую CSS-альтернативу. Также интересно проверить эти анимации и посмотреть, где эти ограничения (я вижу один прямо сейчас?). Что-то вроде удовольствия от такого вызова.

Спасибо за чтение, надеюсь, у кого-то есть ответ.