それはあなたがあなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されている
.on-top {
position: absolute;
width: 100%;
text-align: center;
}
.animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
<body>
<div class="on-top animate fadeInDown">
I want this to appear centered, from the top and over all my content
</div>
<div id='content'>
...much complex html layout...bootstrap...wow
</div>
</body>
が含まれていることをリンクでこれを実現する方法を示します。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします(http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –
私はこれを投稿する前に多くのことを試しました... @Paulie_Dに感謝します:( – ibiza
...あなたは何を試しましたか?私たちは読者ではありません。あなたの研究*を表示する必要がありますので、 –