Visibilidade pura da animação CSS com atraso
Estou tentando implementar alguma animação onLoadsem Javascript. JS é fácil, CSS é ... não.
eu tenho umdiv
que deveria estar emdisplay: none;
e deve serdisplay: block;
depois de 3 segundos. Muitos recursos me disseram que o Animate não funciona comdisplay
, mas deveria comvisibility
(que eu uso frequentemente em minha transição).
Certo, sei que tenho essa terrível função javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".js_only").hide();
setTimeout(function () {
$(".js_only").show();
}, 3000);
});
</script>
Eu tentei alguma animação em CSS, mas nenhum resultado ... nada parece funcionar.
Tenho poucas animações na minha página, mas apenas lutando com odisplay: none;
em animação.
@-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;
}
É importante como oculto, esse elemento não ocupa espaço.Eu criei um JSFiddle fazer bastante testes.
Minha principal preocupação é o SEO ... Não acho que a opção JS seja realmente boa para isso, e é por isso que eu gostaria de uma alternativa CSS pura. Também estou interessado em testar essas animações e ver onde estão esses limites (estou vendo um agora?). Meio que se divertindo com esse desafio.
Obrigado pela leitura, espero que alguém tenha uma resposta.