CSSのkeyframesで100%の時点を維持したい

###前提・実現したいこと
JavaScript無効化対策として#JSNGのHTML要素を作りました。
以下のようにしてJavaScriptの有効判定に用いるつもりです。

jQuery
1// 読み込み終わった場合（=JavaScriptが有効な場合）は削除する
2$(window).on('load',function(){
3	$('#JSNG').remove();
4}

この#JSNGについて、「非表示で3秒待ち、1秒かけてふわっと表示し、表示しっぱなし」というアニメーションを実現したいです。

※なぜ3秒待つかというと、JavaScriptが有効のときにも一瞬だけ#JSNGが表示されてしまうためです。余裕をもって3秒くらいは非表示の状態で、それでも.remove();されなければ#JSNGを表示したいと考えました。

###発生している問題
しかし、最後が「表示しっぱなし」でなく「通常CSSのopacity: 0;」が効いて終わってしまいます。

###該当のソースコード

html
1<body>
2	<div id="JSNG">
3		<p>JavaScriptが無効です</p>
4	</div>  
5</body>

css
1#JSNG {
2    padding: 10px;
3    position: fixed;
4    inset: 0 0 0 0;
5    background: gray;
6    color: white;
7    opacity: 0;
8    animation: JSNG 1s ease 3s 1 normal;
9    -webkit-animation: JSNG 1s ease 3s 1 normal;	
10}
11@keyframes JSNG { 
12    0% {opacity: 0}
13    100% {opacity: 1}
14}
15@-webkit-keyframes JSNG {
16    0% {opacity: 0}
17    100% {opacity: 1}
18}

###試したこと
最後を「表示しっぱなし」にしたいので、通常CSSを逆にopacity: 1;にしましたがこれは最初から表示されてしまい、最後にチラつくだけでした。

またanimationの指定をeaseからease-outにしましたが変化なしでした。（「out」が「最後の状態で止まる」みたいな意味かと思ったんですけど…）

###<noscript>について
上記のCSSよりも正式な方法？なのでしょうか。<noscript>を試しました。

JavaScriptを無効化してアクセスしてFirefox開発ツールで見ますと、
以下のように文字が薄く、非表示のときの状態でした。
画面は真っ白で、アラートも出ません。

有効にしたらアラートは出ます。

なぜ無効にしたときに<noscript>の中身が表示されないのでしょうか。
使用上の注意やよくあるミス、または間違っている部分などございましたら教えて頂けますでしょうか。

行動規範の内容に同意します

回答2件

animation-fill-modeを設定してみてください。
また最後のキーフレームはanimation-directionとanimation-iteration-countの値によって変わります。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

animationは8つのプロパティを一括指定するプロパティです。
たくさんあって大変かもしれませんが、希望される表現のような複雑なアニメーションを設定したい場合はすべてのプロパティを理解しておいたほうが良いと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations
https://developer.mozilla.org/ja/docs/Web/CSS/animation

ちなみにeaseとかease-outの部分はanimation-timing-functionです。

また「JSの無効化対策」等の場合は、noscript要素というものがありますので参考までに見てみてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/noscript

もし調べてみてもできない場合はここで追加で質問してください。

投稿2021/02/28 12:10

mattari_panda

総合スコア429

nikuatsu

2021/02/28 12:28

丁寧にたくさんのリンクをありがとうございます。CSSの方法は仰る記述で解決できました。このプロパティの種類はきついですね…笑さて最後に教えて頂いた<noscript>の方につきましてはうまく動作せず、質問に加筆させて頂いたのですが、もしお時間ございましたらこちらのアドバイスも頂戴できませんでしょうか。

行動規範の内容に同意します

ベストアンサー

animation-fill-modeでアニメーション前後のスタイルを設定できます。

animation-fill-mode - CSS: カスケーディングスタイルシート | MDN

animation で一括指定してますので、最後に both を追加すればいいでしょう。

css
1#JSNG {
2    padding: 10px;
3    position: fixed;
4    inset: 0 0 0 0;
5    background: gray;
6    color: white;
7    opacity: 0;
8    animation: JSNG 1s ease 3s 1 normal both;
9    -webkit-animation: JSNG 1s ease 3s 1 normal both;    
10}