CSS3过渡

transition

　　css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

 

    transition-property  :  检索或设置对象中的参与对象的属性。

        all ( 默认值 ) , 指定 width , height;

 

    transition-duration  :  检索或设置参与过渡的时间。规定完成过渡效果需要多少秒或毫秒。

        需要添加单位：s (秒)  ms (毫秒)  1s == 1000ms

 

    transition-delay     :  检索或设置对象延迟或提前过渡的时间。定义过渡效果何时开始。（一般不写）

        2s : 延迟两秒进行过渡

        -2s : 提前两秒进行过渡

 

    transition-timing-function  :  检索或设置对象中过渡的动画类型。

        运动形式：加速、减速、匀速...

        linear  匀速

        ease（默认值）  逐渐慢下来

        ease-in     加速

        ease-out    减速

        ease-in-out 先加速后减速

        cubic-bezier()   贝塞尔曲线（ 贝塞尔曲线函数引用 https://cubic-bezier.com/ 网址）

 

    复合写法：

        transition:  all/具体属性值（可以不写，默认是所有） 2s/运动时间 linear/动画类型; 

 

        注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是过度总时间，第二个是延迟时间。

 　　

　　注意：display:none;  text-aline:center;  不是具体属性值，因此不可以参与过渡。

 

        注意：让谁动加要把transition加给谁，不要把transition放到hover中，为了来回都有过渡。

 

    （1）加在hover之前，鼠标划入有动画，划出也有动画；

    （2）加在hover之后，鼠标划入有动画，划出没有动画；

    （3）可以hover之后和hover之后都加动画，可以加两种动画。

 

 　　　　　　　　 来自逆战班的 小白