アニメーションについて

Google Web Designer では、特定の時点のキーフレームを指定することで、アニメーションを作成できます。特定のキーフレームでアニメーション要素の CSS プロパティを設定すると、その要素は、1 つ前のキーフレームから指定キーフレームまでの移行時間の間に徐々に変化して最終的に指定プロパティになります。

CSS では、既存の HTML 要素をアニメーション化することはできますが、要素の追加や削除を行うことはできません。代わりに、要素の visibility プロパティをアニメーション化することで、要素の表示と非表示を切り替えることができます。

アニメーションは CSS を使用して作成されるため、レスポンシブ デザイン ツールを使用している場合は、サイズの異なるビューポートに対してそれぞれ別のアニメーション シーケンスを使用できます。

AMPHTML 広告に関する制限

AMPHTML 広告の場合、アニメーション化できるのは以下の CSS プロパティに限られます。
  • transform(要素を移動、回転、拡大縮小したり、歪めたりできます)
  • opacity
  • visibility

アニメーション モード

アニメーションを作成、編集する際は、クイックモードと詳細モードのいずれを使用するか選択します。2 つのモードは、いつでも切り替えることができます。

  • クイックモードでは、アニメーションをシーン単位で作成できます。ページ全体の新しいビューの追加や、アニメーション化する要素の変更などを行うことができます。タイムラインには、各シーンのサムネイルがストーリーボードのように順番に表示されます。
  • 詳細モードでは、各要素を個別にアニメーション化して、複雑なアニメーションを作成できます。タイムライン上に要素ごとに固有のレイヤが割り当てられ、各要素のタイミングに基づいてタイムラインに沿ってキーフレーム マーカーが配置されます。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。