【CSS3】JavaScript不要!簡単アニメーション
意外と簡単。対応ブラウザには注意。
transition(IE10以上対応)
transition効果(時間的変化)をまとめて指定する。
つまりゆっくり消えたりするやつのもできる。
イージング
ease-in-outとかはマウスオンのボタンとか使えそう。
参考
CSS3プロパティ transition | HALAWATA.NET
transform(上記とセットで使うこと多い)
回転させたり。
transform: rotate(315deg);
こうすると一回転くらいして止まる。
黒いバーを開店して×ボタンにしてみたり簡単。
もしその場合2つ目はマイナスの値にしてやればOk
translateY(556px)
こうすると縦軸に指定した分下に移動。