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」にしておく
という感じ。