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

わすれた.log

忘れては検索して、そしてまた忘れるその過ちを繰り返さない為に…

背景がTransitionで変わるボタン

読み:トランジション
翻訳:移り変り, 推移, 変遷

トランジションで背景が変わるボタンを作った。
よく見るやつだ。
ものすごく読み方を忘れるので、ここではあえてカタカナでしか書かない。
トランジションはまだ少し使いなれてない。

allについて

  transition: all .3s ease-out;

allというのは「その要素のすべての変化に対して」というような意味らしい。

変化させる対象の物が特定している場合は、background(背景を変化させる)とかcolor(文字色を変化させる)とか入れる。
ちなみになんにも入れなかった場合はallになるらしい、つまり書かなくてもよいということかな。

transitionって…?

transitionは「その要素の変化」を対象としている。
classを別名の追加しても、それも監視対象に入る。
CSSの上書きに対して動きをつけるという感じかなぁ
以前のこの記事jQueryとか使ってるんだけどなんだか意味わかんねぇぞとか書いたがなんとなくわかった。

See the Pen 背景がtrandisionで変わるボタン by yachiru (@yachiru) on CodePen.

☆参考サイト
すごく使くいい感じにまとめてあるサイトがあったのでブクマ。
CSS3 アニメーション(Transitions)の使用方法 | CSS Lecture