アニメーションの設定
Slidde.coは、ウェブ要素に標準のCSSキーフレームアニメーションを簡単に適用することができます。ここでは、始めるためのステップバイステップガイドを紹介します。
サイドバーのアニメーションオプション
- 要素を選択する: ページ上の任意の要素をクリックします。
- アニメーション モーダルを開く: 右のサイドバーで、 アニメーション タブボタンをクリックすると、アニメーション オプションが表示されます。それをクリックしてモーダルウィンドウを開きます。
- プリセットから始める: プリセットアニメーションから始めることをお勧めします。後でニーズに合わせて変更できます。プリセットボタンをクリックすると、プリセットに置き換わります。ボタンの プラスアイコンをクリックすると、現在のアニメーションにプリセットが追加されます。
アニメーションのカスタマイズ
アニメーションモーダルは、CSSキーフレームアニメーションの設定をローコードインターフェースに簡略化し、コーディングに不慣れな方でもアクセスしやすくしています。
キーフレームアニメーションは、特定のパーセンテージに対するCSSプロパティを定義する場所です。そして、ブラウザがトランジションを処理します。
例えば、4秒の持続時間でこのようなキーフレームがある場合。
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
オブジェクトは2秒間下に20px移動し、その後2秒間元の位置に20px上に戻ります。
問題が発生した場合やキーフレームアニメーションについてもっと知りたい場合は：
- オンラインで検索: 特定の質問をGoogleで検索してください。たくさんの例やリソースが利用可能です。
- CSSキーフレームチュートリアル: 詳細な情報は、公式のMDNのCSSキーフレームガイドを参照してください。
トリガー
このフィールドは、アニメーションが再生されるタイミングを制御します。
- 要素が表示された: これはデフォルトの設定です。アニメーションは、要素が表示されるか、または含まれるセクションが表示されたときにトリガーされます。ハッシュセクション
- 要素が表示された（毎回再生）: 上記と同様ですが、要素が表示されるたびにアニメーションが再生されます。
- ページが読み込まれた: ページが読み込まれたときにアニメーションがトリガーされます。
ターゲット
通常、これを設定する必要はありません。デフォルト値は & で、これはルート要素を意味します。
しかし、設定が必要な場合もあります。
高度な背景 要素をアニメーション化するには、ターゲット を 最初の子要素 に設定できます。高度な背景 要素は常にルート要素の最初の子要素になるためです。
すべての子要素にスタッガー遅延を適用するには。Delay & staggering delay セクションを参照してください。
Delay & staggering delay
遅延 を1000msに設定すると、アニメーションは1000ms待機した後に再生されます。
ずれ を 50ms に設定し、ターゲットを すべての直接の子要素 に設定すると、アニメーションは各直接の子要素に適用され、以下のように待機します。
- 最初の要素、1000ms、
- 二番目の要素、1050ms、
- 三番目の要素、1100ms、
- ...
Text staggering
これは テキスト コンポーネントに対して機能します。
ずれ を設定し、ターゲットを すべての文字 に設定すると、スタッガー効果が各文字に適用されます。
CSS animation プロパティを使用する
プレーンな css animation は、CSS のすべての要素に常に利用可能です。しかし、特定のCSSルールをエディタで簡単に編集できるようにするために、Disable in canvas をオンにする必要があるかもしれません。