左側から CSS スライドイン トランジションを作成するにはどうすればよいですか?

左から CSS スライドイン トランジションを作成する方法

CSS で左からのスライドイン トランジションを実現するには、CSS3 トランジションまたはアニメーションのいずれかを利用する必要があります。実装方法は次のとおりです。

ホバーで CSS3 トランジションを使用する (デモ 1)

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

このスニペットは、要素の位置を左からスムーズに遷移します: -100px;ホバーすると 1 秒かけて 0 になります。また、transform:translate() を利用して要素の位置を調整することもできます。

CSS3 アニメーションの使用 (デモ 2)

#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 秒後に自動的に開始されます。アニメーション遅延プロパティを使用します。 anime-fill-mode を forwards に設定すると、アニメーション終了後も要素の可視性が維持されます。

ブラウザのサポート

CSS トランジションとアニメーションのブラウザ互換性の詳細については、caniuse.com を参照してください。

さらなる読書

これらのテクニックについてさらに詳しく知りたい場合は、探索:

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

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