表示と不透明度の両方を変更するときにスムーズな CSS トランジションを作成するにはどうすればよいですか?

表示と不透明度の変更によるスムーズな CSS トランジションの作成

Web 開発の世界では、視覚的に魅力的でインタラクティブなユーザー インターフェイスを作成することが不可欠です。 CSS アニメーションはこれを実現する上で重要な役割を果たし、要素の異なる状態間をシームレスに遷移できるようにします。

CSS3 アニメーションを使用する場合、次のような複数のプロパティを遷移する必要がある状況に遭遇することは珍しくありません。不透明度と表示。ただし、表示プロパティを直接遷移すると突然変化する可能性があるため、これらのプロパティを組み合わせるのは難しい場合があります。

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

このコードは、要素をフェードインすることを目的としています。ホバー上の「子」クラス。ただし、表示プロパティを「none」から「block」に直接遷移すると突然の外観が作成されるため、正しく動作しません。

この問題に対処するには、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;
    }
}

このコードでは、「fadeInFromNone」キーフレーム アニメーションを使用して不透明度を 0 から 1 に移行すると同時に、表示プロパティを 1% で 'block' に設定します。突然の出現は避けてください。

以上が表示と不透明度の両方を変更するときにスムーズな CSS トランジションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。