覚え途中のcss [box-sizing,animation,transition]

最近少しずつ覚えているcssコード達です。
まだ使いこなせてはいないですけど・・・


box-sizing : 
これはもっと前に知っとくべきだったかも・・・
これを知らないばっかりにpaddingやborderでどれだけ苦しんだか・・・
というのもこれで高さ、幅を指定すれば上記２つを含んだボックスが作れます。

・box-sizing：content-box(初期値)
paddingとborderの幅を含めない要素が作れる。
・box-sizing : border-box
paddingとborderの幅を含める。




animation : 
その名の通り、要素をアニメのように動かします。
animation-name、animation-duration、@keyframesさえ記述すれば
動かせます。

例）

animation-nameとkeyframes のプロパティだけ一緒に。
あと-webkit-だけしか書いてないけど、ついてないやつも記述しないと
Firefoxとかでは動かないから注意です。




transition : 
transitionは時間的に要素を変化をさせます。

例）

・transition-propertyは変化させたいプロパティを入れます。
背景色だけ変化させたい場合はbackground-colorを記述します。
・transition-durationは時間を記述します。
例の場合は3秒で:hoverで指定した形になります。
・:hoverには最終的に止まるプロパティ値を入れます。
これらもベンダープレフィックス(-webkit-等)必要




このanimeとtrans2つの違いは
【animation】
　　・ループ可
　　・keyframesで細かい動きの設定可能
　　・ウィンドウが開いて即実行可能

【transition】
　　・ループがない
　　・処理後は自然に最初の状態に戻る
　　・:hoverなどの疑似クラスなどのスイッチとなるものが必要

これらがパパッと使えるようになったらかっこいいなー