アニメーションの設定

Slidde.coでは、標準のCSSキーフレームアニメーションを簡単にウェブ要素に適用できます。以下は、始めるためのステップバイステップガイドです。

サイドバーのアニメーションオプション

1. 要素を選択: ページ上の任意の要素をクリックします。
2. アニメーション モーダルを開く: 右のサイドバーで、アニメーション オプションがある一番下までスクロールします。クリックしてモーダルウィンドウを開きます。

プリセットアニメーションを使用する

• プリセットから始める: プリセットアニメーションから始めることをお勧めします。これを必要に応じて変更できます。
• さらに多くのプリセットを見つける: Animate.cssでプリセットアニメーションのリストを見つけることができます。特定のアニメーションが必要な場合はお知らせください。リストに追加できます。

アニメーションをカスタマイズする

アニメーションモーダルは、CSSキーフレームアニメーションの設定をローコードインターフェースに簡略化し、コーディングに不慣れな方でも利用しやすくしています。

キーフレームアニメーションでは、特定のパーセンテージに対するCSSプロパティを定義します。ブラウザがその移行を処理します。

例えば、4秒の持続時間を持つ次のようなキーフレームがあるとします。

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

オブジェクトは2秒間で20px下に移動し、その後2秒間で元の位置に20px上に戻ります。

問題が発生した場合やキーフレームアニメーションについてもっと学びたい場合は：

• オンラインで検索: 特定の質問をGoogleで検索してください。多くの例やリソースが利用可能です。
• CSSキーフレームチュートリアル: 詳細な情報は公式のMDNのCSSキーフレームガイドを参照してください。

子要素のアニメーション

Targetsを&>*に設定することで、ルート要素の子要素をターゲットにできます。

スタグリング遅延

遅延を次の値に変更すると、スタッガリング効果が適用されます。

targets: &>*
delay: anime.stagger(100) // 各要素に対して100msずつ遅延を増加させます。

targets: &>*
delay: anime.stagger(100, {start: 500}) // 遅延は500msから始まり、各要素に対して100msずつ増加します。

さらに例を見たい場合は、こちらをご覧ください スタッガリングの基本

CSS animation プロパティを使用する

プレーンな CSSアニメーション は、カスタムスタイル 内のすべての要素に常に利用可能です。ただし、特定のCSSルールに対して「キャンバスで無効化」をオンにする必要があるかもしれません。これにより、エディタでの編集が容易になります。