transition

• transition 检索或设置对象变换时的过渡效果
• transition-property 检索或设置对象中的参与过渡的属性
• transition-duration 检索或设置对象过渡的持续时间
• transition-timing-function 检索或设置对象中过渡的类型
• transition-delay

transition
transition：<single-transition>[,<single-transition>]*

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

• <‘ transition-property ‘>：
  检索或设置对象中的参与过渡的属性
• <‘ transition-duration ‘>：
  检索或设置对象过渡的持续时间
• <‘ transition-timing-function ‘>：
  检索或设置对象中过渡的动画类型
• <‘ transition-delay ‘>：
  检索或设置对象延迟过渡的时间

transition: transition-property transition-duration transition-timing-function transition-delay;

缩写：

    transition:
        border-color .5s ease-in .1s,
        background-color .5s ease-in .1s,
        color .5s ease-in .1s;

拆分

transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;

transition-timing-function

取值：

• linear：
  线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease：
  平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• ease-in：
  由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-out：
  由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
• ease-in-out：
  由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• step-start：
  等同于 steps(1, start)
• step-end：
  等同于 steps(1, end)
• steps(<integer>[, [ start | end ] ]?)：
  接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
• cubic-bezier(<number>, <number>, <number>, <number>)：
  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

cubic-bezier

    transition: all 1s cubic-bezier(0,0,1,1);
                                    (x,y)(x,y)
                                    第一个控制点 第二个控制点
                                    y值可正可负，为负时，速度先为负后为正，y为负，斜率也就为负值，所以小球先退后一点再加速前进。
                                    x轴只能为正[0,1]之间。
                                    峰值曲线，越尖，速度越快；越平缓，速度越慢。
                                    （x,y,x,y）
                                    y轴差值越少，越短促有力一点；
                                    y轴可正可负，负回退正前进；

B(t) = P?(1 - t)3 + 3P?t(1 - t)2 + 3P?t2(1 - t) + P?t3 ,t ∈ [0,1]
        起点        控制点1         控制点2                  终点

贝塞尔曲线，就是取两点之间的斜率，k = f＇( x )；
可以在控制台调节控制点位置。

transition、cubic-bezier

原文：https://www.cnblogs.com/zhizhi0810/p/10993496.html