中国第五届CSS大会分享：CSS TIME

懵懂少年有幸受邀参加3.30中国第五届CSS大会分享，感谢业界大咖的不嫌弃，鉴于CSS的更新频率不及JS各种迭代高，新的特性组织起来对于分享的主题会比较散，所以我选择了一个关于动画时间的分享主题，基于大家熟悉的属性提炼出新的用法与思维，用于引导WEB侧动画的制作。

如大家所熟悉的，CSS动画里面，最常用的动画属性，非Transition、Animation莫属，而时间属性，逃不过Duration（动画时间）、Delay（延迟时间），官方的属性定义是：

Duration : 定义动画完成一个周期需要多少秒或毫秒。

Delay : 定义动画什么时候开始。

一般我比较偏向于用Animation制作动画，一般性写法为：

第1个0.3s 为动画时间，第2个0.3s为延迟时间，可参考下面盒子平移动画：

动画描述：盒子竖直移动，从下到上，移动40px。动画时间轴如下：

基于一般性动画用After Effect里面的K帧手法，对动画关键帧进行分割，得到盒子弹跳动画如下：

动画描述：盒子弹跳运动，从下到上，幅度40px。

动画关键帧keyframes如下：

具体动画keyframes代码:

该动画从0-100，K6帧，0%保持原始状态，20%做一个挤压的预备动作，40%向上弹跳40px并且做拉伸状，60%回落原地为下次反弹做挤压蓄力，80%反弹再次拉伸，最后100%回落原点保持原始状态与0%呼应。

单元素的动画，可以通过调整关键帧来实现，但多元素互动的需求更为日常，比如，要让3个盒子有序的进行波浪弹跳动画，可以通过加长每个动画的时间长度来实现，具体动画效果效果如下：

animation写法如下：

动画时间轴如下：

但通过加长时间长度的方式来实现波浪弹跳盒子，由于时间长度存在时间差，会导致动画循环 infinite波浪会错乱，效果如下：

解决的方法，是通过延迟delay的方式制造时间差，让动画循环时间统一，从而实现循环波浪弹跳动画，效果如下：

animation写法如下：

动画时间轴如下：

元素之间动画时间可以存在关系，同样，元素之间，动作也会存在关系，通过彼此相互作用产生互动，让元素动画更加生动，比如 双盒弹跳联动，效果如下：

这个动画实例抽样，是平时制作CSS动画较常见的一种关键点呼应的制作手法， animation写法如下：

动画关键帧轴如下：

动画关键帧keyframes如下：

bottom蓝色盒子在0%~75%进行弹跳动画，75%~100%保持静止状态

up红色盒子则是在0%~75%进行1次起跳后，在45%到达最高点，75%回落原点，90% 2次起跳，100%保持原始状态。 

两个盒子在0%~75%这个区间内，关键帧保持一致，达到动作呼应的效果。

同样用于制作元素之间相互用的交互动画，还有一种关键点顺接的制作手法，大致效果如下：

animation写法如下：

动画关键帧keyframes如下：

bottom蓝色盒子其实是不动的，动的是外部容器，容器在0%~50%进行弹跳动画，50%~100%保持静止状态

up红色盒子则是在0%~50%保持静止状态，在50%~100%进行弹跳动画

两个动画，关键帧顺接拼接构成一个整体动画，从而达到与呼应不同的视觉效果。

下面再看综合性实例例：Ipengoo，一个H5首页，整体效果如下：

重点放在主体星球，邮筒以及怪奇鹅Ipengoo上，主要html结构如下：

星球及邮筒动画如下：

Animation写法如下：

星球延迟0.8s进场，动画时间0.6s ，入场动画总1.4s结束后，进行5s为周期的星球浮动循环动画； 邮筒则是延迟1.2s在星球即将结束入场动画时出现，动画时间0.3s，入场后处于静止状态，保持在入场动画是100%位置，延迟2.9s后，执行动画时间为1.2s的循环动画，注意这里邮筒的变换原点transform-origin是在48% 100%位置，即水平方向的中间靠左，垂直方向的底部，不修改的话，是在元素中心点50% 50%处，元素执行动画的时候，会以中心往上下弹动，所以需要修改变换中心点让邮筒以该点为动画变换中心，从下往上运动，稳住脚跟。

而邮筒的mouse则是后续在制作怪奇鹅手臂附属动画的时候添加上的，目的是增加邮筒与怪奇鹅的互动，所以时间是做了延迟2.8s的处理，跟怪奇鹅的循环动画开始时间呼应，同样动画循环的时间是1.2s，而这里的transform-origin则是设置在50% 5%的位置，即 水平方向中间点，垂直方向顶部，动画呈现的效果是，嘴巴下巴一张一合，想要吃怪奇鹅手里的邮件。

右边Ipengoo的动画如下：

Animation写法如下：

怪奇鹅是延迟1.6s出现，即邮筒出现之后，入场动画1.2s，2.8s入场动画完成后，进行动画时间1.2s 的循环动画，变换原点跟邮筒同理，设置在底部中间位置，目的是让怪奇鹅贴着地面弹跳。手与邮件动画时间跟怪奇鹅主体动画时间保持一致，这里则是用到我《CSS3 动画》课程里面动画十四原则讲到的附属动作，对比下面动画：

上面的是单纯怪奇鹅主体动画，下面的则是添加了怪奇鹅手部与邮件的附属动作，对比之下，下面的动画会显得更加夸张且生动，这也就是有时候会发现，为什么做的动画会显得很“硬”不自然的缘故，因为缺少了一些细节，主体动画需要附属动画的承托，才会显得更加自然生动。

附属动画关键帧对比如下：

动画关键帧keyframes如下：

主体动画是分5个关键帧，但是附属动画关键帧，不一定要完全跟主题动画一致，只要动画节奏感一致即可，这里我在怪奇鹅的主体动画运动后，附属动画压后5%处理，让附属动画视觉上存在一些惯性。而变换上，主要是做旋转处理，变换原点是在怪奇鹅手臂上，让怪奇鹅的手拿着邮件，产生一定幅度的摇摆动画，从而强化衬托出主体的运动幅度。

而眼睛则是在怪奇鹅完成入场动画后，进行动画时间3s的循环动画，这里没有太多必要让眼睛动画跟主体动画保持时间一致，可以适当给予一点随机感。 左边的怪奇鹅与右边的整体一致，只不过延迟1.8s入场，两只怪奇鹅错开0.2s，避免同时左右入场，让用户视线混乱，但是循环动画时间保持一致，两只怪奇鹅，其实可以理解为两个波浪弹跳盒子。

主体星球，邮筒以及主⻆角怪奇鹅的入场循环时间轴如下：

每一个动画场景，都会有一条与之对应的时间轴，轴上的元素，入场延迟，入场动画时间，循环动画延迟，循环动画时间，都需要有规划的安排好，元素与元素之间是存在着呼应，还是顺接关系，需要在规划的时候理清，这样再多元素，也可以让动画有序进行，创造出整体动画的节奏感。

那一直连续的动画循环，是否合适？看下面的动画：

动画关键帧keyframes如下：

怪奇鹅的动画关键帧在0%~80%之间，是出于运动状态，但是80%~100%，是处于静止状态，让动画处于动画时间20%的短暂停顿，因为连续的动画会让用户眼睛产生视觉疲劳，需要适当的停顿，与预备动作类似，让用户能够有休息思考的时间。

CSS动画可以通过时间关键帧的操作制造出节奏感，那能不能制造出随机感呢？

不用JS，单纯用CSS就可以制作小颗粒掉落反弹的随机感，html结构很简单，只需要8个标签作为载体，通过时间与延迟控制来实现，html结构如下：

动画关键帧keyframes如下：

drop_1的关键帧拆分，从0%~50%是粒子从上往下掉落，50%~53%接触到弧形表面，出现短暂缓冲停顿，53%~70%呈向上反弹，并且同时出现水平方向的X向量，向左移动，85%~100%粒子透明度从1~0，慢慢消失，drop_2的关键帧分拆跟drop_1一致，唯一不同的是，反弹后出现的X轴向量，是跟drop_1是反向的，因为粒子掉落在弧面两边后，反弹角度是一左一右的，完成关键帧拆分后，究竟随机感是怎么通过时间实现呢？

Animation写法如下：

通过错开各个粒子的延迟时间，让粒子开始动画的时间分散，等出现初始的随机后，粒子循环时间也进行时间长度的随机，其实这里就是波浪盒子时间延长处理方法的另一处应用，具体可以参考粒子循环时间轴如下：

从上面这张循环时间轴图，我们可以看到，粒子之间由于动画时长不一致，会让所有粒子循环动画的结束与开始，在短时间内都不会对齐到一条线上，除非是各粒子动画时长的最小公倍数，而在这最小公倍数时间内，各粒子的掉落对于用户而言，可以理解为随机的。

另外一个随机的粒子，可以参考雪花飘落的效果，也是用同样的手法，制造的随机感：

很多时候，会感觉动画节奏感有点慢，或者太快了，具体的时间怎么去恒定？有没有一个时间的基数作为参考呢？

每个小球，从左到右，动画时间分别是0.1s、0.2s、0.3s、0.4s、0.5s，0.1s会让人感觉太快了，而0.5s则是相反，感觉太慢了，0.2s~0.4s区间视觉上会比较舒适，可以通过下图，加深下理解：

图片摘自《UI动效基本规则总结》

0.2s~0.4s还是比较感性的参考，理性一点的话，可以参考 《Material Design》里面关于动画时间的分析。

 在移动端过渡时长，基准是300ms，即0.3s，根据情况可做如下调整：

1. 幅度大、复杂的、全屏过渡动画可能需要更长的持续时间，可以长达 375ms
2. 元素进入屏幕需要的时长为 225ms
3. 元素离开屏幕需要的时长为 195ms
4. 超过 400ms 的过渡动画可能会感觉太慢。

在平板上，过渡时长会比手机上长30%。

在可穿戴设备，过渡时长会比手机上的短30%。

具体动画时间在各个设备上的时间体现，参考如下：

感谢大家能耐心浏览到这，感谢CSS大会的主办方邀请以及腾讯技术工程公众号的约稿，以下为本次分享的文章大纲：

1. 常用属性        ——移动盒子
2. K帧分配       ——弹跳盒子
3. 时间延长        ——波浪弹跳盒子
4. 顺序延迟         ——循环波浪弹跳盒子
5. 节奏感        ——联动呼应弹跳双盒子        ——联动顺接弹跳双盒子        ——Ipengoo 企鹅动画分析
6. 随机感 

              ——粒子下降反弹实例

              ——雪花飘落实例

    7. 时长衡定 

              ——0.3S分水岭

              ——多终端的时长基数