Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ

ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。

CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。

さまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ

AnimXYZ
AnimXYZ -GitHub

AnimXYZの特徴

AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。

CSSアニメーションのライブラリ -AnimXYZ

AnimXYZ

実装はCSSの外部ファイルとしてだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。

AnimXYZの特徴
  • アニメーションの実装が簡単
    アニメーションを作成するのは非常に簡単。例えば、フェードとスケールを組み合わせる場合は、xyz="fade small up"と記述するだけです。
  • カスタマイズも簡単
    CSSの変数を使って、どんなアニメーションでも思いのままに微調整できます。--xyz-translate-y: 42%;
  • パフォーマンス
    アニメーションは非常に滑らかに動作します。ファイルサイズは基本機能で2.68kB、ユーティリティを含めると11.4kBです。
  • 少ないコード
    CSSアニメーションはキーフレームを使わずに、実装できます。煩わしさがない分、楽しさも倍増します。
  • ネストとスタッガー
    ネストされたアイテムを親と同期してアニメーションさせながら、要素のリストを順または逆方向にずらすことができます。
  • プラグ&プレイ
    HTMLとCSSで動作するだけでなく、VueやReactのプラグイン(近日公開予定)を使用することで、さらなるパワーを得ることができます。

AnimXYZのデモ

デモでは、AnimXYZで実装できるさまざまなアニメーションとその実装コードを確認できます。

CSSアニメーションのライブラリ -AnimXYZ

AnimXYZ

上部からアニメーションの種類を選択し、さまざまな組み合わせを楽しめます。HTML, Vue, Reactのコードも生成され、コピペで利用できます。

また、ページを表示する時に強調する要素をアニメーションさせたり、グリッドやモーダルやタブなどのデモも楽しめます。

CSSアニメーションのライブラリ -AnimXYZ

ページのデモ

CSSアニメーションのライブラリ -AnimXYZ

グリッドのデモ

CSSアニメーションのライブラリ -AnimXYZ

モーダルのデモ

CSSアニメーションのライブラリ -AnimXYZ

タブのデモ

AnimXYZの使い方

AnimXYZのインストール

さまざまなインストール方法が用意されています。
まずは、パッケージマネージャーからのインストール。

AnimXYZは、Sassのプロジェクトでも簡単に利用できます。

CSSの外部ファイルとして利用することももちろんできます。

VueまたはReactプロジェクトでAnimXYZを使用する場合は、AnimXYZコンポーネントも使用することを強くお勧めします。

インストール後、VueAnimXYZをプロジェクトにインポートし、プラグインを使用するようにVueインスタンスに指示する必要があります。

Vue 2.xやReactは、下記をご覧ください。

sponsors

top of page

©2021 coliss