css - 単純な CSS トランジションが実行されない

Question

デモ

<a href="#">hover</a>
<p>Text here</p>

<p>がホバーされたときにフェードインしてスライドインしたい<a>。問題は、デモの CSS<p>では、アニメーションではなく「ポップ」することです。