CSS トランジションパネルを使用して、CSS3 トランジションを作成、変更、削除できます。

CSS3 トランジションを作成するには、エレメントのトランジションプロパティの値を指定して、トランジションクラスを作成します。エレメントを選択してからトランジションクラスを作成すると、トランジションクラスが選択したエレメントに自動的に適用されます。

生成された CSS コードを現在のドキュメントに追加するか、外部 CSS ファイルを指定するかを選択できます。

CSS3 トランジション効果の作成および適用

  1. (オプション)トランジションを適用するエレメント(段落、見出しなど)を選択します。または、トランジションを作成して、後でエレメントに適用することもできます。

  2. ウィンドウCSS トランジションを選択します。

  3. をクリックします。

  4. 新規トランジションダイアログボックスのオプションを使用してトランジションクラスを作成します。

    ターゲットルール

    セレクターの名前を入力します。セレクターには、タグ、ルール、ID、複合セレクターなどの任意の CSS セレクターを使用できます。例えば、すべての <hr> タグにトランジション効果を追加するには、hr と入力します。

    トランジションの有効化

    トランジションを適用する状態を選択します。例えば、マウスがエレメント上に移動したときにトランジションを適用する場合は、ホバーオプションを使用します。

    すべてのプロパティに同じトランジションを使用

    トランジションするすべての CSS プロパティに同じ継続時間遅延タイミングを指定する場合は、このオプションを選択します。

    プロパティごとに異なるトランジションを使用

    トランジションする各 CSS プロパティに異なる継続期間遅延タイミングを指定する場合は、このオプションを選択します。

    プロパティ

     をクリックしてトランジションに CSS プロパティを追加します。

    デュレーション

    トランジション効果のデュレーションを秒またはミリ秒で入力します。

    遅延

    トランジション効果が開始するまでの時間(秒またはミリ秒)です。

    タイミング機能

    選択可能なオプションからトランジションスタイルを選択します。

    終了値

    トランジション効果の終了値です。例えば、トランジション効果の最後にフォントサイズを 40 px に増やす場合は、フォントサイズのプロパティに 40 px を指定します。

    トランジションの作成場所を選択

    現在のドキュメントにスタイルを埋め込むには、「現在のドキュメントのみ」を選択します。

    CSS3 コード用の外部スタイルシートを作成する場合は、「新規スタイルシートファイル」を選択します。「トランジションを作成」をクリックすると、新しい CSS ファイルの保存場所を指定するよう求められます。作成されたスタイルシートは、トランジションの作成場所を選択メニューに追加されます。

CSS3 トランジション効果の編集

  1. CSS トランジションパネルで、編集するトランジション効果を選択します。

  2. クリック  .

  3. トランジションを編集ダイアログを使用して、トランジションに以前に入力した値を変更します。

トランジションの CSS ショートハンドを無効にする

  1. 編集環境設定を選択します。

  2. CSS スタイルを選択します。

  3. ショートハンドを使用」で、「トランジション」の選択を解除します。


本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー