CSS アニメーションは「display: none」に設定された要素でも機能しますか?

CSS アニメーションと要素の表示

最初に display: none を持つ要素で CSS アニメーションを使用しようとしました。これは要素を動的に表示および非表示にする簡単な方法のように思えるかもしれませんが、CSS の制限によってそれが妨げられます。

表示の問題: なし

CSS アニメーションは要素間の遷移を処理できません。表示: なしおよび表示: ブロック、または高さ: 0 と高さ: 自動の間。可能であれば高さをハードコーディングする必要があります。それ以外の場合は、JavaScript を使用する必要があります。

高さの設定

高さをハードコーディングできない状況では、オーバーフローを使用できます。 : hidden 要素を非表示にし、その高さを 0 に設定します。要素を表示する準備ができたら、オーバーフローを表示に戻し、高さを最大限にアニメーション化します。 extent.

コード例

CSS:

#main-image {
  height: 0;
  overflow: hidden;
  background: red;
  animation: slide 1s ease 3.5s forwards;
}

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

HTML:

<div>

この例では、オーバーフローします。 hidden は、要素の高さが 0 から 0 までアニメーション化されるときに、要素が非表示のままであることを保証します。 300px.

注: CSS の例ではバニラ CSS を使用しています。 Animate.css を使用している場合は、@keyframes ルールを対応する Animate.css クラスに置き換えることができます。

このアプローチにより、表示なしまたは jQuery に依存せずに要素をスムーズにアニメーション化でき、よりスムーズな遷移が実現します。より正確なタイミング制御。

以上がCSS アニメーションは「display: none」に設定された要素でも機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。