动画简介

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

例如:

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

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

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

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

动画制作模式

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

快速模式

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

高级模式

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

针对 AMPHTML 广告的限制

AMPHTML 广告中,只能为以下 CSS 属性添加动画效果:

  • transform(可让您移动、旋转、缩放和扭曲元素)
  • opacity
  • visibility
该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

登录可获取更多支持选项,以便快速解决您的问题