data-anim

属性

data-animのすべての機能はHTML属性で制御します。JavaScriptの設定は不要。

必須

Attribute Type Default Description
data-anim string — 適用するアニメーション名。全リストはアニメーションを参照。 
<div data-anim="fadeInUp">
  Animated element
</div>

トリガーとタイミング

Attribute Type Default Description
data-anim-trigger "viewport" | "hover" | "click" | "focus" viewport アニメーションのトリガー。
data-anim-duration string 600ms アニメーションの長さ（例："400ms"、"1.2s"）。
data-anim-delay string 0ms アニメーション開始前の遅延。
data-anim-easing string ease CSSイージング関数（例："ease-out"、"cubic-bezier(0.4, 0, 0.2, 1)"）。 
<div
  data-anim="slideInRight"
  data-anim-duration="800ms"
  data-anim-delay="200ms"
  data-anim-easing="ease-out"
>
  Customized timing
</div>
slideInRight

動作

Attribute Type Default Description
data-anim-once "true" | "false" true trueの場合、アニメーションは1回のみ再生。falseの場合、トリガーのたびに再生。
data-anim-offset number 0 トリガー前のビューポートオフセット（ピクセル）。
data-anim-mirror "true" | "false" false 要素がビューポートを離れるときにアニメーションを逆再生。 
<div
  data-anim="zoomIn"
  data-anim-once="false"
  data-anim-offset="100"
>
  Repeats with 100px offset
</div>

スタガー

Attribute Type Default Description
data-anim-stagger string 100ms スタガーされた子アニメーション間の遅延。
data-anim-stagger-pattern "start" | "end" | "center" | "edges" start スタガー順序のパターン。 
<div data-anim-stagger="150ms" data-anim-stagger-pattern="center">
  <div data-anim="fadeInUp">Item 1</div>
  <div data-anim="fadeInUp">Item 2</div>
  <div data-anim="fadeInUp">Item 3</div>
</div>

レスポンシブ

Attribute Type Default Description
data-anim-disable string — 特定のブレークポイントでアニメーションを無効化（例："mobile"、"tablet"）。
data-anim-mobile string — モバイル画面用のアニメーションオーバーライド。 
<!-- Disable on mobile -->
<div data-anim="slideInLeft" data-anim-disable="mobile">
  Desktop only animation
</div>

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

応用

Attribute Type Default Description
data-anim-fill "forwards" | "backwards" | "both" | "none" forwards CSS animation-fill-mode。
data-anim-iteration number | "infinite" 1 アニメーションの再生回数。 
<div
  data-anim="pulse"
  data-anim-iteration="infinite"
>
  Infinite pulse
</div>