ch versuche eine Animation auf Load zu implementierohne Javascript. JS ist einfach, CSS ist ... nicht.

Ich habe eindiv die sollte auf @ sedisplay: none; und sollte @ sedisplay: block; nach 3 Sekunden. Viele Ressourcen haben mir gesagt, dass animieren nicht mit @ funktionierdisplay, sollte aber mitvisibility (was ich in meinem Übergang oft benutze).

Recht, ich habe diese schreckliche Javascript-Funktion:

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

Ich habe einige Animationen in CSS ausprobiert, aber kein Ergebnis ... nichts scheint zu funktionieren.

Ich habe nur wenige Animationen auf meiner Seite, habe aber nur Probleme mit demdisplay: none; auf Animation.

@-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;
}

Es ist wichtig, da versteckt, nimmt dieses Element überhaupt keinen Platz ein.Ich habe eine JSFiddle erstellt ziemlich Tests machen.

Mein Hauptanliegen ist SEO ... Ich denke nicht, dass die JS-Option wirklich gut ist, weshalb ich eine reine CSS-Alternative möchte. Auch interessiert, diese Animationen zu testen und zu sehen, wo diese Grenzen sind (sehe ich gerade eine?). Ein bisschen Spaß an einer solchen Herausforderung.

Danke fürs Lesen, hoffe, jemand hat eine Antwort.