アニメーション要素に「display: none;」がある場合、CSS でスライド アニメーションを作成するにはどうすればよいでしょうか?

表示と連動した CSS アニメーション: なし

「main-div」が表示の後にスライドインする CSS アニメーションを作成したいと考えています。指定された期間を延長し、パス内の他の div をプッシュダウンします。ただし、「main-div」の「display」プロパティを「none」に設定すると、アニメーションがトリガーされなくなります。

この制限を克服するには、「display: none;」間で直接アニメーション化することはできません。および「表示: ブロック;」または「高さ: 0;」の間そして「高さ: 自動」。代わりに、div の高さを手動で指定する必要があります。

バニラ CSS を使用した例を次に示します:

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

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

このコードでは、「メイン画像」の高さを明示的に設定します。最初は div を 0 ピクセルに設定し、事実上非表示にします。 「オーバーフロー: 非表示」

次に、CSS アニメーションを使用して、初期の高さ 0 から目的の高さ 300 ピクセルまでスムーズに移行します。 「animation-delay」プロパティにより、アニメーションが 3.5 秒の遅延後に開始されるようになります。

このアプローチを使用すると、「display: none;」を使用せずにスライド アニメーションを作成できます。 CSS が提供するスムーズな移行と正確なタイミングを維持しながら。

以上がアニメーション要素に「display: none;」がある場合、CSS でスライド アニメーションを作成するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。