cssのみで、上記サンプルのように一文字づつパタパタとクルクルと表示させる方法を解説します。
※見逃した方はお手数ですがリロードお願いいたします

::before要素を使って文字増殖させ縦一列にする

<p class="sampleA">
  <span>🙀</span>
</p>

.sampleA{
  text-align:center;
  line-height:1.5;
  width:1em;
  height:1.5em;
  overflow:hidden;
  span{
    display:block;
    position:relative;
    &::before{
      content:"二度もぶった親父にもぶたれた事ないのに";
    }
  }
}

上記設定で下記の文言が縦一列にズラっと並ぶことになります。
二度もぶった親父にもぶたれた事ないのに🙀

クルクルと表示する

.sampleA span{
  animation:kurukuru 1.75s ease-out 0s 1 forwards;
}
@keyframes kurukuru {
  0%{top:1.5em;}
  99.9%,to{top:-28.5em;}
}

前提として line-height を1.5に設定していて、全部で20文字(::before要素で増殖した分も含む)なので全長 30em になります。
なので animation を使用して30em分、下から上へと動かします＠5・6行目
親要素の.sampleAには幅と高さが指定してあり、overflow:hidden; にて、はみ出した内包要素は非表示になっていますので、一か所でクルクルと文字が回っているように見えます。
※イイ感じになるようにイージングかけてます＠ease-out

パタパタと表示する

.sampleA span{
  animation:kurukuru 1.75s steps(20,end) 0s 1 forwards;
}

クルクルと表示する場合との違いはcssアニメーションの設定のみです＠2行目
※アニメーションの設定は クルクル表示するcss と同じです
steps(20,end) の指定により、一つのアニメーションを 20分割 して動かすような設定になります。
結果1.5emづつ等間隔に縦に並んでいるので、増殖した文字が一文字づつ切り替わっていくように見えます。

一般的にスプライト画像を使用してアニメーション作成する場合はこの手法が多いですね。
こういうヤーツ☟

実用性無視、ただ作りたかっただけのcssモーションタイポグラフィ

まとめ

一昔前だと、Flashやjsライブラリで実装していた動きのあるコンテンツやパーツなどは、現在ではcssのみでも相当な表現が出来るようになってきていると感じます。
とくに cssによる3D表現 は目を見張るものがありますね！
次回記事を書くことがあれば3Dネタにしようかと画策中です。
もちろんチカラワザでね(￣^￣)ゞ