今回は、NiGLANの制作するホームページで表現する、画像や文字の動きをご紹介します。
動きをカスタムして欲しい場合、こちらの一覧をご参考にご依頼ください。
1:フリップインX
まず最初はフリップインXです。X軸を中心に文字が揺れます。

2:フリップインY
続いてフリップインYです。Y軸を中心に文字が揺れます。この際、要素を形成するブロックの中心がY軸となります。

3:フェードイン
フェードインは半透明の状態から、要素が姿を表します。シンプルですが、もっともよく使われる動きです。

4:フェードインダウン
フェードインダウンは要素を構成するブロックの上から要素が現れます。こちらもよく使われる動きです。

5:フェードインレフト
フェードインレフトは要素を構成するブロックの左から要素が現れます。

6:フェードインライト
フェードインライトは要素を構成するブロックの右から要素が現れます。

7:フェードインアップ
フェードインアップは要素を構成するブロックの下から要素が現れます。

8:スライドインダウン

9:スライドインレフト

10:スライドインライト

11:ロールイン

12:ロールアウト

13:バウンス

14:バウンスイン

15:バウンスインアップ

16:バウンスインダウン

17:バウンスインレフト

18:バウンスインライト

19:フェードインアップビッグ

20:フェードインダウンビッグ

21:フェードインレフトビッグ

22:フェードインライトビッグ

23:フラッシュ

24:フリップ

25:ライトスピードイン

26:パルス

27:ローテートイン

28:ローテートインアップレフト

28:ローテートインダウンレフト

29:ローテートインアップライト

30:ローテートインダウンライト

31:シェイク

32:スイング

32:Tada!

33:ウィグル

34:ワーブル

35:インファナトゥフジャンプ

36:ズームイン

このように、要素に動きを加える事ができます。また、その動作自体の速さ、動作の現れるタイミングを細かく設定できます。
動きをつける目的は、「注目して欲しいポイント」や「長文の箇所で飽きさせない為の工夫」として利用する事が最適です。
動きをつけ過ぎてしまうと、ページの読み込み速度が遅くなってしまい、検索順位を落としてしまう可能性があるので、適度に目的を持って利用する事がポイントです。