#48 はじめてのCSSアニメーション Transitionの基礎だよ【ぴよぴよコーダーの開発日記】

そもそもTransitionって何だっけ。

今までさんざんCSSアニメーション書いてきたけど、animationプロパティを使うことが多くてTransitionって何だっけ？ってなってる。しかもanimationプロパティも若干感覚で作ってる。。いや計算してるはずだぞ。たぶん。

そんなわけでTransitionの基礎をやってみよう。

Transition　とは　変化　です。つまり動くってこと。つまりはアニメーションってこと。

最初に誰もがやるであろう　ボタンのホバーエフェクトのデモを作ってみた

コードはこんな感じ

.button {
   display: inline-block;
   padding: 20px 40px;
   background-color: #3DA3C2;
   color: #fff;
   font-size: 1.6em;
   border-radius: 100px;
   transition-duration:0.5s;
   transition-timing-function:ease-in-out;
}
.button:hover {
   filter: brightness(1.2);
   padding: 30px 50px;
   font-size: 2em;
}

まず、buttonのクラスに、transition-duration:0.5s;　というのを指定した。

これは、このアニメーションは0.5秒間動きますという意味。durationは日本語で、期間　という意味だってGoogle先生言ってた。

transition-timing-functionは、動きのなめらかさ　です。シューッと動くのはlinear、シューッパッって動くのは、ease-in　とか。擬音がすぎる。長嶋さんか。

それで、hoverセレクタのほうに、変化後の値を書いていく、この場合、背景色の明度を上げて、ボタンと文字の大きさを大きくしている。

ちなみに、transitionのショートハンドプロパティもあるけど、上記のような複数の変化の場合は、書くと逆にわかりづらい。コードはこうなる。

transition:background-color 0.5s ease-in-out 0s , padding 0.5s ease-in-out 0s , font-size 0.5s ease-in-out 0s;

つまり、

変化前のクラスに、これから変化しますよー。何秒かけてこんな動きで！と変化するぞTransition命令を指定して、

変化後のクラス(:hoverとか)に、変化後の色や形の指定を指定する　と理解した。

参考：【CSS3】Transition（変化）関連のまとめ

下記のリンクはTransition関係ないけど自分用メモ

参考：brightness()　明度調整。画像リンク切れてる。。

参考：明るさ効果について　こっちは画像あり。