[解決済み】CSS 3 左からのスライドイン トランジション

質問

javascriptを使わずにCSSのみでスライドイン・トランジションを実現するクロスブラウザ対応のソリューションはありますか？以下はhtmlの内容の例です。

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

解決方法は？

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

ブラウザ対応について。 http://caniuse.com/

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

CSSによる遷移（ホバー時）

デモワン

関連するコード

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

この場合、私はただ位置を left: -100px; から 0; を1秒間の継続時間で表示します。を使って要素を移動させることも可能です。 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 これにより、アニメーションが終了しても div は表示されたままとなり、終了状態が持続します。

2つの簡単な例で、どのように実行できるかを説明します。

EDITです。 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

お役に立てれば幸いです。