ease-in ：加速，等同于 cubic-bezier(.42,0,1,1)ease-out ：减速，等同于 cubic-bezier(0,0,.58,1)ease-in-out ：先加速后减速，等同于 cubic-bezier(.42,0,.58,1)cubic-bezier ：贝塞尔曲线， (x1,y1,x2,y2) 四个值指定于曲线上的点 P1 和 P2 ，所有值需在 [0,1] 区域内Time：秒或毫秒(默认0)
duration 和 delay 的取值都是时间，所以可能会发生混淆 。duration和delay作用于所有节点，包括自身的::before和::after
transition中出现两个时间值时，第一个解析为duration，第二个解析为delay
transition中出现一个时间值时，解析为duration
transition-timing-function ，它决定了过渡时间内速度是如何变化的 。它的值实际上是一个贝塞尔曲线，推荐一个设置贝塞尔曲线的网站，可以根据需要设计出符合需求的贝塞尔曲线 。1.2.2 过渡动画实践1）IOS 设置页面中的开关按钮
下面这个开关在 IOS 手机的设置面板中太常见了，开关的动画效果利用
transition这个属性也可以很轻松地实现，而且这里利用上面讲到的设置贝塞尔曲线的网站调试出了一种贝塞尔曲线使得开关按钮被打开的过程有一个刹车的效果 。
文章插图
在线源码和演示
1.3 动画CSS 可以通过设置多个点精确地控制一个或一组动画，用来实现复杂的动画效果 。动画由多个点组成，每个点拥有独立的状态，这些状态通过浏览器处理成过渡效果，点与点之间的过渡效果串联起来就是一个完整的动画 。
1.3.1 Animation 属性介绍1）animation-name：名称
none：无动画(默认)
String：动画名称
Time：秒或毫秒(默认0)
ease：逐渐变慢，等同于cubic-bezier(.25,.1,.25,1)(默认)
linear：匀速，等同于cubic-bezier(0,0,1,1)
ease-in：加速，等同于cubic-bezier(.42,0,1,1)
ease-out：减速，等同于cubic-bezier(0,0,.58,1)
ease-in-out：先加速后减速，等同于cubic-bezier(.42,0,.58,1)
cubic-bezier：贝塞尔曲线，(x1,y1,x2,y2)四个值指定于曲线上的点P1和P2，所有值需在[0,1]区域内
steps([,[start|end]]?)：把动画平均划分成n等分，直到平均走完该动画
step-start：等同于steps(1,start)，把动画分成一步，动画执行时以左侧端点0%为开始
step-end：等同于steps(1,end)，把动画分成一步，动画执行时以右侧端点100%为开始
Time：秒或毫秒(默认0)
