anime.jsを使う（JavaScript）

アニメーションをつけるのに、外部ライブラリとして
初めてanime.jsを使ってみた。

【手順】

１）githubからダウンロード ＋ 解凍 

２）anime.min.jsと自作のJavascriptファイルを
　　HTMLファイルの「script」タグに記載

<!--anime.jsを参照-->
<script type="text/javascript" src="../anime/anime.min.js"></script>
<!-- JS情報　-->
<script type="text/javascript" src="MR0002_script.js"></script>

３）自作のJavasciriptファイルにanime{ }を使って
　　アニメーション詳細を記載

window.onload = function(){

   anime({
       targets: '#index_1', //動かしたい要素
       translateX: '-700px',//相対X座標（着地点）
       translateY: '0px',//相対Y座標（着地点）
       duration: 2000, //アニメーションの時間を指定(ms)
       elasticity:100,//アニメーションの弾み具合
       loop: false, //ループを設定
       direction:'normal'
   });

     anime({
       targets: '#index_2', //動かしたい要素
       translateX: '-700px',//相対X座標（着地点）
       translateY: '0px',//相対Y座標（着地点）
       duration: 2000, //アニメーションの時間を指定(ms)
       elasticity:100,//アニメーションの弾み具合
       loop: false, //ループを設定
       direction:'normal',
       delay: 100 //開始遅延(ms)
     });

     anime({
       targets: '#index_3', //動かしたい要素
       translateX: '-700px',//相対X座標（着地点）
       translateY: '0px',//相対Y座標（着地点）
       duration: 2000, //アニメーションの時間を指定(ms)
       elasticity:100,//アニメーションの弾み具合
       loop: false, //ループを設定
       direction:'normal',
       delay: 200　//開始遅延(ms)
     });

}

この場合、３つの要素が１つずつ
（２つ目以降は delay :100ms でスタート）
バウンドしながら（elasticity）移動するようにしてみた。

【感想】

全く無知から始めた　＋　知りたい情報の探し方がよく分からず。

どんな要素にもアニメーションをつけられるかと思っていた…
が、今のところ「div」タグにしかつけられないことを発見。
（ここまでで1時間 苦戦）

それから、パワポのように「白紙からフェードインして文字が表れる」
ような「０から１」のアニメーションはできないことを理解。
（ここまでで３日…。）

右から左へ動くアニメーションをつけたい場合は

①動かしたい要素をCSS等で右寄せで表示設定しておく

②アニメーション設定で「translateX」の座標を
　マイナス設定にして右に動くようにしておく

③アニメーションで高さを変えない場合は、「translateY」
　の座標は「0」にしておく

という感じ。

【出典】
https://its-office.jp/blog/js/2017/02/18/anime.html