/* ============================================================= * INNOVACTORY Block Theme - animations.css * * クラシック版と同一の data-animate / is-visible 方式。 * ブロックテーマでは render_block フィルタ（functions.php）が * section クラスを持つ wp:group に data-animate を自動付与する。 * * プログレッシブエンハンスメント: * → JS実行で "js" に置換 * JS無効時はコンテンツ常時表示 * ============================================================= */ .js [data-animate] { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; } .js [data-animate].is-visible { opacity: 1; transform: none; } .js [data-animate="fadeInUp"] { transform: translateY(30px); } .js [data-animate="fadeInLeft"] { transform: translateX(-30px); } .js [data-animate="fadeInRight"] { transform: translateX(30px); } .js [data-animate="fadeIn"] { transform: none; } .js [data-animate-delay="1"] { transition-delay: 0.1s; } .js [data-animate-delay="2"] { transition-delay: 0.2s; } .js [data-animate-delay="3"] { transition-delay: 0.3s; } .js [data-animate-delay="4"] { transition-delay: 0.4s; } html.no-animation [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }