动画简介

您可以在 Google Web Designer 中利用关键帧（用于定义动画的起点和终点）制作动画。您可以在每个关键帧设置动画元素的属性，然后 Web Designer 会处理关键帧之间的补间或中间过渡。

例如：

1. 在第一个关键帧处，页面左侧有一个红色矩形。
2. 在第二个关键帧处（2 秒后），您更改了矩形的颜色和位置属性，使其变为蓝色并位于页面右侧。

Web Designer 会生成一个动画：矩形逐渐改变颜色（期间会历经深浅不一的紫色），并在页面上移动。

CSS 可以为现有的 HTML 元素添加动画效果，但不能添加或移除元素。不过，CSS 可以通过为元素的 visibility 属性添加动画效果来隐藏和显示元素。

由于动画是利用 CSS 制作的，因此当您使用自适应设计工具时，可以针对不同尺寸的视口创建不同的动画序列。

动画制作模式

制作动画时，您可以在快速模式和高级模式之间进行选择，并可以随时在这两种模式之间切换。

快速模式 您可以按场景制作动画：添加整个页面的新视图，以及更改要添加动画效果的所有元素。时间轴会依次显示每个场景的缩略图，就像分镜画面一样。了解详情。

高级模式 要制作较为复杂的动画，您可以分别为每个元素添加动画效果。每个元素在时间轴上都有自己的层，并且关键帧标记会根据其时间设置沿时间轴分布。了解详情。

针对 AMPHTML 广告的限制

在 AMPHTML 广告中，只能为以下 CSS 属性添加动画效果：

• transform（可让您移动、旋转、缩放和扭曲元素）
• opacity
• visibility