CSSのみを使用してスライドイントランジションを作成するにはどうすればよいですか?

純粋な CSS を使用してスライドイン トランジションを追加する方法

Web デザインでは、視覚的に魅力的なトランジションを作成すると、ユーザー エクスペリエンスを向上させることができます。人気のあるエフェクトの 1 つはスライドイン トランジションです。これは、トリガーされると要素が画面外から目的の位置に移動します。このチュートリアルでは、JavaScript を使用せずに CSS を使用してこの効果を実現する方法を説明します。

オプション 1: CSS トランジション (ホバー時)

CSS トランジションを使用すると、スムーズに指定された期間にわたって要素のプロパティを変換します。ホバー時にスライドイン トランジションを作成する例を次に示します。

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

オプション 2: CSS アニメーション

CSS アニメーションを使用すると、トランジションをより詳細に制御できるようになります。開始時刻と終了時刻を指定します。アニメーションを使用した例を次に示します。

#slide {
    left: -100px;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@keyframes slide {
    100% { left: 0; }
}

ブラウザのサポートとリソース

ブラウザの互換性については、次のリンクを参照してください。

• CSS トランジション: https://caniuse.com/transitions
• CSSアニメーション: https://caniuse.com/animations

追加リソース

CSS アニメーションとトランジションの詳細については、次の Mozilla Developer Network を参照してください。 (MDN) 記事:

• アニメーション: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• トランジション: https://developer.mozilla.org/en-US/docs/Web/Guide /CSS/Using_CSS_transitions

以上がCSSのみを使用してスライドイントランジションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。