サイトにアニメーションを入れてみよう！

最近のWEBサイトで、CSSアニメーションを使って動的に動くサイトがよく見られます。

DG-STYLEではCSSアニメーションを使ってサイトに動きを追加することができます。

上記イメージの背景もCSSアニメーションを利用した、デザインになります。

これ以外にもいろんなアニメーションを作ることができます。

それではアニメーションの使い方を説明します。

CSSアニメーションの追加方法

画面左上にあるアニメーションメニューを開きます。

1. 「＋」ボタンをクリックして、アニメーション名を入力して追加
2. デザイン設定メニューが表示されたら、「デザイン追加」クリック
3. デザイン追加で「パーツ指定」を「0%～100%」で設定
4. CSSプロパティーを入力し追加する
5. 同じ方法で「0%～100%」を追加する

追加したアニメーションの使い方

アニメーションを使いパーツを追加し、設定します。

1. 追加したパーツを「マウス右ボタン」でクリック
2. メニューから「デザイン設定」をクリック
3. 「デザインラベル」と「パーツ指定（CSSセレクター」を入力
4. 「デザイン（CSS）設定」から「animation」を入力
5. 下にメニューが表示されたら「アニメーションリスト」をクリック
6. 表示された「アニメーションメニュー」から、追加したアニメーションを選択
7. アニメーションCSSプロパティーが追加されたら、アニメーションの時間や繰り返しなどを追加する
   ※選択だけでは、「animation:$名前$;」のみ追加されます。
8. デザインを保存して完了

CSSアニメーション使う時の注意事項

DG-STYLEでは、なるべくCSSが軽量化できるように作られていますので、使われてないCSSアニメーションはCSSデータに含まないようにしています。

なので使ってないアニメーションに関してはアニメーションメニューから解除するようにしましょう。

CSSアニメーションの解除方法

1. CSSアニメーションメニューを開く
2. 解除したいアニメーションを選択
3. チェックマークが消えて解除完了

このように解除されたアニメーションはCSSデータに含まれないです。
※パーツのデザイン設定に登録したCSSは手動で消してください。

また再度使いたくなった場合は、使いたいアニメーションを選択すればチェックされます。

修正が終わったら「保存」を忘れずに！

修正が終わったら、サイトビルダー左上にある「保存」ボタンをクリックして保存してくださいね！

「Ctrl」＋「S」のショートカットでも保存できる！

慣れている人はすごく便利な「保存」ボタンを押さなくても、キーボードの「Ctrl」＋「S」キーで保存できます！