前言
之前一直在玩three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。
然而，我们可以通过一些小技巧，来创作出一些属于自己的CSS 数学函数，从而实现一些有趣的动画效果。
让我们开始吧！
注意 ：以下的函数用原生 CSS 也都能实现，这里用 SCSS 函数只是为了方便封装，封装起来的话更方便调用
绝对值就是正的还是正的，负的变为正的
可以创造 2 个数，其中一个数是另一个数的相反数，比较它们的最大值，即可获得这个数的绝对值
原数减 1 并乘以一半即可
数轴上两点距离就是两点所表示数字之差的绝对值，有了上面的绝对值公式就可以直接写出来
其实这个也不会实现~不过之前看到过 一篇文章[1] 写到了如何在 CSS 中实现三角函数，在此表示感谢
以下的几个动画特效演示了上面数学函数的作用
创建一排元素，用内部阴影填充，准备好我们的数学函数
这里用了 2 个动画：
地址： Symmetric Line Animation[2]
如何将一维的升成二维？应用网格系统即可
跟上面的动画一模一样
地址： Symmetric Grid Animation[3]
可以换一种动画shuffle （穿梭），会产生另一种奇特的效果
地址： Shuffle Grid Animation[4]
创建7 个不同颜色的（这里直接选了彩虹色）列表，每个列表有 40 个子元素，每个子元素是一个小圆点
让这7 个列表排列在一条线上，且 z 轴上距离错开，设置好基本的 delay
运用上文的三角函数公式，让这些小圆点以余弦的一部分形状进行排列
对每个小圆点应用上下平移动画，平移的距离就是余弦的波动距离
跟上面一个套路，计算从中间开始的delay ，再应用到动画上即可
CSS 数学函数能实现的特效远不止于此，希望通过本文能激起大家创作特效的灵感~
[1]在 CSS 中使用三角函数绘制曲线图形及展示动画: https://github.com/chokcoco/iCSS/issues/72
[2]Symmetric Line Animation: https://codepen.io/alphardex/pen/vYmqvpe
[3]Symmetric Grid Animation: https://codepen.io/alphardex/pen/zYwgdZO
[4]Shuffle Grid Animation: https://codepen.io/alphardex/pen/YzVmYaV
[5]Rainbow Sine: https://codepen.io/alphardex/pen/GREKJbL
calc() 函数属于CSS3版本内容，用于动态计算长度值。例如：width: calc(100% - 10px)；需要注意的是，运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算；
举例，给一个div动态设置宽度如下:
vh，是指css中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。
视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。
通俗点讲，vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%
CSS的动画过程中可以使用贝塞尔曲线等函数指定缓动的动画动作，还可以指定过渡中的每一步骤的状态，这种应用场景通常在创建定格动画的时候，比如一个DOM元素需要展示不同的图组动画，那么前端可以将多个动画图组存放到一个文件夹中，然后通过设置定位，让元素每次显示其中的一个图像。我们可以尝试在网上找一个动画组的图片。
如果只使用 background-position 属性来实现背景动画，如果使用线性或缓动过渡，那么背景图片只会滑动，无法构成动画，因此，我们使用 steps() 步进函数通过将动画组图片拆解为多个步骤下发出去来完成过渡。
这里的 steps(6, start) 函数指的是“把过渡过程切分为6个不同的步骤，在每一次开始时改变属性”。加上开始的状态，就这样创建了7个帧。
一般steps(6)会在每一步结束时改变属性，但也可以通过传入start或者end作为第二个参数进行说明来明确的指定。
同时需要对步进函数进行声明的是：在完成过渡后，指令结束也就是指鼠标移开的话，过渡则会反向发生，反转的动画仍有6个步骤，这几个步骤不会与原来的背景位置吻合，也就是说当鼠标移开时，会产生动画错乱。
因此后面几种过渡技术可以相对的避免这种情况发生：
