回顾css的animation属性

异名新接一个需求，实现一个文字的切换，结果发现太久没写css动画，对animation属性已经很陌生，尤其是对steps()函数的理解已经丢掉了。

animation 属性概览

animation相关的属性比较多，异名看到自己前几年学习这个属性的时候做的导图，发现这确实是一种很棒的归纳方式，不应该丢掉，就趁着周末的时间review了一下，在以前的基础上做了一些修正，也新增了一些有待以后填补的坑，比如动画的性能优化等，这里就不做展开了，想要获取的源文件的朋友直接在公众号回复animation即可。

xmind

实现文字渐变切换

文字渐变切换

因为动效是比较简单的两条文案循环切换，所以也没让设计师出动效图，这里给出两种实现方式。

方式一就是使用js监听animationiteration事件，动态切换文案

animationiteration

方式二就是利用animation-delay打个时间差，但是这种做法其实很不直观，因为得去算两个item之间的时间差，以及在关键帧中定义过渡的百分比，这些都是很不好维护的

animation-delay

理解和应用steps函数

设计师同学认为上面的文字渐变切换的表现很怪异，有种拖泥带水的感觉，设计师要求文字切换的时候”硬切“。这种时候如果用js动画的话就很好办了，一个定时器回调改变文案就行，但是因为使用场景的问题，我并不希望在这里维护一个定时器，而恰好timing-function中提供了步进函数steps。要应用steps函数需要理解两点，一个是steps中的start和end的区别，另外一个是step步长和keyframes中的关键帧的关系。

start和end之间的关系其实通过步进的函数图像就能够区别开：「start其实是舍弃了第一帧，保留了最后一帧；end是保留第一帧，舍去最后一帧」，而step-start和step-end则分别是steps(1, start)和steps(1, end)的缩写。

step-function

接下来是理解steps和keyframes中的关系，这个就完全是一个定义的问题了，「steps作用于每一个关键帧之间」。比如下面的demo，可以看出0%-50%之间和50%到100%之间都被拆分成了两步

steps-demo

异名还发现有些人会习惯性地省略掉steps的第二个参数，直接steps(1) ，翻阅MDN文档我们知道这是错误的写法，第二个参数不是可选参数，只不过浏览器帮大家做了一下兼容，不传第二个参数也能正常运行，但是我们自己写的时候要避免这种写法。

弄清了这两个小概念之后，再回到需求当中，两句文案的切换其实只需要做个交替切换步进函数即可，代码和效果如下

文字步进切换

一些很棒的效果实践

animation除了实现常见的宽高、渐变、位移等动画，其实也可以作用在很多不同的属性上，能够实现一些很棒的动画效果。这次翻到了以前的笔记和博客，也分享一下当初写过的效果

实现帧动画

帧动画有两种方式，一种是直接切换背景图，一种是把所有帧放在一张平铺的精灵图上面，然后通过position的变化来实现帧的变化，一般我们都会使用后者，因为多张散图的初次加载会导致动画的闪烁，这里演示就直接切换背景图了。因为我们知道step-end和step-start会分别省略第一帧和最后一帧，所以如果要让逐帧动画的所有帧都展示，我们需要结合填充模式animation-fill-mode 把首帧和未帧的显示分别交给forwards和backwards

framesAnim

实现路径动画

svg的部分属性也是能够做动画变化的，比如下面实现的这个logo的描边就是很棒的一个效果

svgAnim

首先在AI中把logo导入，然后钢笔勾勒logo的轮廓路径，一般交给设计同学帮忙就行，勾勒完路径之后就导出为svg，这一步主要是要获取logo的path。然后结合stroke-dasharray和stroke-dashoffset 两个属性实现描边的效果，其中stroke-dasharray 是把线条断开，而stroke-dashoffset 是设置线条的偏移，我们只要在动画中动态设置偏移值就行，path有点大这里也不贴了

svg {
  stroke-dasharray: 800;
  stroke-dashoffset: 1000;
  animation: line 2s forwards;
}
@keyframes line{
  from { stroke-dashoffset: 1000; opacity: 1; }
  to{ stroke-dashoffset: 0; opacity: 0; }
}

pathAnim

实现3D动画

这个是结合perspective和transform来实现3d的效果。通过 -webkit-perspective:1000px; 和 transform-style: preserve-3d; 来设置3d的视角深度和子元素的3d继承关系，然后通过设置XYZ轴上的rotate和translate固定盒子的六个边，然后在盒子上加上一个rotate3d的动态变化。

3dAnim

一些好的反馈

在刚入门的时候异名非常喜欢花时间来琢磨动画，工作时间长了之后就发现在业务的绝大部分场景中仅仅只是需要一些简单的位移、渐变效果，一些组件库甚至都会把这些简单的动画封装起来了，慢慢的一些属性和实践的问题就会被遗忘，再次遇到复杂动画场景的时候就再去翻一下MDN的文档，百度和掘金上搜一搜。

但是异名这次的体验就很不一样，异名想起了当初写的博客，翻一下网盘甚至还发现了当初梳理的脑图，我能快速捡起当初对这个知识点的认知，快速定位到我要去使用哪些属性，以前写过的那些特效还重新唤起我css动画的兴奋，这个过程太美妙了~

而且就在上周，异名还收到了一个博客园的消息推送，五年前写的小demo到现在还有人在看，而且还能有所收获，这真是幸福感满满的！

我觉得这大概就是写博客的价值所在，一个是作为自己以后查阅和复习的依据，一个是分享，当其他小伙伴遇到和你一样的场景的时候，也能从你的文字中借鉴到一些经验。