215

JavaScript を使用せずに CSS のみでスライドイン トランジションを生成するクロス ブラウザ ソリューションはありますか? 以下は、html コンテンツの例です。

<div>
    <img id="slide" src="http://.../img.jpg />
</div>
4

5 に答える 5

329

CSS3 トランジションまたは CSS3 アニメーションを使用して要素をスライドさせることができます。

ブラウザのサポート: http://caniuse.com/

私の言いたいことを示すために、簡単な例を 2 つ作成しました。

CSS トランジション (ホバー時)

デモ1

関連コード

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

この場合、Im は 1 で位置を からleft: -100px;に移行するだけ0;です。間隔。を使用して要素を移動することもできますtransform: translate();

CSS アニメーション

デモ 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; }
}

上記 (デモ 1) と同じ原理ですが、アニメーションは 2 秒後に自動的に開始さanimation-fill-modeれforwardsます。

私が言ったように、それがどのように行われるかを示す2つの簡単な例です。

編集: 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

これが役に立ったことを願っています。

于 2013-06-08T08:28:52.917 に答える