MyController

WEB業界素人の僕がまた見返しそうなことのメモです。

【CSS3】JavaScript不要!簡単アニメーション

意外と簡単。対応ブラウザには注意。

 

transition(IE10以上対応)

transition効果(時間的変化)をまとめて指定する。

つまりゆっくり消えたりするやつのもできる。

イージング

ease-in-outとかはマウスオンのボタンとか使えそう。

参考

CSS3プロパティ transition | HALAWATA.NET

 

transform(上記とセットで使うこと多い)

回転させたり。

transform: rotate(315deg); 

こうすると一回転くらいして止まる。

黒いバーを開店して×ボタンにしてみたり簡単。

もしその場合2つ目はマイナスの値にしてやればOk

 

 

translateY(556px)

こうすると縦軸に指定した分下に移動。