“CSS”面板可以显示您选择的任意元素的已定义样式规则，包括动画元素的 keyframes 规则。您还可以使用“CSS”面板的样式标签为元素的类修改样式、添加内嵌样式，以及创建新样式规则。
要查看元素的 CSS 属性列表，请切换到计算出的样式属性标签。
要在文档中创建新样式规则，请执行以下操作：
- 选择要将新样式规则应用到的元素。
- 在“CSS”面板底部点击添加规则按钮
。
- Google Web Designer 随即会生成一个独一无二的类选择器，以便您进行修改。如果您输入一个类选择器，Web Designer 会将该类添加到所选元素。
- 在用于声明新规则的括号之间，点击添加属性，然后输入 CSS 属性和值，例如
width: 209px;。 - 继续添加新的“属性/值”对，直到完全定义规则为止。
。要向元素添加内嵌样式，请执行以下操作：
- 选择所需元素。
- 在“CSS”面板中，点击内嵌样式块中的添加属性按钮。
- 添加“属性/值”对，以更改该元素的样式。
要修改样式，请执行以下操作：
- 在您的文档中选择所需元素。“CSS”面板随即会显示与该元素关联的样式规则。
- 点击相应的属性或值，以进行修改。要删除属性，请清除相应属性名称。
要启用/停用属性，请执行以下操作：
- 点击属性名称旁边的复选框。该复选框处于取消选中状态时，浏览器预览和发布的文件中将不会包含相应属性。
- 要重新启用相应属性，请再次点击对应的复选框。
动画的关键帧规则
“CSS”面板会显示 CSS 动画元素的关键帧规则（包含 @keyframes 关键字）。
要为元素创建新的关键帧规则，请执行以下操作：
- 选择一个没有动画的元素。
- 在“CSS”面板底部点击添加关键帧规则按钮
。Google Web Designer 随即会添加起始和结束关键帧（0% 和 100%），并将动画时长默认设置为 1 秒。
- 要为关键帧添加动画属性，请点击添加属性，然后输入 CSS 属性和值。
- 继续添加新的“属性/值”对，直到完全定义规则为止。
要添加关键帧，请执行以下操作：
- 选择一个动画元素。
- 在“CSS”面板中，在现有关键帧之间点击插入关键帧。
- Web Designer 随即会自动将关键帧插入到两端关键帧之间的中点位置。点击百分比可更改关键帧时序。
- 动画属性是根据两端的关键帧插入的。您可以添加、修改或删除新关键帧的属性。
您不能添加超出现有动画末端的关键帧。要执行此操作，请改用时间轴。