エレメンターでアニメーションをつけることはとても簡単です。動きを増やすたびにJS、CSSなどを手動で入れる必要はありません。だからと言って何種類ものアニメーションを入れるよりも、サイトに合わせた動きを数種類適用するのが良いかと思います。
今回は、筆者がよく使用する開始アニメーションの紹介です。
Fade In
多くのサイトで使用されるFade In（フェードイン）の動きはページのロード後、要素が表示されるときにふわっと表示され、洗練された印象を与えることができます。エレメンターでも選択項目の一番上に並んでいます。
Fade Inの参考サイト：全ての猫を幸せに。│ 株式会社ねこぜん
このサイトのファーストビューと呼ばれるサイトトップの一番上でFade Inが使用されています。
また、エレメンターでは、完全に表示されるまでかける時間、そしてその場所についてからアニメーション発火を遅らせる設定を合わせれば、より世界観に合った開始アニメーションを実現できます。
例えば、コーポレートサイトですっきりした開始アニメーションにするなら
⚫︎開始アニメーション：Fade In
⚫︎アニメーションの継続時間：普通
⚫︎アニメーション遅延(ms)：0〜100
ゆったりリラックスできるエステサロンのホームページなら
⚫︎開始アニメーション：Fade In
⚫︎アニメーションの継続時間：ゆっくり
⚫︎アニメーション遅延(ms)：300
のような具合です。
サイトの雰囲気に合わせて数値を変えることで違った印象を作ることが簡単にできます。もちろん、他の開始アニメーションを取り入れても良いと思います。
大事なことは、サイトの雰囲気を盛り上げ、制作する会社やショップの世界観を表現するためであればどんな組み合わせでも間違いはないということです。簡単に実装可能な開始アニメーションで、実際にじっくり見比べて決めると良いでしょう。
