![](https://cxg-design.jp/wp-content/uploads/2024/06/typinganimation_thumb-2.png)
Blocks Animationで、タイピングアニメーションを作成
以前のBLOGで、Blocks Animationで、フェードインアニメーションを実装する方法を紹介しました。今回は、Blocks Animationで、タイピングアニメーションを作成する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/1ac0cd0f891a0d2097a07303a9ed2526.png)
出典 : Blocks Animation
今回のDEMOは、インフォグラフィックスのアニメーションです。
ページが読み込まれると、文字がタイピングアニメーションで表示されます。また数字がカウントアニメーションで表示されます。
設定
まず、ブロックエディターで、レイアウトを作成します。カバーブロックに文字と、Font Awesomeのアイコンを設置します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/2546c774a81986531eb2c2df538e9667.png)
カバーブロックに文字と、Font Awesomeのアイコンを設置
タイピングアニメーション
ローマ字(APPLE)を選択し、さらに表示をクリックします。タイピングアニメーションをクリックします。設定項目が表示されるので、遅延を1秒に設定します。速度は、デフォルトのままです。
![](https://cxg-design.jp/wp-content/uploads/2024/06/6c26c50ecd2f0aff7b5e9268f6708945.png)
さらに表示をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/387da015810f2aedaa76f1e1f7759777.png)
タイピングアニメーションをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/77e8c44cf1dfeae44e1b9db430ec4640.png)
遅延を1秒に設定
カウントアニメーション
数字(10,000)を選択し、さらに表示をクリックします。カウントアップアニメーションをクリックします。設定画面が表示されますが、デフォルトのまま、遅延なし、速度デフォルトにします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/9156d3fd2311a22a407aca4142a38abb.png)
カウントアップアニメーションをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/f296e6162bc58657f87387c565929399.png)
遅延なし、速度デフォルト
残りのアニメーションの設定も同じように変更しますが、遅延を500ミリ秒に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/42360c3a17cbdb456e586efd92fe09ca.png)
遅延を500ミリ秒に設定
以上で今回の説明は終了です。タイトルや数字を印象的に見せるのに便利な機能です。アニメーションとは設定の仕方が異なりますが、簡単に設定できますね。