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

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 サイトの他の関連記事を参照してください。