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

実際に動かしたい内容としてはjQuery / JavaScriptで、ロード画面を表示させたいとほぼ同じで、以下のことを行いたいのですが、

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

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

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

---

追記:

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

<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>

---

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

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

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

<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>