transitionは[:hover]などのきっかけとセットで使う。
animationは@keyframesで細かい設定が可能

例えば下記の場合、
[background:#29b6f6;][width:100px;]のboxを[:hover]キッカケで
[background:#f06292;][width:200px;]に変更します。

transitionで指定するプロパティは以下になります。

transition-property:トランジションを適用するプロパティ
transition-duration:トランジションにかける時間
transition-timing-function:トランジション実行中の変更速度
transition-delay:トランジション実行やプロパティ変更の際の待ち時間

transition-property:トランジションを適用するプロパティを指定

background
background-color	background-position
border-bottom-color	border-bottom-width
border
border-left-color	border-left-width
border-right-color	border-right-width
border-spacing	border-top-color
border-top-width	outline-color
outline-width
position
top	bottom
right	left
font/text
font-size	font-weight
word-spacing	letter-spacing
line-height	color
text-shadow	text-indent
margin/padding/size
margin-top	margin-bottom
margin-right	margin-left
width	height
min-height	max-height
max-width	min-width
padding-top	padding-bottom
padding-right	padding-left
other
visibility	opacity
clip	vertical-align
z-index

transition-duration:トランジションにかける時間

・初期値は[0s]

transition-timing-function:トランジション実行中の変更速度を指定

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

transition-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,start)の場合: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); cubic-bezierの指定はhttp://cubic-bezier.com/での編集が簡単です

transition-delay:トランジション実行やプロパティ変更の際の待ち時間を指定

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

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

transition:transition-property transition-duration transition-timing-function transition-delay;

ex)background-colorを0.3sかけて[ease]で動かす。ただし1sは実行しない。
transition:background-color 0.3s ease 1s;

ex)backgroundを0.3sかけて[ease]で動かし、heightも0.3sかけて[ease]で動かす。
transition:background 0.3s ease,height 0.3s ease;