ここで言うアニメーション効果とは、ページ表示の際の画面切替でのアニメーション効果を言っています。画面切替の単位は、セクション、カラム、ウジェット毎で、同じようなアニメーション効果が利用できます。今回は、ウジェット単位でのアニメーション効果の事例を紹介します。
下記の画像の上の英字の見出しタイトルが、アニメーション効果の名称になっています。このサイトの別ページの「オンマウスで画像変形」では、画像にオンマウスする度に画像変形の仕様が見れましたが、今回は画像にオンマウスしても何も変化がありません。
再度、効果のほど確認したい場合は、ブラウザの「ページの再読み込み」機能で変化の内容が確認できます。それにしても豊富なアニメーション効果の種類に、ただただ驚いています。無料のElemntorでここまで出来るなって凄いとしか言えません。
主なアニメーション効果の名前と意味
fade in
zoom in
bounce in
slide in
rotate in
フェードイン(徐々に現れる)
ズームイン(次第に大きくなる)
バウンドイン(跳ね返る)
スライドイン
回転する
Fade In Left
![](https://morisaki.xyz/wp-content/uploads/2018/05/vication5.jpg)
Fade In Down
![](https://morisaki.xyz/wp-content/uploads/2018/05/vication3.jpg)
Fade In Right
![](https://morisaki.xyz/wp-content/uploads/2018/05/vication4.jpg)
Zoom In Right
![](https://morisaki.xyz/wp-content/uploads/2018/09/sample-3.jpg)
Zoom In Up
![](https://morisaki.xyz/wp-content/uploads/2018/09/sample-1.jpg)
Zoom In Left
![](https://morisaki.xyz/wp-content/uploads/2018/09/sample-6.jpg)
Bounce In Left
![](https://morisaki.xyz/wp-content/uploads/2018/05/architecture_1.jpg)
Bounce In Down
![](https://morisaki.xyz/wp-content/uploads/2018/05/architecture_3.jpg)
Bounce In Right
![](https://morisaki.xyz/wp-content/uploads/2018/05/about_2.jpg)
Slide in Right
![](https://morisaki.xyz/wp-content/uploads/2018/05/experts_3_org.jpg)
Slide In Up
![](https://morisaki.xyz/wp-content/uploads/2018/05/experts_2_org.jpg)
Slide In Left
![](https://morisaki.xyz/wp-content/uploads/2018/05/experts_1_org-1.jpg)
Rotate In Up Left
![](https://morisaki.xyz/wp-content/uploads/2018/05/a0777_000030.jpg)
Rotate In Down Left
![](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-255349.jpg)
Rotate In Up Right
![](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247287.jpg)
Bounce
![](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247322.jpg)
Shake
![](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247298.jpg)
Rubber Band
![](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-255339.jpg)