![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
ブロックにアニメーションを付けたいなー…
難しくなくて簡単な方法で!
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
プラグインを使えば簡単にアニメーションを付けられるよ!
コンテンツを目立たせる方法は、色を変えたり文字を大きくしたりマーカーを引いてみたりと工夫が出来ますが、一番目立つ方法は「動きを加える」ことですね。
今回紹介するBlocks Animation: CSS Animations for Gutenberg Blocksなら追加CSSやJavaScriptを使うことなくブロックメニューからアニメーションを付けることが出来ます。
特殊なアニメーションブロックを追加するのではなくて、どのブロックにもアニメーションを付けることが出来るのでめちゃくちゃ重宝します!
今回は、使えるアニメーションの種類や設定方法などを詳しくまとめていきます!
![](https://az-designlife.site/wp-content/uploads/2022/12/87965811e34087fdeb17582bf06dbbca-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/87965811e34087fdeb17582bf06dbbca-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/87965811e34087fdeb17582bf06dbbca-150x150.png)
種類も豊富なのでかなりおすすめのプラグインです!
- Blocks Animationの使いやすい特徴や使い方
- 追加できるアニメーション全57種類の動き
- アニメーションの設定方法
![](https://az-designlife.site/wp-content/uploads/2022/12/icon-256x256-1.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/icon-256x256-1.png)
- 既存のブロックにアニメーションを付けることが出来る
- アニメーションの種類が豊富
- 説明が英語
- DELAYとSPEEDの2種類のみで細かい設定に向いてない
Blocks Animationの使いやすい特徴や使い方
![](https://az-designlife.site/wp-content/uploads/2022/12/Blocks-Animation.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/Blocks-Animation.jpg)
Blocks Animation は、Gutenberg のすべてのブロックに最も洗練された方法で CSS アニメーションを追加することができます。
Blocks Animation の UI は、インストールしたことに気づかないほどネイティブで直感的です。インストールするだけで、すべてのブロックのアニメーション設定が、ブロック設定サイドバーに表示されるようになります。
https://ja.wordpress.org/plugins/blocks-animation/より引用
プラグインページはこちら
![](https://ps.w.org/blocks-animation/assets/icon-256x256.png?rev=2619319)
![](https://ps.w.org/blocks-animation/assets/icon-256x256.png?rev=2619319)
特徴・使い方・メリット・デメリット
Blocks Animationはインストールしただけで使えるプラグインで、プラグイン自体に設定は必要ありません。
使いたいブロックのブロックメニューに「Animations」が追加され、そこから各アニメーションを追加することが出来ます。
![](https://az-designlife.site/wp-content/uploads/2022/12/animation-add.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/animation-add.jpg)
追加するアニメーションには、それぞれ「種類」・「作動するまでの時間」・「作動時間」を設定出来ます。
- 既存のブロックにアニメーションを追加出来る
- 分かりやすく設定が簡単
- ブロックが表示される時にアニメーションがスタートされる
- アニメーションの種類が豊富
- 説明が英語
- アニメーションのリストが毎回1番上から選択
- 細かい設定は出来ない
デメリットとしては、全て英語なので分かりにくい箇所もありますが、当記事を見てもらえればどんなアニメーションがあり、どの設定をすればいいのか分かるかと思います!
その他にも、アニメーションの重ね掛けが出来なかったり、タイミング等の細かい設定が出来ませんが十分すぎる性能があります。
次にデメリットに対してメリットを挙げると、アニメーションブロックを追加するのではなく既存のブロックにアニメーションを付けることが出来るので簡単に設定出来ます!
またアニメーションの種類が何を使うか迷ってしまうほど豊富で、種類としてはなんと57種類のパターンがあります!
追加できるアニメーションの種類
![](https://az-designlife.site/wp-content/uploads/2022/12/Moving-Forward_Outline.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/Moving-Forward_Outline.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
どんなアニメーションが追加できるの?
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
ここからは実際にアニメーションを追加したブロックを交えて紹介するよ!
追加できるアニメーションは3種類あります。
- ブロック自体に追加する登場アニメーション~Loading Animations~
- 数字に対してカウントアップを追加~Count Animations~
- 文字に対してタイピング風のアニメーションを追加~Typing Animations~
ブロックの登場アニメーション~Loading Animations~
ブロックの登場アニメーションが最も種類が豊富で使っていて楽しいです。
アニメーションのカテゴリが10種類あって、組み合わせると55種類あります!
ブロックを選択→Animations→Loading Animationsを選択し、追加したいアニメーションを選ぶ
![](https://az-designlife.site/wp-content/uploads/2022/12/Loading-Animations.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/Loading-Animations.jpg)
アニメーションのパターン
![](https://az-designlife.site/wp-content/uploads/2022/12/001-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/001-300x300.png)
Backing
![](https://az-designlife.site/wp-content/uploads/2022/12/002-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/002-300x300.png)
Bouncing
![](https://az-designlife.site/wp-content/uploads/2022/12/003-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/003-300x300.png)
Fading
![](https://az-designlife.site/wp-content/uploads/2022/12/004-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/004-300x300.png)
Flipping
![](https://az-designlife.site/wp-content/uploads/2022/12/005-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/005-300x300.png)
Rotating
![](https://az-designlife.site/wp-content/uploads/2022/12/006-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/006-300x300.png)
Sliding
![](https://az-designlife.site/wp-content/uploads/2022/12/007-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/007-300x300.png)
Zooming
![](https://az-designlife.site/wp-content/uploads/2022/12/008-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/008-300x300.png)
Rolling
![](https://az-designlife.site/wp-content/uploads/2022/12/009-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/009-300x300.png)
Light Speed
![](https://az-designlife.site/wp-content/uploads/2022/12/010-300x300.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/010-300x300.png)
Other
となっています!
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-1-150x150.png)
これだけ見てもワクワクする!
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
ここからそれぞれの動きを全部紹介するよ!
Backing~4種類~
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
Back In Down
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
Back In Left
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
Back In Right
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/001-150x150.png)
Back In Up
Bouncing~6種類~
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
Bounce
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
Bounce In
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
Bounce In Down
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
Bounce In Left
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
Bounce In Right
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/002-150x150.png)
Bounce In Up
Fading~12種類~
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Down
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Down Big
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Left
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Left Big
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Right
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Right Big
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Up
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Top Left
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Top Right
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Bottom Left
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
![Fading](https://az-designlife.site/wp-content/uploads/2022/12/003-150x150.png)
Fade In Bottom Right
Flipping~3種類~
![Flipping](https://az-designlife.site/wp-content/uploads/2022/12/004-150x150.png)
![Flipping](https://az-designlife.site/wp-content/uploads/2022/12/004-150x150.png)
Flip
![Flipping](https://az-designlife.site/wp-content/uploads/2022/12/004-150x150.png)
![Flipping](https://az-designlife.site/wp-content/uploads/2022/12/004-150x150.png)
Flip In X
![Flipping](https://az-designlife.site/wp-content/uploads/2022/12/004-150x150.png)
![Flipping](https://az-designlife.site/wp-content/uploads/2022/12/004-150x150.png)
Flip In Y
Rotating~5種類~
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
Rotate In
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
Rotate In Down Left
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
Rotate In Down Right
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
Rotate In Up Left
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
![Rotating](https://az-designlife.site/wp-content/uploads/2022/12/005-150x150.png)
Rotate In Up Right
Sliding~4種類~
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
Slide In Down
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
Slide In Left
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
Slide In Right
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
![Sliding](https://az-designlife.site/wp-content/uploads/2022/12/006-150x150.png)
Slide In Up
Zooming~5種類~
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
Zoom In
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
Zoom In Down
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
Zoom In Left
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
Zoom In Right
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
![Zooming](https://az-designlife.site/wp-content/uploads/2022/12/007-150x150.png)
Zoom In Up
Rolling~1種類~
![Rolling](https://az-designlife.site/wp-content/uploads/2022/12/008-150x150.png)
![Rolling](https://az-designlife.site/wp-content/uploads/2022/12/008-150x150.png)
Roll In
Light Speed~2種類~
![Light Speed](https://az-designlife.site/wp-content/uploads/2022/12/009-150x150.png)
![Light Speed](https://az-designlife.site/wp-content/uploads/2022/12/009-150x150.png)
Light Speed In Left
![Light Speed](https://az-designlife.site/wp-content/uploads/2022/12/009-150x150.png)
![Light Speed](https://az-designlife.site/wp-content/uploads/2022/12/009-150x150.png)
Light Speed In Right
Other~13種類~
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Flash
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Pulse
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Rubber Band
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Shake X
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Shake Y
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Head Shake
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Swing
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
TaDa
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Wobble
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Jello
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Heart Beat
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Hinge
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
![Other](https://az-designlife.site/wp-content/uploads/2022/12/010-150x150.png)
Jack In The Box
数字をカウントアップ~Count Animations~
Count Animationsは、数字を選択して適応することでカウントアップして元々の数字に変化するアニメーションを追加します。
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-150x150.png)
こんなに数字が大きくても大丈夫!
数字を選択→テキストメニューの「」からCount Animationsを選ぶ
![](https://az-designlife.site/wp-content/uploads/2022/12/Count-Animations.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/Count-Animations.jpg)
タイピング風のアニメーション~Typing Animations~
Typing Animationsは、タイピング風のアニメーションを追加してくれます。
めちゃくちゃカッコいいので個人的に好みです!
![](https://az-designlife.site/wp-content/uploads/2022/12/104e1a0c2361f092b5231f83cfcf652d-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/104e1a0c2361f092b5231f83cfcf652d-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/104e1a0c2361f092b5231f83cfcf652d-150x150.png)
これをCSSとかでやると結構めんどうなんですよね…
文字を選択→テキストメニューの「」からTyping Animationsを選ぶ
![](https://az-designlife.site/wp-content/uploads/2022/12/Typing-Animations.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/Typing-Animations.jpg)
アニメーションの設定について
![](https://az-designlife.site/wp-content/uploads/2022/12/Settings_Monochromatic.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/Settings_Monochromatic.png)
ここからは追加できるアニメーションの設定について紹介します。
アニメーションには2つ設定が用意されていて、それぞれ以下の変更が出来ます!
- DELAY→スタートするまでの時間
- SPEED→アニメーションの速度
![](https://az-designlife.site/wp-content/uploads/2022/12/104e1a0c2361f092b5231f83cfcf652d-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/104e1a0c2361f092b5231f83cfcf652d-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/104e1a0c2361f092b5231f83cfcf652d-1-150x150.png)
その2つだけだと設定は物足りなくない?
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
細かい設定がないからこそ使いやすいよ!
それぞれの設定の詳細についてまとめていきます。
DELAY
![](https://az-designlife.site/wp-content/uploads/2022/12/DELAY.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/DELAY.jpg)
- None
- 100 Milliseconds→0.1秒遅らせる
- 200 Milliseconds→0.2秒遅らせる
- 500 Milliseconds→0.5秒遅らせる
- One Seconds→1秒遅らせる
- Two Seconds→2秒遅らせる
- Three Seconds→3秒遅らせる
- Four Seconds→4秒遅らせる
- Five Seconds→5秒遅らせる
SPEED
![](https://az-designlife.site/wp-content/uploads/2022/12/SPEED.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/SPEED.jpg)
- Slow→2秒かけて終了
- Slower→3秒かけて終了
- Default→1秒かけて終了
- Fast→0.8秒かけて終了
- Faster→0.5秒かけて終了
実際に使って制作したデモサイト
![ice-top](https://az-designlife.site/wp-content/uploads/2022/12/ice-top-1024x576.jpg)
![ice-top](https://az-designlife.site/wp-content/uploads/2022/12/ice-top-1024x576.jpg)
今回紹介したアニメーションを使ってアイスとパンケーキのお店をイメージしたサイトを作っています。
アニメーションが追加できることで、独自ブロックがサイト制作にもばっちり使えるテーマ「SWELL」との相性が抜群で、動きのあるサイトが作れます!
制作したデモサイトもよかったら覗いてみてください。
また、SWELLがサイト制作におすすめなブロックの紹介やおすすめの理由をまとめているので参考になると嬉しいです。
![](https://az-designlife.site/wp-content/uploads/2022/12/93371bbbe8383d2b4ede3f8d50017cd7-300x158.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/93371bbbe8383d2b4ede3f8d50017cd7-300x158.jpg)
まとめ
![今回のまとめ](https://az-designlife.site/wp-content/uploads/2022/12/0cf2aba568c158160c92e737ae84d903-1024x626.jpg)
![今回のまとめ](https://az-designlife.site/wp-content/uploads/2022/12/0cf2aba568c158160c92e737ae84d903-1024x626.jpg)
今回はブロックにアニメーションを追加するプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」について紹介しました。
![](https://az-designlife.site/wp-content/uploads/2022/12/icon-256x256-1.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/icon-256x256-1.png)
- 既存のブロックにアニメーションを付けることが出来る
- アニメーションの種類が豊富
- 説明が英語
- DELAYとSPEEDの2種類のみで細かい設定に向いてない
全文英語の為、最初は身構えてしまいますが、この記事を参考に動きを確認してもらえれば使いやすくなると思います!
動きのあるサイトはとても見栄えがよくなりますので、簡単にアニメーションを追加できるこのプラグインはWordPressでサイト制作するには必須のプラグインです!
また、当サイトではテーマ「SWELL」を使っていて、サイト制作におすすめなプラグインもまとめていますので併せて読んでくれると嬉しいです。
![](https://az-designlife.site/wp-content/uploads/2022/11/e248eae6b0e10728070845128c92c5d1-300x158.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/11/e248eae6b0e10728070845128c92c5d1-300x158.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
最後までお読みいただきありがとうございました。
みなさんの参考になれば嬉しいです。
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
当サイトでは自分の制作物の他にWebサイト制作で実際に行った学習や悩んだこと、WordPressのカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。
コメント