jQuery / JavaScriptが無効の環境でも表示を保証するには


実際に動かしたい内容としては[jQuery /
JavaScriptで、ロード画面を表示させたい](https://ja.stackoverflow.com/questions/510/jquery-
javascript%E3%81%A7-%E3%83%AD%E3%83%BC%E3%83%89%E7%94%BB%E9%9D%A2%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84)とほぼ同じで、以下のことを行いたいのですが、

  1. HTML読み込み完了後まで要素を非表示
  2. 完了後にアニメーションとともに要素を表示する

要素にclassで`display:
none;`を付けた状態にしておき、読み込み完了後にjQueryの`toggleClass`で外して表示するという方法で目的を達成することができます。  
ですが、この場合の問題点としてJavaScriptが無効の時に読み込みが完了しても要素が表示されないという点が上げられます。

なるべくCSSでのアニメーションに依存（しなくてもOK）しながらJavaScriptが使用できない環境でも表示を保証するにはどうしたら良いのでしょうか。

* * *

**追記:**

`<noscript>`を使って以下の様なコードで表示は保証されますが、この場合記述量が2倍近くに膨れ上がり、またSEO的にも悪いのでこのような方法を避けたいです。

[code]

    <div id="wrapper" class="is-hidden">
      <h1>TEST</h1>
      <p>messege</p>
    </div>
    <noscript>
      <div id="wrapper">
        <h1>TEST</h1>
        <p>messege</p>
      </div>
    </noscript>
    
[/code]

* * *

**実際に動かしたいアニメーションの例：**

![実際に動かしたいアニメーションの例](https://i.stack.imgur.com/YZDuc.gif)

[code]

    $(window).load(function() {
            $("#wrapper").toggleClass("is-hidden animated fadeInDown");
          });
[/code]

[code]

    .is-hidden {
          display: none;
        }
    
    /* Animate.css */
    .animated {
      -webkit-animation-duration: 1s;
              animation-duration: 1s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
    }
    @-webkit-keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }
    
    @keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }
    
    .fadeInDown {
      -webkit-animation-name: fadeInDown;
              animation-name: fadeInDown;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="wrapper" class="is-hidden">
      <h1>TEST</h1>
      <p>messege</p>
    </div>
[/code]



[code]

    シンプルにこれだけで良くない？
    
     <style> /* デフォルトは非表示 */
      .test { display: none;}
     </style>
    
     <noscript>
      <style> /* cssでは呼び出し方法とセレクターが同じであれば後から読み込まれた方が有効になる */
       .test { display: block;}
      </style>
     </noscript>
    
     <div class="test" >
      TEST
     </div>
[/code]



[code]

    シンプルにこれだけで良くない？
    
     <style> /* デフォルトは非表示 */
      .test { display: none;}
     </style>
    
     <noscript>
      <style> /* cssでは呼び出し方法とセレクターが同じであれば後から読み込まれた方が有効になる */
       .test { display: block;}
      </style>
     </noscript>
    
     <div class="test" >
      TEST
     </div>
[/code]

