通知バーを下からスライドさせます。

Question

ページの下からスライドする小さな横の通知バーがあります。

これはうまくいきますが、ページを開くとすばやく点滅し、消えてから上にスライドします。

移行が行われる前に表示されないように変更するにはどうすればよいですか？ここ

#notificationBarBottom { 
 
    position: fixed; 
 
    z-index: 101; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: #5cb85c; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    line-height: 2.5; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 0 0 5px black; 
 
    -moz-box-shadow: 0 0 5px black; 
 
    box-shadow: 0 0 5px black; 
 
} 
 
@-webkit-keyframes slideDown { 
 
    0%, 100% { 
 
    -webkit-transform: translateY(0px); 
 
    } 
 
    10%, 
 
    90% { 
 
    -webkit-transform: translateY(510px); 
 
    } 
 
} 
 
@-moz-keyframes slideDown { 
 
    0%, 100% { 
 
    -moz-transform: translateY(0px); 
 
    } 
 
    10%, 
 
    90% { 
 
    -moz-transform: translateY(510px); 
 
    } 
 
} 
 
.cssanimations.csstransforms #notificationBarBottom { 
 
    -webkit-transform: translateY(510px); 
 
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards; 
 
    -moz-transform: translateY(510px); 
 
    -moz-animation: slideDown 2.5s 1.0s 1 ease forwards; 
 
}

<div id="notificationBarBottom">Hello, human!</div>

Jsfiddleデモ：https://jsfiddle.net/cnfk36jd/（残念ながら問題が表示されません）。ここでは、 "ちらつき"を見ることができるページですhttp://www.whycall.me/bannerTest.html

私はここで助言を試みました：https://css-tricks.com/pop-from-top-notification/とtranslateY値をかなり微調整しましたが、それ以外は何をするか分かりません。

は、あなたがこのコードを書いているCSSファイルが遅すぎるビットと呼ばれているので、私はこれが起こっていると思うあなたの助け

Answer 1

よりも、このCSSファイルを呼び出してみてください、それはちらつき。

bottom: -510px;の下に置き、スライドさせます。

更新フィドル：https://jsfiddle.net/cnfk36jd/1/

#notificationBarBottom { 
 
    position: fixed; 
 
    z-index: 101; 
 
    bottom: -510px; 
 
    left: 0; 
 
    right: 0; 
 
    background: #5cb85c; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    line-height: 2.5; 
 
    overflow: hidden; 
 
    box-shadow:   0 0 5px black; 
 
} 
 
@keyframes slideDown { 
 
    0% { transform: translateY(0px); } 
 
    100% { transform: translateY(-510px); } 
 
} 
 
#notificationBarBottom { 
 
    animation: slideDown 2.5s ease forwards; 
 
} 
 
#close { 
 
    display: none; 
 
}

<div id="notificationBarBottom">Hello, human!</div>

サイドノート：あなたが戻って

Answer 2

いただきありがとうございます。したがって、あなたのHTMLページに

、要素の初期位置が表示され、その後、ページのロード時に、最初にそれを隠すためにでキックを翻訳し、以前の他のCSSやJSファイル