前言
大家在写项目的时候，是不是会经常使用浏览器的查看元素来看看自己写的样式哪里有问题。在查看元素的时候，大家有没有发现一个小地方的特点。
也就是在color属性后面写了颜色样式之后，前面会有一个小格子。而这个小格子点击之后，会出现一个颜色盘，当我们点击颜色盘里面的任一颜色之后，对应的颜色值也会随之改变了。
也就是说，其实很多时候，我们在自己实践一些代码的时候，不需要去死记硬背那些red、blue、gray等单词的，而是当我们写完一个颜色值之后，通过颜色盘就可以改变rgb的颜色值了。
既然颜色可以这样改变，那其他的一些元素是不是也可以呢？
接下来就要来说一个大家都很常用的css属性transition。
发现
我们在做动画效果的时候，一般都会使用transition属性，而这个属性里面有很多动画效果的单词，比如ease、ease-in、linear等等。
而我们在学习了太多知识点之后，可能对于某些单词对应的动画效果有点模糊了，那么应该怎么能够准确的找到这个单词对应的效果呢？
如果大家要使用度娘，当然也是很快能了解到的。但是本篇文章所讲到的知识点，是告诉大家可以很快很方便的画出自己想要的动画效果，这种动画效果不一定能用某一个单词去表达。
我们在某段代码中添加transition属性之后，大家有没有发现其实这个属性后面的动画效果也是有一个小格子的。
点击小格子之后也会出现和上面颜色盘类似的弹出层，只是里面不是颜色了，而是一条贝塞尔曲线（由于本篇文章的重点不是贝塞尔曲线，所以就直接把百度百科的内容复制下来看一下吧！）。
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段 与节点 组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线 的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。 ——《百度百科》
这条线具体是如何表示动画效果的呢？下面就来详细介绍一下吧！
时间函数
动画执行这段路径的过程就是一个时间函数，它的本质就是一个数字在一段时间内变成另一个数字的过程。
- 透明度 0 – 1
- 宽度 10px – 100px
- 颜色 #333333 – #999999
只要当前动画效果能表达的数字效果都能通过这个时间函数进行改变。反之，如果不是数字效果呢，就改变不了。
- display none – block
时间函数就是动画执行的过程中，是匀速、先快后慢还是其他的表达效果。
那时间函数和上面的图有什么关系呢？
坐标图 X轴：时间
我们在写动画效果的时候，通常会在前面写上1s、10s之类的值来表示动画执行的时长，但是在这个线条里面是不知道我们具体写的时间是多长的，它有的值只有 0 和 1。
- 匀速运动
- 先快后慢
- 先突出再回来最后远离
以上这些表达了动画效果，但是都没有具体的时间，所以不管我们给的时间是1s、10s甚至1年、1辈子，都和这个坐标系没有关系，给一个固定的范围值不变也就可以了。
坐标图 Y轴：数字
我们需要从某一个数字变成另外一个数字的时候，一般也会根据具体的元素去改变。
- 宽高 100px 变成 300px
- 颜色 #333 变成 #999
以上这些表达了数字变化，但是没有具体的一个单位，那么在时间函数里面是不是也就不需要考虑单位了，给一个固定的范围值不变即可。
- 绿色箭头表示的就是
时间函数的效果，在某一段时间得到当前数字是多少。
那么我们就来改变一下这个动画效果。
我们在这个时间函数里面拖动两端的紫色圆点，会改变其路径到任意位置，这也是在修改贝塞尔曲线中的值。
为什么时间函数里面使用的是贝塞尔曲线，而不是其他的线条呢？
这是因为贝塞尔曲线，不会因为我们修改了某一个值，而变成急转直下的那种效果，它的效果都是很平滑的。
大家有没有发现一个问题，就是不管我们如何拖动紫色圆点，始终有两个顶点是固定不变的，这也是时间函数的控制项，从0到1之间可以由用户任意改变，而开始和结束的点都是固定的。
拖动之后，下面会有一个时间函数生成的坐标值，前面两个表示第一个控制点，后面两个表示第二个控制点。
由于起点和终点是固定的，再把其中的两个点坐标告诉时间函数，生成出来的贝塞尔曲线就是唯一的了。
动画效果
既然我们知道了时间函数要表达的东西之后，我们就可以用时间函数来描绘出我们想要的动画效果了。
- 拖动控制点的时候，上面会有一排小球来直接演示动画效果
- 当我们把控制点拖出隐形的坐标轴之外之后，会有回弹、加速等效果出现
那就按照这个动画效果来描绘一下上一篇文章中的文字效果吧。
- 点击margin、letter-spacing、font-size样式之后，页面上的文字就会出现不一样的动画效果了。
总结
其实很多时候，我们需要善用开发过程中一个小工具带来的便利性，而不是一味的度娘谷歌甚至去问chatgpt。
当我们了解到一些小工具的效果之后，也得善于利用它来完善我们的项目做出不一样的效果。
