CSS 表示を突然変更しながら、不透明度のスムーズな移行を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS 表示を突然変更しながら、不透明度のスムーズな移行を実現するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-01 00:31:28

オリジナル

887 人が閲覧しました

How to Achieve Smooth Opacity Transitions While Abruptly Changing CSS Display?

CSS 表示と不透明度プロパティのスムーズなトランジションの作成

表示と不透明度をアニメーション化しようとしているときに問題が発生しました要素のプロパティを変更できますが、表示の変更が遷移を妨げています。表示プロパティが突然変化しながら不透明度がスムーズに変化するという望ましい結果を達成するには、次の解決策を利用できます:

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>

ログイン後にコピー

これコードでは、キーフレームを使用して不透明度をアニメーション化し、プロパティを個別に表示します。表示プロパティは、なしから 0% のブロックに突然変化しますが、不透明度は、指定されたイージング関数に従って 0.5 秒かけて 0 から 1 に滑らかに移行します。

以上がCSS 表示を突然変更しながら、不透明度のスムーズな移行を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。