HTML属性で発火するピュアCSSアニメーション。data属性を追加するだけ。
3層の防御でFOUCを完全防止。手動のCSS対応は不要。
超軽量。依存なし。読み込み5ms以下。ほとんどのfaviconより小さい。
ReactとVueでdata-anim属性の完全な自動補完。インポートするだけ。
設定ファイル不要。ビルド不要。フレームワーク不要。
<!-- 1. Add the script -->
<script src="https://unpkg.com/data-anim@latest/dist/data-anim.js"></script>
<!-- 2. Add the attribute -->
<div data-anim="fadeInUp">
Your content animates on scroll
</div>
<!-- 3. There is no step 3 -->アニメーションライブラリ
繊細なフェードから楽しいバウンスまで。すべてGPUアクセラレーション対応で、prefers-reduced-motionを尊重します。
透明度遷移と方向付き移動のスムーズなアニメーション。
fadeInfadeInUpfadeInDownfadeInLeftfadeInRight 全幅のエントランスアニメーション。
slideInUpslideInDownslideInLeftslideInRight インパクトのあるスケールベースのエントランス。
zoomInzoomOutzoomInUpzoomInDown オーバーシュートを伴う楽しいマルチステップアニメーション。
bouncebounceInbounceInUpbounceInDown 視線を引くインプレースエフェクト。hoverやclickに最適。
shakepulsewobbleflipswingrubberBand 回転エントランス、ブラーリビール、その他。
rotateInblurclipRevealtypewriter