CSSのtransitionがうごかなかった失敗談

かなり初歩的なミスなので心して読んでください。

CSSのtransitionはjavascriptを使わずにアニメーションが出来ます。

上のページの例だと、hoverするとスタイルが変わる設定になっていて、その過程がアニメーションで変化します。

私は今回、要素を初期位置から一定量左にアニメーションで動かしたかったのです。

<style>
e{
    position:relative;
    transition: all 1s ease;
}
e:hover{
    left:-100px;
}
</style>

<div id="e">hoge</div>

↑動きませんでした。（アニメーションせずにいきなり移動した）

<style>
e{
    left:0px;
    transition: all 1s ease;
    position:relative;
}
e:hover{
    left:-100px;
}
</style>

<div id="e">hoge</div>

↑うごきました初期値でも明記しましょう。

みちのいに!!