Google Web Designer でアニメーションを作成するには、アニメーションの開始点と終了点を定義するキーフレームを使用します。各キーフレームでアニメーション要素のプロパティを設定すれば、キーフレーム間のトゥイーン（移行）は Google Web Designer によって処理されます。
例:
- 最初のキーフレームでは、ページの左側に赤い長方形を配置します。
- 2 番目のキーフレーム（2 秒後に表示される）では、長方形の色と位置のプロパティを変更して、ページの右側に青い長方形を配置します。
この場合、Google Web Designer によって、ページ上を横断しながら色を赤～紫～青と変化させる長方形のアニメーションが生成されます。
CSS では、既存の HTML 要素をアニメーション化することはできますが、要素の追加や削除を行うことはできません。代わりに、要素の visibility プロパティをアニメーション化することで、要素の表示と非表示を切り替えることができます。
アニメーションは CSS を使用して作成されるため、レスポンシブ デザイン ツールを使用している場合は、サイズの異なるビューポートに対してそれぞれ別のアニメーション シーケンスを作成できます。
アニメーションを作成するモード
クイックモードと詳細モードの 2 つのアニメーション モードから選択します。2 つのモードは、いつでも切り替えることができます。
クイックモードアニメーションをシーン単位で作成します。つまり、シーンごとにページ全体のビューを追加し、アニメーション化するすべての要素に変更を加えます。タイムラインには、各シーンのサムネイルがストーリーボードのように順番に表示されます。詳細 |
詳細モード要素を個別にアニメーション化して、より複雑なアニメーションを作成できます。タイムライン上に要素ごとに固有のレイヤが割り当てられ、各要素のタイミングに基づいてタイムラインに沿ってキーフレーム マーカーが配置されます。詳細 |
AMP HTML 広告の制限事項
AMP HTML 広告の場合、アニメーション化できるのは以下の CSS プロパティに限られます。
transform（要素を移動、回転、拡大縮小したり、歪めたりできます）opacityvisibility