Anime.js CDNを使用したアニメーションの実装方法

<script src="https://cdn.jsdelivr.net/npm/animejs"></script>

Anime.jsを読み込んだら、さまざまなアニメーション効果を実装することができます。以下にいくつかの例を示します。

要素のフェードイン

<div id="myElement">Hello, World!</div>
<script>
  anime({
    targets: '#myElement',
    opacity: 1,
    duration: 1000,
    easing: 'easeInOutQuad'
  });
</script>

要素の移動と回転

<div id="myElement">Hello, World!</div>
<script>
  anime({
    targets: '#myElement',
    translateX: '200px',
    rotate: '180deg',
    duration: 1000,
    easing: 'easeInOutQuad'
  });
</script>

複数の要素に連続的なアニメーションを適用

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
  anime({
    targets: '.box',
    translateY: '100px',
    delay: anime.stagger(100),
    duration: 1000,
    easing: 'easeInOutQuad'
  });
</script>

上記のコード例では、Anime.jsのanime()関数を使用してアニメーションを定義しています。targetsプロパティにはアニメーションを適用する要素のセレクタを指定し、他のプロパティ（例えばopacityやtranslateXなど）を使用してアニメーションの詳細な設定を行います。

この記事では紹介しきれないほどAnime.jsには多くの機能がありますので、公式ドキュメントを参照することをおすすめします。また、CDN経由でAnime.jsを利用することで、手軽にアニメーションを実装することができます。

以上が、Anime.jsを利用したアニメーションの実装方法とコード例の紹介です。アニメーションの種類や設定は無限にありますので、自分のプロジェクトに合わせてさまざまなアニメーションを試してみてください。