アニメーションについて

Google Web Designer でアニメーションを作成するには、アニメーションの開始点と終了点を定義するキーフレームを使用します。各キーフレームでアニメーション要素のプロパティを設定すれば、キーフレーム間のトゥイーン(移行)は Google Web Designer によって処理されます。

例:

  1. 最初のキーフレームでは、ページの左側に赤い長方形を配置します。
  2. 2 番目のキーフレーム(2 秒後に表示される)では、長方形の色と位置のプロパティを変更して、ページの右側に青い長方形を配置します。

この場合、Google Web Designer によって、ページ上を横断しながら色を赤~紫~青と変化させる長方形のアニメーションが生成されます。

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

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

アニメーションを作成するモード

クイックモードと詳細モードの 2 つのアニメーション モードから選択します。2 つのモードは、いつでも切り替えることができます。

クイックモード

アニメーションをシーン単位で作成します。つまり、シーンごとにページ全体のビューを追加し、アニメーション化するすべての要素に変更を加えます。タイムラインには、各シーンのサムネイルがストーリーボードのように順番に表示されます。詳細

詳細モード

要素を個別にアニメーション化して、より複雑なアニメーションを作成できます。タイムライン上に要素ごとに固有のレイヤが割り当てられ、各要素のタイミングに基づいてタイムラインに沿ってキーフレーム マーカーが配置されます。詳細

AMP HTML 広告の制限事項

AMP HTML 広告の場合、アニメーション化できるのは以下の CSS プロパティに限られます。

  • transform(要素を移動、回転、拡大縮小したり、歪めたりできます)
  • opacity
  • visibility
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。

さらにサポートが必要な場合

問題を迅速に解決できるよう、ログインして追加のサポート オプションをご利用ください。

検索
検索をクリア
検索を終了
Google アプリ
メインメニュー
ヘルプセンターを検索
true
5050422
false