タイムラインに作成したアニメーションは、アニメーション要素を編集したり、キーフレームとスパンに変更を加えたり、アニメーションをループさせたりして調整できます。
このページの内容:
アニメーション要素の編集
アニメーション化した要素のプロパティを変更した場合に、プレイヘッドの位置にまだキーフレームがなければ、キーフレームがその位置に自動的に追加されます。また、既存のキーフレームを選択して、タイムライン上のその特定のポイントにある要素を編集することもできます。その要素の前後にアニメーションがある場合は、変更されたプロパティを使用して開始または終了するように調整されます。
最初のキーフレームでプロパティを変更する場合は、要素の基本プロパティを編集します。後続のキーフレームは、そのキーフレームで別のプロパティ値を指定しない限り、基本プロパティを継承します。
複数のキーフレームを選択して 1 つまたは複数の要素のプロパティを編集すると、選択したすべてのキーフレームで変更が適用されます。
アニメーション タイムライン全体に対して要素を表示する必要がない場合は、視認性の範囲を設定して、対象範囲外で非表示にすることもできます。
アニメーションのイージングの変更
アニメーションのイージングを変更するには、変更するスパンを右クリックし、新しいイージングを選択するか、[イージング オプション...] を選択してカスタム イージングを指定します。
アニメーションのループ
- タイムラインで、ループさせたいアニメーション レイヤにある「アニメーションの繰り返しを設定」ボタン
をクリックします。
- ポップアップで、次のいずれかを選択します。
- [無制限] - アニメーションが無限にループします。
- [___ 回] - アニメーションが指定された回数分ループします。
- [なし] - アニメーションはループしません。
視認性の範囲が設定されたレイヤは、ループできません。
レイヤをループすると、パブリッシュ後のドキュメントでアニメーションが変更されます。
アニメーションのループ再生は、ステージ上のプレビューにのみ影響します。
タイムラインでのキーフレームとスパンの調整
キーフレームとスパンの選択
以下の各方法でキーフレームとスパンを選択することができます。
- キーフレームまたはスパンをクリックして選択します。連続する 2 つのキーフレームを選択すると、それらの間のスパンも選択されます。同様に、スパンを選択すると、その両側のキーフレームも自動的に選択されます。
- Shift キーを押しながらクリックすると、隣接する複数のキーフレームまたはスパンを選択できます。
- Ctrl キーを押しながらクリック（Windows）または ⌘ キーを押しながらクリック（Mac）すると、隣接していないキーフレームまたはスパンを選択または選択解除できます。
- クリックとドラッグによって長方形の選択マーキーでキーフレームを囲むと、その選択マーキー内のキーフレームをすべて選択できます。スパンは、マーキー内に自身の両側のキーフレームが含まれている場合にのみ選択されます。
- Ctrl キーを押しながらクリックしてマーキーをドラッグ（Windows）または ⌘ キーを押しながらクリックしてマーキーをドラッグ（Mac）すると、キーフレームが選択された状態と選択解除された状態を切り替えることができます。長方形の内側の現在選択されていないキーフレームが選択され、すでに選択されているキーフレームは選択解除されます。この場合も、スパンはマーキー内に自身の両側のキーフレームが含まれている場合にのみ、選択や選択解除の対象となります。
-
タイムライン内のレイヤをダブルクリックすると、レイヤ上のすべてのキーフレーム、スパン、視認性の範囲のハンドルを選択できます。
キーフレームとスパンの移動
選択したキーフレームまたはスパンは、タイムライン上の別の位置にドラッグして移動できます。これに応じて、アニメーションのタイミングが変更されます。
アニメーションのスケーリング
キーフレームの間隔調整を維持しながら、アニメーションをスケーリングして、長くしたり短くしたりできます。アニメーションをスケーリングする方法は次のとおりです。
- スケーリングするキーフレームまたはスパンを選択します。これらは別々のレイヤにある場合があります。
- Shift キーを押しながら、選択したキーフレームの 1 つを左右にドラッグします。アニメーションの中間点から遠ざかるようにドラッグするか、近づくようにドラッグするかに応じて、アニメーションの長さが伸縮します。選択した他のキーフレームは、この長さに応じて移動します。ただし、末端のキーフレームは固定されます。
- タイムラインのスナップが有効になっている場合、スナップはドラッグするキーフレームにのみ適用されます。
- キーフレームは重ねることができません。また、別のキーフレームから 0.1 ミリ秒以上離して配置する必要があります。
- 未選択のキーフレームは移動されませんが、それらのキーフレームによって選択したキーフレームの移動が制限されることがあります。
キーフレームのコピーと貼り付け
キーフレームをコピーして、同じレイヤ上の別の時間の位置、別のレイヤ、別のページやドキュメントのタイムラインに貼り付けることができます。貼り付けたキーフレームではアニメーション プロパティは保持されますが、アニメーションのイージングやモーションパスは保持されません。
キーフレームは次の方法でコピーして貼り付けることができます。
-
コピーするキーフレームを選択し、Ctrl キー（Windows）または ⌘ キー（Mac）を押しながら C キーを押します。次に、タイムライン上の別の位置をクリックして、コピー先とする 1 つまたは複数のレイヤを選択します。Ctrl キー（Windows）または ⌘ キー（Mac）を押しながら V キーを押して貼り付けます。
-
コピーするキーフレームを右クリックします。ポップアップから [キーフレームをコピー] を選択し、コピー先のレイヤでタイムライン上の別の位置を右クリックして、ポップアップから [キーフレームを貼り付け] を選択します。
-
Windows または Mac の場合は、Alt キー（Windows）または option キー（Mac）を押しながらキーフレームをクリックしてドラッグし、Linux の場合は、キーフレームをクリックしてから Alt キーを押してドラッグすると、ドラッグ先の位置にキーフレームが複製されます。この方法は、ページ間、ドキュメント間、ネストされたアニメーションのタイムライン間では使用できません。
キーフレームをコピーし、それまでキーフレームのなかったレイヤに貼り付ける場合、貼り付け先が 0 秒の位置以外であれば、キーフレームの貼り付けとともに 0 秒の位置に新しいキーフレームが自動的に挿入されます。
キーフレームをコピーして、既存のキーフレームに貼り付ける場合、貼り付けたキーフレームのアニメーション プロパティによって、既存のキーフレームの対応するアニメーション プロパティが上書きされます。
キーフレームの削除
キーフレームを削除するには、キーフレームを右クリック（Windows）または control キーを押しながらクリック（Mac）し、ポップアップから [削除] を選択します。
CSS パネルの keyframes ルールの編集
CSS の keyframes ルール（キーワード @keyframes で始まる）に精通している場合は、CSS パネルを使用してデザインビューでアニメーション スタイルを表示、編集できます。タイムラインとステージでは、パネルに加えた変更が自動的に反映されます。
keyframes ルールの操作
- アニメーション要素を 1 つ選択し、CSS パネルでその要素の keyframes ルールを表示します。
- [キーフレームを挿入] をクリックして、既存のキーフレーム間にキーフレームを追加します。
- キーフレームの割合を編集します。
- キーフレームのアニメーション プロパティを追加、編集、削除します。
- プロパティ名の横にあるチェックボックスをクリックすると、アニメーション全体のアニメーション プロパティのオンとオフを切り替えることができます。
- 割合を消去するか、そのキーフレームのアニメーション プロパティをすべて削除して、個々のキーフレームを削除します。
- keyframes ルールを選択し、パネルの下部にある [選択したルールを削除します] ボタン
をクリックして、要素の CSS アニメーションをすべて削除します。
制限事項
- イージングは変更できません。
- 最後のキーフレームの後にキーフレームを追加することはできないため、代わりにタイムラインを使用します。
詳しくは、CSS パネルの使用方法をご覧ください。