CSS で「display: none」を使用して Div をアニメーション化するにはどうすればよいですか?

CSS アニメーションと表示なし

CSS を使用して div をアニメーション化しようとする場合、表示プロパティの制限を理解することが重要です。表示中: なし。プロパティは要素をビューから非表示にすることができますが、ドキュメント フローから要素を削除するわけではありません。これにより、ページ上のスペースを占める要素をアニメーション化するときに問題が発生する可能性があります。

目的の効果を実現するには、メイン div を表示から直接切り替えることはできません。 none;表示するには: ブロック;。代わりに、メイン div の高さを 0 に設定し、overflow: hidden; を使用する必要があります。最初は非表示にします。次に、メイン div をスライドインするときが来たら、div の高さを希望の値にアニメーション化できます。

例を示します:

#main-div {
    height: 0;
    overflow: hidden;
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

#main-div.fadeInDownBig {
    height: 375px;
}

これにより、メイン div が 3.5 秒後にスライドインし、ビューポートに入るときに他の div がページの下に押し込まれます。

このテクニックは、不透明度などの他の属性でも機能することに注意してください。たとえば、不透明度を 0 から 1 に徐々に増やすことで、div をフェードインできます。

以上がCSS で「display: none」を使用して Div をアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。