Blocks Animationで、タイピングアニメーションを作成

以前のBLOGで、Blocks Animationで、フェードインアニメーションを実装する方法を紹介しました。今回は、Blocks Animationで、タイピングアニメーションを作成する方法を紹介します。

今回のDEMOは、インフォグラフィックスのアニメーションです。

ページが読み込まれると、文字がタイピングアニメーションで表示されます。また数字がカウントアニメーションで表示されます。

設定

まず、ブロックエディターで、レイアウトを作成します。カバーブロックに文字と、Font Awesomeのアイコンを設置します。

タイピングアニメーション

ローマ字（APPLE）を選択し、さらに表示をクリックします。タイピングアニメーションをクリックします。設定項目が表示されるので、遅延を1秒に設定します。速度は、デフォルトのままです。

カウントアニメーション

数字（10,000）を選択し、さらに表示をクリックします。カウントアップアニメーションをクリックします。設定画面が表示されますが、デフォルトのまま、遅延なし、速度デフォルトにします。

残りのアニメーションの設定も同じように変更しますが、遅延を500ミリ秒に設定します。