[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画

通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧)。

我们要做什么?

下面是最终代码,也就是我们将要最终实现的演示:

See the Pen Bouncing Ball – Correct Timing by brandon (@bmorelli25) on CodePen.0

基础准备

对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball继续阅读

Chrome DevTools – 检查动画

使用Chrome DevTools Animations(动画)检查器检查和修改动画。

animation inspector

TL;DR

  • 通过打开Animation Inspector(动画检查器)捕获动画。它会自动检测动画并将它们分组。
  • 通过减慢动画,重播动画,或查看源代码,来检查动画。
  • 通过更改动画的时间,延迟,持续时间或关键帧偏移来修改动画。

概述

在Chrome DevTools动画检查主要有两个目的。

  • 检查动画。 您希望减慢,重播或查看动画组的源代码。
  • 修改动画。 您想要修改动画组的时间,延迟,持续时间或关键帧偏移。 目前不支持贝塞尔编辑和关键帧编辑。

动画检查支持CSS动画,CSS转换和web动画。目前不支持requestAnimationFrame动画。

什么是动画组?

动画组是一组看起来彼此相关的动画。目前,web中没有真正的组动画概念,因此运动设计师和开发人员必须组合和计时单个动画,以使它们看起来是一个连贯的视觉效果。Animation Inspector(动画检查器)根据开始时间(不包括延迟等)预测哪些动画相关,并将它们并排分组。换句话说,在同一脚本块中触发的一组动画会被分到一组,但如果它们是异步的,那么它们将被分别分组。

开始

有两种打开动画检查器的方法:

  • 打开Elements(元素)面板,找到Styles(样式)窗格,然后按下 Animations(动画)按钮(animations button )。
  • 打开Command Menu(命令菜单)和类型Drawer: Show Animations

继续阅读