ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してスライドイントランジション効果を作成する方法

CSS を使用してスライドイントランジション効果を作成する方法

Linda Hamilton
リリース: 2024-12-08 04:25:16
オリジナル
750 人が閲覧しました

How to Create a Slide-In Transition Effect Using CSS?

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

CSS には、CSS3 トランジションやアニメーションなど、スライドイン トランジションを作成するためのオプションがいくつか用意されています。

CSS3 Transitions

トランジションの場合、関連するコードは次のようになります。 this:

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}
ログイン後にコピー

この例では、親要素 (.wrapper) の上にマウスを置くと、要素 (#slide) の位置が 1 秒かけて左: -100px から 0 に遷移します。

CSS3 アニメーション

また、アニメーションを使用してスライドイン効果を実現することもできます。以下に例を示します。

#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 秒の遅延後に開始され、完了すると終了状態が維持されます。

注: これらの機能はブラウザでサポートされています。 [こちら](http://caniuse.com/)で確認できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート