動くところに目が行くのは、本能と言ってもいいかもしれません。
と、いうことは、文字が動いたら…無意識に目が行く、注目してもらえるかもしれませんよね。
WING(AFFINGER5)では、文字にアニメーションを付けて動かすことも簡単なんです。
今回は、アニメーションについて紹介していきたいと思います。
WING(AFFINGER5)アニメーション機能の使い方は？
WING（AFFINGER５）のアニメーションの使い方は簡単。
「タグ」→「ショートコード補助」→「アニメーション（クラス）」を選択します。
アニメーションでは、１６種類の動きを選ぶことができますよ。
ドラッグで文字を選択して、または画像を選択してから、アニメーションを選んでくださいね。
しかし、しかし、残念ながら私の場合（バージョン20200414）では反映されていませんでした。
文字を選択して、「ショートコード補助」から「アニメーション」を選んでも、元の文字や画像が消えてしまうのです。
AMP化しているからでしょうか。
「スタイル」からでも「アニメーション」を選択することができて、こちらからだと動くんです。
わぁーひよこさんも喜んでくれています。（”シェイク”使用）
アニメーションが動かないときスタイルを表示させるには？
良かった、一件落着…と思いきや、自分の記事投稿画面に「スタイル」がない！という方はいませんか？
「スタイル」は、プラグイン「TinyMCE Advanced」を入れることで表示できます。
設定画面のブロックエディターでも旧エディターでも、ツールバーに「スタイル」を移動させることで記事投稿画面に「スタイル」が反映されます。
便利なので、入れておいて損はないと思います。
WING（AFFINGER５）アニメーションの種類
WING（AFFINGER５）のアニメーションは、文字でも画像でも動かすことができます。
記事投稿画面では、このように「動」マークが目印に表示されます。
45°揺れ
ベル揺れ
横揺れ
縦揺れ
点滅
バウンド
回転
ふわふわ
大小
シェイク
シェイク（強）
拡大（ゆれ）
過ぎる
戻る
バースト
落ちる
マウスオーバーアニメーションの方法
マウスオーバーで、例えば、下のひよこさんにマウスカーソルが重なったときにアニメーション（”バウンド”使用）で動くようになっています。
マウスカーソルが離れると、動かなくなるので控えめでいいですよね。
アニメーションをマウスオーバーにするのは簡単で、クラスの後ろに「-hover」をつけるだけです。
こちらは、「アニメーション」という文字を動かそうとしています。
クラシックエディターでいう、テキストモードで
faa-wrench animated のすぐ後に「-hover」をつけ、「faa-wrench animated-hover 」とすると、
ずっと動いているアニメーションから、マウスオーバーのアニメーションになります。
WING(AFFINGER5)のアニメーションが動かない？解決法とマウスオーバー方法も まとめ
WING（AFFINGER５）アニメーション機能で動かすときの注意点をまとめてみました。
アニメーション機能は、AFFINGER5及びEX版のver20180807以上の機能です。
AMP不可となっていましたので、AMP化されている場合は動かないようです。
（「スタイル」からお試しください）
同じ範囲に２種類のアニメーションはつけられません。
簡単な操作で、インパクトのあるアニメーションをつけることができるので、WING（AFFINGER５）をもっとよく知りたい方は、こちらのページで詳しく書いています。