Title: Animations for Blocks
Author: ska-dev
Published: <strong>2021年8月24日</strong>
Last modified: 2025年12月1日

---

プラグインを検索

![](https://ps.w.org/animations-for-blocks/assets/icon-256x256.png?rev=2587511)

# Animations for Blocks

 作者: [ska-dev](https://profiles.wordpress.org/skadev/)

[ダウンロード](https://downloads.wordpress.org/plugin/animations-for-blocks.1.2.5.zip)

[ライブプレビュー](https://ja.wordpress.org/plugins/animations-for-blocks/?preview=1)

 * [詳細](https://ja.wordpress.org/plugins/animations-for-blocks/#description)
 * [レビュー](https://ja.wordpress.org/plugins/animations-for-blocks/#reviews)
 *  [インストール](https://ja.wordpress.org/plugins/animations-for-blocks/#installation)
 * [開発](https://ja.wordpress.org/plugins/animations-for-blocks/#developers)

 [サポート](https://wordpress.org/support/plugin/animations-for-blocks/)

## 説明

ブロックエディターのブロックに設定パネルを追加し、スクロールでのブロック可視化時に
アニメーションを追加できる軽量プラグインです。アニメーションの種類 (フェード、反転、
スライド、ズーム)、バリエーション (異なる方向)、遅延、長さなど、より詳細な設定が
可能です。オプションを変更すると、エディター内ですぐにアニメーションをプレビュー
できます。

[デモはこちら](https://playground.wordpress.net/?plugin=animations-for-blocks&url=%2Fwp-admin%2Fpost.php%3Fpost%3D2%26action%3Dedit)

このプラグインは [AOS – Animate on scroll library](https://github.com/michalsnik/aos)
を使用し、スタイルシート (**2.8 kB**) とスクリプト (**5.2 kB**) 、アニメーション
を初期化するスクリプト (**1.3 kB**) をフロントエンドに追加します。

## スクリーンショット

 * [[
 * アニメーションの追加
 * [[
 * アニメーションの設定

## インストール

#### 管理者ダッシュボードからインストール

 1. **WordPress の管理画面  プラグイン**に移動。
 2. 「新規追加」をクリック。
 3. 「プラグインのアップロード」をクリック。
 4. `attributes-for-blocks.zip` ファイルを選択。
 5. 「今すぐインストール」をクリックします。
 6. **WordPress 管理画面  プラグイン** からプラグインを有効化。

#### FTP アップロードで手動インストール

 1. `attributes-for-blocks.zip` ファイルから解凍した「attributes-for-blocks」フォルダ
    を、WordPress の `../wp-content/plugins` フォルダにアップロードしてください。
 2. **WordPress 管理画面  プラグイン** からプラグインを有効化。

## FAQ

### アニメーションを追加するにはどうすればよいですか ?

選択したブロックの設定カラム (ブロック設定) で「アニメーション」パネルを開き、アニメーション
を選択します。現在のブロックに選択したアニメーションのプレビューが表示され、関連
するオプションが下に表示されます。

### どのように作動しますか ?

Animations for Blocks プラグインは、Animate on Scroll (AOS) ライブラリを使用して
動作します。このライブラリは、ほとんどが CSS ベースで、初期化処理に一部 JavaScript
を使用します。プラグインはブロックのルート要素に属性を追加し、AOS ライブラリにアニメーション
の方法を指示します。必要なスタイルやスクリプトの読み込みも、プラグインが自動的に
行います。

### Animations are not playing for me

By default the plugin will not play animations for users that have the “prefers-
reduced-motion” setting enabled for their device. This functionality can be turned
off by enabling the “Ignore reduced motion preference” plugin option, how ever it’s
not recommended. Other users that don’t have reduced motion preference enabled will
still see the animations.

### Animations cause a horizontal scrollbar

Since some elements are initially placed off-screen to then animate back to their
normal position it can cause a scrollbar to appear. To prevent this the overflow
should be hidden on one of the parent elements. Which element you should target 
is specific to your site. For example, you can try adding custom CSS: `.wp-site-
blocks { overflow: hidden; }`, but you have to make sure that this doesn’t break
any other features on your site that require overflow being visible.

### すべてのブロックで機能しますか ?

通常のブロックで、`blocks.getSaveContent.extraProps` フィルターを利用できる有効な
WP 要素をレンダリングするもの、または `render_callback` を利用する動的ブロックで
あれば、動作するはずです。
 独自の方法を用いているサードパーティ製のブロックは、
動作しない可能性があります。 [対応していないことが確認されているブロック一覧はこちら](https://github.com/ska-dev-1/animations-for-blocks/blob/main/animations-for-blocks.php#L172-L175)

### ブロック機能の無効化について

`afb_unsupported_blocks` フィルターを子テーマの `functions.php` ファイルで使用し
て、アニメーションを無効にできます。

    ```
    add_filter('anfb_unsupported_blocks', function($blocks) {
        $blocks[] = 'core/button';
        return $blocks;
    });
    ```

### このプラグインを無効にするとどうなりますか ?

このプラグインを無効化すると、アニメーション付きのブロックが無効になる場合があり
ます。その場合は、「ブロックの復元を試みる」をクリックしてブロックを復元できます。
この操作により、カスタムアニメーション属性が削除されるはずです。
 ブロックが無効
になるリスクを避けたい場合は、プラグインを無効化する前にすべてのアニメーションを
無効にしてください。

### すべてのアニメーション要素がフロントエンドで表示されません

アニメーションが表示されない場合、JavaScript エラーにより AOS が初期化されていない
可能性があります。デベロッパーツール (Chrome/Firefox では F12) を開き、「コンソール」
タブにあるエラーを確認してください。エラーメッセージと、可能であればお客様のサイト
のリンクを添えて、サポートまでご連絡ください。

## 評価

![](https://secure.gravatar.com/avatar/292030eb925a63e7069371b3ba4ef6a1c021eedfd9df26cb65c202b5f920ec9e?
s=60&d=retro&r=g)

### 󠀁[Seems ok but duration does not work](https://wordpress.org/support/topic/seems-ok-but-duration-does-not-work/)󠁿

 [cinek92](https://profiles.wordpress.org/cinek92/) 2026年1月14日

Does anybody knows why Duration does not work? I set 2 seconds or 3 seconds duration
of animation and it does not apply. It always fade with the same quick time

![](https://secure.gravatar.com/avatar/39ff005c514bfc37b254ad2b5763931c96c49f3e713d846be7e0794df0132120?
s=60&d=retro&r=g)

### 󠀁[It worked and then it stopped](https://wordpress.org/support/topic/it-worked-and-then-it-stopped/)󠁿

 [mariuszseo](https://profiles.wordpress.org/mariuszseo/) 2025年11月17日

Since version 1.2.3, the animations stopped working.I reverted back to version 1.2.2
and they work.I had to disable updates.

![](https://secure.gravatar.com/avatar/7315c567321ba9b67dd32712df8ba9c45335a19e53f755f0d748e452ade354f7?
s=60&d=retro&r=g)

### 󠀁[Very good](https://wordpress.org/support/topic/very-good-7575/)󠁿

 [classikd](https://profiles.wordpress.org/classikd/) 2025年4月20日

Excellent plugin merci

![](https://secure.gravatar.com/avatar/59abdd519e0cb10d0be161fb8d1076c6aa6cb69737c3b0c3cd9b250d1ef5f7c5?
s=60&d=retro&r=g)

### 󠀁[Better than css animations for gutenberg blocks](https://wordpress.org/support/topic/better-than-css-animations-for-gutenberg-blocks/)󠁿

 [michaellili](https://profiles.wordpress.org/michaellili/) 2025年4月1日

fr fr no cap

![](https://secure.gravatar.com/avatar/99c629ef4f49adfc7d6d0ac415358e999679b11e49329011854f10e8a481c055?
s=60&d=retro&r=g)

### 󠀁[Awesome plugin!](https://wordpress.org/support/topic/awesome-plugin-7341/)󠁿

 [andrewstarr](https://profiles.wordpress.org/andrewstarr/) 2025年3月14日

Makes animating your block content super easy. Love it! Support queries are answered
fantastically quick, so that’s another big plus point.

![](https://secure.gravatar.com/avatar/dd3cff86ce7a39594c47e5a9a37bffd1e5faa657e6fc634c2a49a1d9b6fb97fa?
s=60&d=retro&r=g)

### 󠀁[Amazing great plugin](https://wordpress.org/support/topic/amazing-great-plugin-6/)󠁿

 [Tony Fitzpatrick80](https://profiles.wordpress.org/adambrown82/) 2025年2月15日

Love this plugin that brought my static website to life. With these cool, easy-to-
configure animations, I can now compete with the big boys.

 [ 27件のレビューをすべて表示 ](https://wordpress.org/support/plugin/animations-for-blocks/reviews/)

## 貢献者と開発者

Animations for Blocks はオープンソースソフトウェアです。以下の人々がこのプラグイン
に貢献しています。

貢献者

 *   [ ska-dev ](https://profiles.wordpress.org/skadev/)

“Animations for Blocks” は1ロケールに翻訳されています。 [翻訳者](https://translate.wordpress.org/projects/wp-plugins/animations-for-blocks/contributors)
のみなさん、翻訳へのご協力ありがとうございます。

[“Animations for Blocks” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/animations-for-blocks)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/animations-for-blocks/)
するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/animations-for-blocks/)
をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/animations-for-blocks/)
を [RSS](https://plugins.trac.wordpress.org/log/animations-for-blocks/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

#### 1.2.5

 * Tested with WordPress 6.9.
 * Update Lenis to 1.3.15.
 * `@wordpress/*` パッケージを更新しました。

#### 1.2.4

 * Added a donate link on the plugin page – supporters get a 50% off coupon for 
   my brand new WordPress theme.
 * Added notice that lets you know when your device has `prefers-reduced-motion`
   enabled.
 * Added plugin option “Ignore reduced motion preference”.
 * Improved help text and FAQs.
 * Update Lenis to 1.3.11.
 * `@wordpress/*` パッケージを更新しました。
 * Tested with Gutenberg 21.7.0.

#### 1.2.3

 * Change Animate on Scroll front end style media from `all` to `screen and (prefers-
   reduced-motion: no-preference)`.

#### 1.2.2

 * 属性を持たない解析済みブロックで発生する `Warning: Undefined array key "attrs"`
   を修正しました。
 * 修正: `Incorrect use of <label for=FORM_ELEMENT>`
 * 非推奨となった `wp.components.ButtonGroup` を置き換えました。
 * Lenis を 1.3.8 に更新しました。
 * `@wordpress/*` パッケージを更新しました。

#### 1.2.1

 * WordPress 6.8 に対応しました。
 * Lenis を 1.2.3 に更新しました。
 * `@wordpress/*` パッケージを更新しました。

#### 1.2

 * フロントエンドのスクリプトを defer 属性付きで読み込むようにしました。
 * 「アセットの遅延読み込み」オプションのデフォルト値を 有効 (true) に変更しました。
 * 新アニメーション 「Scale」 を追加しました。わずかに拡大または縮小された状態（
   不透明度 0）から、元のサイズに変化しながらフェードインするアニメーションです。
 * 新アニメーション 「Default」 を追加しました。プラグイン設定で「Default」アニメーション
   を選択したブロックに適用するアニメーションを設定できます。
 * 新アニメーション 「Inherit」 を追加しました。「アニメーションコンテナ」ブロック
   が「アニメーションプロバイダー」になるオプションが追加され、内部のブロックで「
   Inherit」アニメーションを選択するとプロバイダー側のアニメーションが適用されます。
   また、プロバイダーはアニメーション開始を一定時間ずつずらすこともできます。
 * 軽量スムーススクロールライブラリ Lenis を同梱しました。プラグイン設定から有効
   化できます。
 * AOS が window.AOS としてフロントエンドで利用可能になりました (`window.AOS`)。
 * WordPress 6.7 で動作確認済
 * WordPress 6.6 以上が必要になりました。
 * PHP 8.1 が必要になりました。
 * `@wordpress/*` パッケージを更新しました。

#### 1.1.6

 * WordPress 6.6で動作確認済み
 * `@wordpress/*` パッケージを更新しました。
 * 「アニメーションコンテナ」ブロックで `block.json` を使用するようにしました。
 * ブロックスタイルを別のスタイルシートに分離しました。
 * RangeControl におけるラベルと値の取り違えを修正しました。
 * 一部の不要になったコードを削除しました。
 * WordPress 6.6 未満でも動作するように、 `react-jsx-runtime` を同梱しました。

#### 1.1.5

 * WordPress 6.5で動作確認済み
 * アニメーションコントロールの表示位置を選べるオプションを追加しました。「スタイル」
   タブ、または「高度な設定」インスペクターに移動できます。
 * `@wordpress/*` パッケージを更新しました。

#### 1.1.4

 * バージョンを誤って更新しました。

#### 1.1.3

 * `__unstableElementContext` が削除されたことによる、最新の Gutenberg プラグイン
   でのクラッシュを修正しました。
 * `@wordpress/*` パッケージを更新しました。

#### 1.1.2

 * 自動アニメーションプレビューを無効化できるオプションを追加しました。
 * 現在のページにアニメーション付きブロックがある場合のみ、アセットを遅延読み込み
   できるオプションを追加しました。
 * `@wordpress/*` パッケージを更新しました。
 * スクリーンショットを更新

#### 1.1.1

 * HTML 属性の追加に `WP_HTML_Tag_Processor` を使用しました。
 * 複数のルート要素をレンダリングするブロックは、自動的にラップされなくなりました。
   これを行うには Animation container ブロックを使用してください。
 * シンプル化のため、すべての PHP コードをメインファイルに移動しました。

#### 1.1.0

 * アニメーションプレビューが iframe 化されたブロックエディターでも動作するように
   なりました。
 * コントロールを再構築しました。
 * アニメーション設定をコピー & ペーストできる機能を追加しました。
 * Animation container ブロックを API バージョン2 に更新しました。
 * ブロックの `render_callback` を上書きする代わりに、アニメーション属性を適用する
   ため `render_block` フィルターを使用するようにしました。
 * アニメーションが付与された HTML 要素に追加される属性を変更できる `anfb_aos_attributes`
   フィルターを追加しました。
 * 一部のコードを TypeScript に変換しました。
 * `@wordpress/*` パッケージを更新しました。
 * WordPress 6.2-RC1 で動作検証済み。

#### 1.0.6

 * 動的ブロックにおける `once` と `mirror` オプション検出を修正しました。
 * `@wordpress/*` パッケージを更新しました。
 * WordPress 6.1.1 で動作検証済み。

#### 1.0.5

 * `@wordpress/*` パッケージを更新しました。
 * WordPress 6.0で動作検証済み。
 * GitHub リンクを追加しました。
 * プラグインから `src` フォルダーを削除しました。

#### 1.0.4

 * ブロックのアンカーセレクターを更新しました。

#### 1.0.3

 * AOS ライブラリに生成されたバージョン番号を使用するようにしました。

#### 1.0.2

 * 動的ブロックのエンコードを修正しました。

#### 1.0.1

 * 非対応ブロックを追加しました。
 * Animation Container ブロックを「デザイン」カテゴリーに移動しました。

#### 1.0.0

 * 初回リリース。

## メタ

 *  バージョン **1.2.5**
 *  最終更新日 **5か月前**
 *  有効インストール数 **10,000+**
 *  WordPress バージョン ** 6.6またはそれ以降 **
 *  検証済み最新バージョン: **6.9.4**
 *  PHP バージョン ** 8.1またはそれ以降 **
 *  言語
 * [English (US)](https://wordpress.org/plugins/animations-for-blocks/)、[Japanese](https://ja.wordpress.org/plugins/animations-for-blocks/).
 *  [プラグインを翻訳](https://translate.wordpress.org/projects/wp-plugins/animations-for-blocks)
 * タグ
 * [animate](https://ja.wordpress.org/plugins/tags/animate/)[animation](https://ja.wordpress.org/plugins/tags/animation/)
   [block](https://ja.wordpress.org/plugins/tags/block/)[gutenberg](https://ja.wordpress.org/plugins/tags/gutenberg/)
   [Slide](https://ja.wordpress.org/plugins/tags/slide/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/animations-for-blocks/advanced/)

## 評価

 5つ星中4.8つ星

 *  [  25 5-星レビュー     ](https://wordpress.org/support/plugin/animations-for-blocks/reviews/?filter=5)
 *  [  0 4-星レビュー     ](https://wordpress.org/support/plugin/animations-for-blocks/reviews/?filter=4)
 *  [  1 3-星レビュー     ](https://wordpress.org/support/plugin/animations-for-blocks/reviews/?filter=3)
 *  [  1 2-星レビュー     ](https://wordpress.org/support/plugin/animations-for-blocks/reviews/?filter=2)
 *  [  0 1-星レビュー     ](https://wordpress.org/support/plugin/animations-for-blocks/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/animations-for-blocks/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/animations-for-blocks/reviews/)

## 貢献者

 *   [ ska-dev ](https://profiles.wordpress.org/skadev/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/animations-for-blocks/)

## 寄付

このプラグインが今後も改善できるよう応援しませんか ?

 [ このプラグインに寄付 ](https://buymeacoffee.com/skadev)