おことわり：class構文で書いていたものを公開用に書き直したので実用される時は適宜調整してください。
あと車輪の再発明だったらすみません、、

実務でボツになった実装の供養です。

display: inline-blockとdisplay:blockで囲んでいるのが肝です。横幅をちょろっとだけ設定しているのは高さを確保したいから。その他あまり語ることはありません。CMSで表出されるタイトル・テキストなどにこのようなアニメーションをかけたい場合役に立つかもしれません。いや、役に立ったら嬉しい。