CSS アニメーションで表示プロパティと不透明度プロパティの両方をスムーズに移行するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS アニメーションで表示プロパティと不透明度プロパティの両方をスムーズに移行するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-02 16:37:31

オリジナル

701 人が閲覧しました

How to smoothly transition both display and opacity properties in CSS animations?

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

CSS アニメーションでは、表示プロパティと不透明度プロパティの両方を同時に遷移するのが難しい場合があります。これは、次のコードスニペットに見られるように、ホバー時の表示と不透明度の値を変更して要素を表示しようとすると明らかになります。

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

ログイン後にコピー

このコードは、表示プロパティの遷移に失敗し、突然表示されます。要素の外観。両方のプロパティのスムーズな遷移を実現するには、次の手法をお勧めします。

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

ログイン後にコピー

このアプローチでは、CSS アニメーションの fadeInFromNone を利用して、両方のプロパティの遷移を制御します。アニメーションは、要素が非表示で完全に透明になった状態で開始されます (表示: なし、不透明度: 0)。次に、要素を一時的に表示しますが、透明度を維持して (表示: ブロック; 不透明度:0)、表示遷移をトリガーします。最後に、要素は完全に表示され、不透明になります (表示: ブロック; 不透明:1)。表示と不透明度のトランジションは、アニメーションルールのタイミングとイージング関数を調整することでカスタマイズできます。

以上がCSS アニメーションで表示プロパティと不透明度プロパティの両方をスムーズに移行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。