下次创建基于CSS3的常规动画时，使用Chrome开发人员工具并利用动画验证和自定义功能可能对您很有用。 在这篇简短的文章中，我们将告诉您Chrome中提供了哪些动画工具，如何访问它们以及它们如何为您提供帮助。
如果要使用这些工具测试CSS3动画，则可以使用我们课程中的现成代码：
10个CSS3项目：Interface and Layout 。
这是页面的完整版本。打开动画选项卡
在运行CSS3动画的页面上，首先转到“
视图”>“开发者”> “开发者工具”，打开“ Chrome开发者工具”
。 或者，您可以使用键盘快捷键：
F12或
CTRL + SHIFT +I。打开开发人员工具后，转到右上角由三个垂直点表示的菜单，然后选择“
更多工具”>“动画”，如下所示：
首次打开“动画”选项卡时，您将看不到与动画相关的任何内容，而仅看到消息“正在
收听动画... ”，这是因为该工具已经赢得了该选项卡，当第一次加载页面时该选项卡应该已经打开。
为了使面板读取有关动画的信息，刷新页面，您将看到以下内容：
左上方的彩色小图标是页面元素的动画。 单击此图标以打开动画验证工具：
播放光标和关键帧
播放动画时，您会看到红色的播放光标沿时间轴移动。 可以使用鼠标将该光标移动到所需位置。
界面的每一行代表页面上单独的动画元素。 您可能会注意到，每行都有一个具有较深饱和色的部分。 它显示了动画的长度，其后的较亮部分代表动画的重复。
您还将在动画的每一行上看到几个小圆圈。 它们对应于动画的关键帧。 黑圈代表动画的开始和结束，空心圈代表它们之间的中间关键帧。
中级关键帧
可以将每行上的中间关键帧（每个动画周期的开始和结束之间的关键帧）拖动到不同的位置，并且在移动它们时，您将在浏览器窗口中看到动画时间的变化。 这是用于试验每个中间关键帧应占多少百分比的好工具。
但是，困难在于，在这些实验过程中，您不会在“样式”选项卡上看到代码更新。 相反，当您将中间关键帧放置在正确的位置时，您可以手动确定用于关键帧的百分比值。
将播放光标放在有问题的关键帧的正上方，您会在面板的左上角看到一个时间戳，以秒为单位告诉您动画的距离。 然后，您可以找出这次动画总持续时间的百分比。 在下面的示例中，播放光标位于2秒动画的大约1秒处，因此我们知道此关键帧为50％。
动画延迟和持续时间
您可以在“
动画”选项卡中进行其他更改，这将更新“
样式”选项卡中的代码，因此您可以确切地看到要在CSS中进行哪些设置。 其中第一个是动画开始播放之前的延迟，第二个是其持续时间。
要在开始动画之前施加延迟，请将鼠标悬停在其直线上，直到看到手形光标，然后将其水平拖动。 您将在“
样式”选项卡上看到延迟值更新：
要更改动画的持续时间，请将鼠标悬停在最后一个关键帧上，直到看到双向光标，然后将其水平拖动。 同样，该值将在“
样式”选项卡上可见更新。
动画定时功能
您还可以使用Chrome开发者工具来更改控制动画时间的速度曲线。 首先检查动画适用的项目。 在当前指定的计时功能的左侧，您将看到一个带有“波浪号”的小图标。 单击它以打开贝塞尔曲线编辑器：
将打开一个显示Bezier曲线的窗口，其中显示了当前计时功能。 在这里，您可以通过单击左侧的缩略图之一来选择现有的预设，或者可以拖动曲线的主图像的标记为贝塞尔曲线创建自定义值，然后将其复制到CSS中：
更改时，您会在编辑器顶部看到一个紫色的小球从左向右移动，显示您的计时功能中的当前更改。
渲染旋转层
另一个有用的功能是可视化动画中使用的图层的能力，包括旋转指定的可视化效果并从不同的角度对其进行查看的功能，以便更好地了解一切。
要打开“
图层”面板
，请转到Chrome开发者工具菜单，然后选择
更多工具>图层。
打开“
图层”选项卡后，选择左上角的“
旋转”模式工具：
现在，您可以使用此工具将图层可视化旋转到所需的任何角度，以更好地了解动画的各个部分如何工作：
完成时间
让我们快速浏览一下Chrome动画工具：
- 首先打开Chrome开发工具，然后从开发工具菜单中选择更多工具>动画，以打开动画工具。
- 页面加载以显示动画信息时，应打开“动画”面板-请刷新页面以实现此目的。
- 单击小彩色图的缩略图以查看动画信息。
- 每行代表一个动画。
- 实心圆圈表示开始和结束关键帧。
- 空心圆圈代表中间关键帧。
- 可以移动中间关键帧，但是您不会在“ 样式”选项卡上看到相应的代码更新，而是手动计算它们落在的百分比。
- 通过将动画延迟值悬停在线条上直到您看到手形光标，然后将其水平拖动来更改动画延迟值。
- 通过将光标移到最后一个关键帧上来更改动画持续时间的值，直到看到带有双重轮廓的光标，然后将其水平拖动。
- 在“ 样式”选项卡上，单击现有计时功能左侧的图标以打开贝塞尔曲线编辑器。
- 从预设中选择设置的时间功能，或者通过更改主曲线的图像来创建自己的功能。
- 转到Chrome开发者工具菜单，然后选择更多工具>图层，打开“ 图层”面板。
- 在此面板中，使用“ 旋转”模式可以从任何角度查看动画的图层。
有时，创建完美的动画可能是一个非常准确而微妙的过程。 这些工具可以提供有关动画的急需信息以及实时反馈，以帮助您实现卓越。