CSS のみを使用してクロスブラウザーのスライドイン効果を作成するには?

CSS のみを使用してブラウザ間でのスライドイン トランジションを作成する方法

CSS を使用すると、スライドインする要素をシームレスに作成できます左からJavaScriptを使用しない場合。この多用途性は、CSS3 トランジションまたは CSS3 アニメーションを通じて可能です。

CSS トランジション

例として、ホバーでトリガーされるトランジションを実装できます。

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

この場合、.wrapper の上にマウスを置くと、#slide from がスライドします。左: -100px;左へ: 0;

CSS アニメーション

または、アニメーションを使用してスライドイン効果を自動化することもできます:

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

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

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

このアプローチは同じスライド メカニズムに従いますが、2 秒後にアニメーションが自動的に開始されます。アニメーションフィルモード: 順方向。プロパティにより、アニメーションの完了後も div が表示されたままになります。

CSS アニメーションとトランジションの詳細については、次のリソースを参照してください:

• アニメーション: 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 サイトの他の関連記事を参照してください。