transition

transition：过渡，就是变化过程 ;A状态—->B状态，改变一个状态的一段变化
transition：监听的属性 过渡时间 cubic-bezier（…） 等待时间，监听的属性2 过渡时间2 时间间隔2 等待时间2 … …
transition-property（用来监听到底哪个属性的状态改变）：all；全部属性；width、height…
transition-duration：时间间隔
transition-timing-function：运动的状态（平滑渡过ease\先慢后快ease-in\先快后慢ease-out\匀速linear….）st 、vt坐标轴
贝塞尔曲线：在表示运动状态的时候，就是一个x-t的曲线，可以在控制台中手动试数；起点（0,0）P0、终点（1,1）P3、控制点调节曲线弯曲程度；x轴[0,1],y轴[-∞,1]
cubic-bezier三次立方贝塞尔：它根据函数根据传的参数进行计算（参数1，参数2，参数3，参数4）,还可以实现弹性运动 ( x1 ， y1 ) , ( x2， y2 ) ）也就是方程式中的 P1、P2，也就是手动调节的两个控制点；

![EWW]{CS93@M}FZ{ZUFX623.png
f (x) = x³ + 1 k 斜率为正，速度也为正，说明当前运动的方向是正方向；k 斜率为负，说明当前运动方向是负方向；
k = f’ (x) = 2x²
y1 - y2
k = —————
x1 - x2
transition-delay：等多少秒再进行过渡 默认0
animation：实现动画；A状态—->B状态—->C状态 … …一个完整的多状态的连续变化；这里面的属性的功能有的和transition的一模一样，也是那个特点；如果用animation实现状态改变，就必须要把这些状态记录下来，放在一个容器里面，按照顺序来执行，这个容器就叫做关键帧容器：
-webkit-@keyframes run(自定义的名字)**{ 里面就是记录运动的状态，发生的几次改变，怎么记录呢？
你有几个状态，你就有几个关键帧，就拿百分数记录( 只能写百分数，用来分隔运动时间的，状态1—>转态2，所占的比例，以此类推）
比如：5个状态
0%{ }；这里面的参数就是你所定义的属性进行的改变；只有0%可以换成from；
25%{ }；
50%{ };
75%{ };
100%{ };只有100%可以换成to；
}
-webkit-animation：名字 运动时间 cubic-bezier（…） 等待时间 ，名字2，运动时间2..
animation-name：读取关键帧的名字
animation-duration：
animation-timing-function：定义的是运动中的每一段的运动状态
animation-delay：**
animation-iteration-count：动画执行次数，默认1；infinite（无限）
animation-direction：reverse（倒着走）
alternate（先倒着走，再正着走，执行次数>=2）
normal（默认值）
animation-paly-state：runing（默认值）
paused（暂停）用的不多，兼容器不好；可能在未来不太生效
animation-fill-mode：none（默认值）
forward（设置对象状态为结束之后的状态，最后一帧）
backward（设置运动对象开始之前的状态，第一帧）
both（forward和backward集合动画，开始之前，结束之后）
案例：日升日落以及天色天幻

animation-timing-function 属性值中有step ，配合animation来使用，共同完成新型动画；使用之后，依旧是动画，不过不连续了。
steps（1，end）；
1，一步来实现这个动画，以跳转的方式直接发生改变，不发生过渡，但是依然等待动画执行的时间。所以，参数1：设置多少步来实现这个动画跳转。
end，保留当前帧状态值，直到这段动画时间结束，默认值，丢的是最后一帧，比较常用，在后面添加forward来弥补最后一帧；start，是保留下一帧状态，直到这段动画时间结束，没有办法弥补第一帧的动画，使用backward，它也不能实现，因为backward是动画开始之前保留第一帧的状态，开始之前把它量化出来必须有等待时间，那就是说只有等待时间的状态下backward才是有意义的，否则的话是没有意义的。
steps（1，end） === step-end
steps（1，start）=== step-start
案例：打字效果：font-family：monospace；每个英文单词所占的空间都是一样的
钟表效果：transform：rotate（deg度数）；transform-origin：center/0 0;
逐帧动画