transitionは[:hover]などのきっかけとセットで使う
animationは@keyframesで細かい設定が可能（かつてFlashをいじったことのある方にはわかりやすかもしれません。）

例えば下記の場合、
[item_fadein]と名付けた0%（スタート）はopacity: 0;で100%（エンド）はopacity: 1;というアニメーションを1秒間でease（開始と完了を滑らかに）実行

animation-name:任意でつける名前
animation-duration:1回分の実行にかける時間
animation-timing-function:実行中の変更速度
animation-iteration-count:繰り返す数
animation-direction:繰り返す際の方向を指定
animation-play-state:実行、および停止を指定
animation-delay:実行やプロパティ変更の際の待ち時間
animation-fill-mode:実行後スタイルを元に戻さず、変化したままのスタイルを維持するか否か
+
@keyframes:animation-nameで指定したものに対して、各アニメーションの進行状況ごとに変化させるプロパティを指定。
*iOS8以下やAndroid4.4.4以下対応時の場合はベンダープレフィックスが必要

animation-name:任意でつける名前

上記サンプルでは[item_fadein]と指定
どのような動きのanimationを設定しているか（あとから見て）わかりやすいものであればなんでもいいです。
@keyframesで設定したものを実行するために必要な名前となります。

animation-duration:1回分の実行にかける時間

transitionはtransitionにかける時間
animationの場合は1回分の実行にかける時間

animation-timing-function:実行中の変更速度(transition-timing-functionプロパティと同じ)

*[:hover]で確認できます。
基本的な動きは、[background:#29b6f6;][width:100px;]のboxを[:hover]キッカケで1秒かけて[background:#f06292;][width:200px;]に変更します。

animation-timing-functionプロパティの値
▼ease:cubic-bezier(0.25, 0.1, 0.25, 1.0) と同様（開始と完了を滑らかにする）（初期値）
ease transition: background 1s ease,width 1s ease;
▼linear:cubic-bezier(0.0, 0.0, 1.0, 1.0) と同様（一定）
linear transition: background 1s linear,width 1s linear;
▼ease-in:cubic-bezier(0.42, 0, 1.0, 1.0) と同様（ゆっくり始まる）
ease-in transition: background 1s ease-in,width 1s ease-in;
▼ease-out:cubic-bezier(0, 0, 0.58, 1.0) と同様（ゆっくり終わる）
ease-out transition: background 1s ease-out,width 1s ease-out;
▼ease-in-out:cubic-bezier(0.42, 0, 0.58, 1.0) と同様（ゆっくり始まってゆっくり終わる）
ease-in-out transition: background 1s ease-in-out,width 1s ease-in-out;
▼step-start:通常のhoverの動きおよびsteps(1, start)と同様（瞬時に始まって終わる）
step-start transition: background 1s step-start,width 1s step-start;
▼step-end:steps(1, end)と同様（transition-durationの時間だけ待って実行）
step-end transition: background 1s step-end,width 1s step-end;
▼steps(数値, start or end):ステップ数（数値）で等分に区切り実行。ステップ数は正の整数で指定
steps transition: background 3s steps(3,end),width 3s steps(3,end);transition-duration:3s steps(3,end)で設定（3秒間で3ステップで変化） transition-duration:3sで設定した時のステップタイミング steps(3,start)の場合:0s,1s,2sのタイミングで変化 steps(3,end)の場合:1s,2s,3sのタイミングで変化
▼cubic-bezier(数値, 数値, 数値, 数値):3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
cubic-bezier transition: background 1s cubic-bezier(.17,.89,.32,1.28),width 1s cubic-bezier(.17,.89,.32,1.28); http://cubic-bezier.com/での編集が簡単です

animation-iteration-count:繰り返す数

・初期値は[1]
・無限は[infinite]を指定

animation-direction:繰り返す際の方向を指定

・初期値は[normal]

▼normal:標準の方向

normal サンプルはanimation: cp_anime 3s ease infinite normal;で設定しています

▼reverse:逆順

reverse サンプルはanimation: cp_anime 3s ease infinite reverse;で設定しています

▼alternate:animation-iteration-count（繰り返し回数）が奇数の場合は標準/偶数の場合は逆順

alternate サンプルはanimation: cp_anime 3s ease infinite alternate;で設定しています

▼alternate-reverse:animation-iteration-count（繰り返し回数）が奇数の場合は逆順/偶数の場合は標準

alternate-reverse サンプルはanimation: cp_anime 3s ease infinite alternate-reverse;で設定しています

animation-play-state:実行、および停止を指定

[:hover]などでanimationを停止するなどの指定ができます。
running:アニメーションを再生中にする（初期値）
paused:アニメーションを一時停止にする

*[:hover]すると停止します。
こちらはhover値に:hover{animation-play-state: paused;}を設定。

animation-delay:animation実行の待ち時間を指定

指定した秒数だけ、animation実行を遅らせます。
transition-delay:1sであれば1秒間は実行されない。

animation-fill-mode:実行後スタイルを元に戻さず、変化したままのスタイルを維持するか否か

・初期値は[none]
・[forwards]:実行の最後のキーフレーム(100%)で設定されたスタイルを保持
ただし[animation-direction]と[animation-iteration-count]の値によって変わります。

animation-direction	animation-iteration-count	最後のキーフレーム
normal	偶数または奇数	100% または to
reverse	偶数または奇数	0% または from
alternate	偶数	0% または from
alternate	奇数	100% または to
alternate-reverse	偶数	100% または to
alternate-reverse	奇数	0% または from

・[backwards]:実行の最初のキーフレーム(0%)で設定されたスタイルを保持
ただし[animation-direction]と[animation-iteration-count]の値によって変わります

animation-direction	最初の適切なキーフレーム
normal または alternate	0% または from
reverse または alternate-reverse	100% または to

・[both]:実行開始前は開始直後の状態/実行終了後は終了直前の状態

animation（ショートハンド）:上記8プロパティのショートハンド

animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction
transitionと同じで基本的に順不同。ただしanimation-durationはanimation-delayより先に書く。
複数のアニメーションを指定するには、カンマで区切る。

ex)cp_animeというanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は標準
animation: cp_anime 3s ease infinite normal;

ex)cp_anime1というanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は逆順,cp_anime2というanimationを3秒かけて[ease]で動かす。無限に繰り返し方向は標準
animation: 'cp_anime1' 3s ease infinite reverse,'cp_anime2' 3s ease 1s infinite;

書き方の基本はこちら
@keyframes 任意の名前 {
0% {CSSプロパティ:値;}
100% {CSSプロパティ:値;}
}