CSSでanimationが始まる前は非表示にする設定方法

Question

いつもお世話になっております。

animationプロパティを使って、
上から下にフェードインしてくるアニメーションを実現したいのですが、

animation-delay を、たとえば1sで設定すると

指定した要素は最初「表示」された状態で、
1秒たってから改めて非表示になってフェードインするアニメーションになってしまいます。

これを

アニメーションが始まる前は「非表示」の状態で
1秒たったらフェードインしてきて表示のまま固定

という動作にするにはどのように設定すると良いのでしょうか。

現在設定しているのは以下のような状態です。

/* 「TopToBottom」の動作内容 */
@keyframes TopToBottom {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(-20px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 「TopToBottom」を適用する箇所 */
.effect-fade {
  animation-duration: 2s;/* アニメーション時間 */
  animation-delay : 1s;/* 変化開始の時間 */
  animation-name: TopToBottom;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
}

<div class="copy effect-fade">
<h1>1秒後にフェードインしながら上から下に動かしたい要素</h1>
</div>

どうぞご教授のほどよろしくおねがいします。

Answer 1

/* 「TopToBottom」の動作内容 */
@keyframes TopToBottom {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(-20px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 「TopToBottom」を適用する箇所 */
.effect-fade {
  opacity: 0;/* ここを追加 */
  animation-duration: 2s;/* アニメーション時間 */
  animation-delay : 1s;/* 変化開始の時間 */
  animation-name: TopToBottom;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
  animation-fill-mode: forwards; /*これで値を保持*/
}

サンプル
animation fill mode / MDN

Comments

[Novz]

asuchi0819様、ありがとうございます！！

animation-fill-mode: forwards; /*これで値を保持*/

このプロパティを知らずにおりました。
本当にありがとうございます。

実装してみたところ、期待通りのどうさになりました。
ベストアンサーにさせていただきます。感謝しております。

[kyoya0819]

解決したようで何よりです。
ここは、推奨の話なのですが一つ一つ指定するよりもMDNに書いてあるようにanimation: ....と書く方が楽かと思います。