jquery - CSS キーフレーム アニメーション: アニメーションの開始前に要素を非表示にする

Question

要素を非表示にし、x 秒後にキーフレーム アニメーションでフェードインする CSS の方法はありますか? または、そのために JavaScript/jQuery が必要ですか? どうやってするの？

現時点では、アニメーションが開始する前にも表示されます。設定するとopacity: 0;、アニメーションが完了した後、アニメーションはその値に戻ります。

フィドル

Answer 1

あなたは近くにいます。簡単な方法は、最後のキーフレームを保持するものを追加するだけanimation-fill-mode: forwards;で、この場合は div を表示したままにすることです。

これは、アニメーションが 4 秒後に開始され (指定したとおり)、元の状態に戻るのではなく、div を表示したままにするFiddleの更新バージョンです( opacity: 0;)。

それが役立つことを願っています!

Answer 2

を使用する場合@keyframesは、キーフレームを使用して遅延を適用します。

4 秒の遅延と 1 秒のアニメーション期間を、キーフレームが 80% から始まる 5 秒のアニメーションに変更できます。

フィドルを参照してください。

@-webkit-keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

div {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 150px;
    right: 150px;
    background-color: black;
    -webkit-animation: slidein 5s ease 1 normal;
       -moz-animation: slidein 5s ease 1 normal;
         -o-animation: slidein 5s ease 1 normal;
            animation: slidein 5s ease 1 normal;
}

Answer 3

アニメーションを不透明度を使用したフェードインとは異なるものにしたい場合は、幅をアニメーション化します。opacity:1;アニメーションの 1% に配置できます。

@keyframes slidein {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}

opacity:1;アニメーションの最後、つまり 100% でを繰り返す必要があることに注意してください。そうしないと、その要素がフェードアウトします。

Answer 4

あなたはおそらくCSS トランジションの使用を検討しています - このページにはおそらくあなたが探している答えがあります。