トランジションとアニメーション

transitionは4つの値をまとめて記載することが一般的で、省略することも可能です。

transition: all 0.5s ease 1s;

transition-property　適用するプロパティ。colorやopacityなど。省略時は初期値のallで全てに適用。
transition-duration　省略不可。開始から終了までの時間。
timing-function　　 変化する速度。省略時の初期値はeaseで始まりと終わりを滑らかにします。
　　　　　　　　　 ease-in　開始をゆっくりにする。
　　　　　　　　　 ease-out　終わりをゆっくりにする。
　　　　　　　　　 ease-in-out　開始と終わりをゆっくりにする。
　　　　　　　　　 linear　一定速度で変化する。
transition-delay　　 開始までの時間。省略時は0秒ですぐに開始。

例えばtransition: 1s;とすると、すぐに開始され1秒かけて全ての要素がeaseで滑らかに動作します。

animationは8つの値をまとめて指定することができます。省略時は初期値になります。

animation: (name) (duration) (timing-function) (delay) (iteration-count) (direction) (fill-mode) (play-state);

animation-name　　 省略不可。任意の名前をつけて後述の@keyframesで使用します。
animation-duration　省略不可。開始から終了までの時間。
timing-function　　 変化する速度。transitionと同じ使い方です。
animation-delay　　 開始までの時間。省略時は0秒。
iteration-count　　　実行回数。数値もしくはinfiniteで無限を設定。初期値は1。
direction　　　　　 再生方向。初期値はnormalで通常の再生。
　　　　　　　　　 reverse　逆再生。
　　　　　　　　　 alternate　通常再生後、ループ時は逆再生。
　　　　　　　　　 alternate-reverse　逆再生後、ループ時は通常再生。
fill-mde　　　　　　 アニメーションの開始前と終了後のスタイルを指定。初期値はnoneで指定なし。
　　　　　　　　　 forwards　終了後のスタイルを維持する。
　　　　　　　　　 backwards　開始前のスタイルに戻る。
both　開始前はbackwards、終了後はforwardsにする。
play-state　　　　　 アニメーションの再生中もしくは一時停止を指定。
　　　　　　　　　 初期値はrunningで再生中、pusedで一時停止。

animationとセットで使用します。
使用するために、animationで付けたnameとdurationが基準になります。+

@keyframes name {
　0% {
ここに開始時の状態を設定
}
　50% {
50％（指定時間の半分）の時点の状態を設定
}
　100% {
終了時の状態を設定
}
0~100%の間で細かく状態を変化させることができます。