CSS 表示と不透明度の変更を同時にアニメーション化するにはどうすればよいですか?

CSS 表示プロパティと不透明度プロパティの遷移

表示プロパティと不透明度プロパティの両方を使用して CSS 要素をアニメーション化しようとすると、困難になることがあります。標準の CSS トランジション プロパティでは数値のアニメーションのみが許可されているため、表示の変更と互換性がありません。

ただし、解決策は CSS キーフレーム アニメーションを活用することです。カスタム キーフレーム アニメーションを作成することで、表示プロパティと不透明度プロパティの両方の遷移を同時に調整できます。

提供された CSS コードでは、「fadeInFromNone」という名前のキーフレーム アニメーションが導入されています。まず、表示をなし、不透明度を 0 に設定して、要素を効果的に非表示にします。アニメーションの 1% では、表示がブロックに設定され、要素が表示されますが、不透明度は 0 のままです。これにより、要素が透明からフェードインした外観が作成されます。アニメーションは 100% で終了し、要素は完全に表示され不透明になります。

このアニメーションを使用するには、親要素のホバー状態に適用します。更新されたコードは次のとおりです。

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}</code>

このソリューションにより、表示プロパティと不透明度プロパティの両方をシームレスに移行でき、目的のアニメーション効果を実現できます。

以上がCSS 表示と不透明度の変更を同時にアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。