読者です 読者をやめる 読者になる 読者になる

みちのいに!!

自分のメモと、他にもハマる人がいそうなことを書く

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

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


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

transition-property-CSS3リファレンス

上のページの例だと、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>

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