ホバー時に CSS の「display」プロパティと「opacity」プロパティをシームレスに遷移するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホバー時に CSS の「display」プロパティと「opacity」プロパティをシームレスに遷移するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-10-30 06:16:27

オリジナル

936 人が閲覧しました

How to Seamlessly Transition CSS `display` and `opacity` Properties on Hover?

CSS の表示プロパティと不透明度プロパティをシームレスに遷移する

CSS3 アニメーションの領域では、複数のプロパティ、特に表示と不透明度を遷移しようとすると問題が発生します。強調表示したように、ホバー中に表示プロパティが変更されると、不透明度のスムーズな移行が妨げられます。

このジレンマを解決するために、創造的な解決策が考案されました。 @keyframes ルールを利用することで、基本的に、表示プロパティの遷移の外観を模倣するカスタムアニメーションを定義します。秘訣は、要素の不透明度を制御しながら、「display: none」から「display: block」にスムーズに移行することです。

Michael が提示した修正された CSS コードは、エレガントなソリューションとして機能します。

<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;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}</code>

ログイン後にコピー

このコードでは、@keyframes ルールは、要素の不透明度を 0 から 1 に遷移させると同時に表示プロパティを「none」から「block」に設定する名前付きアニメーション「fadeInFromNone」を定義します。タイミングとイージング機能は必要に応じて調整できます。

このソリューションを実装すると、表示プロパティと不透明度プロパティの両方を簡単に移行でき、ホバー時に滑らかで視覚的に魅力的な効果を保証できます。

以上がホバー時に CSS の「display」プロパティと「opacity」プロパティをシームレスに遷移するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。