data-anim

レスポンシブ

すべてのアニメーションがモバイルに適しているわけではありません。data-animでは画面サイズに応じてアニメーションを切り替えたり無効にできます。

slideInLeft 
  
 
  

data-anim-mobile


モバイル（768px未満）でシンプルなアニメーションに切り替え。デスクトップはオリジナル、モバイルはオーバーライドを使用。


  
 
 
<div
  data-anim="slideInLeft"
  data-anim-mobile="fadeIn"
>
  Slides on desktop, fades on mobile
</div>
 
  
 
  

data-anim-disable


特定のブレークポイントでアニメーションを完全に無効化。


  
 
 
<!-- No animation on mobile -->
<div data-anim="slideInLeft" data-anim-disable="mobile">
  Desktop only
</div>

<!-- No animation on desktop -->
<div data-anim="fadeInUp" data-anim-disable="desktop">
  Mobile only
</div>
 
  
 
  


















値効果
"mobile"768px未満で無効
"desktop"768px以上で無効


モーション軽減


prefers-reduced-motion: reduceで自動的にすべてのアニメーションが無効になります。手動での対応は不要。