transition(过渡)

Posted 2020-10-16 蓝心高飛

 transition:过渡　

　　渡过渡原理：原始状态a状态-向-最终结束状态b状态

　　格式：transition: all 1s linear; 

过渡的四个参数：
1、参与过渡的属性（属性（width）/all）

　　值 　　　　　　 描述

　　linear 　　 　　 动画从头到尾的速度是相同的，linear慢慢开始过渡并成线性方式显示

　　ease 　　　　  默认。动画以低速开始，然后加快，在结束前变慢。

　　ease-in　　       动画以低速开始。

　　ease-out            动画以低速结束。

　　ease-in-out      动画以低速开始和结束。

 注：cubic-bezier(n,n,n,n)     在 cubic-bezier 函数中有自己的值。可能的值是从 0 到 1 的数值。

2、过渡的时间s，需要加上时间单位 过渡的类型。

3、过渡的效果类型

4、延迟执行的时间

-webkit-transition:all 1s linear; （chrome，safari（苹果））
-ms-transition:all 1s linear; （IE 微软）
-moz-transition:all 1s linear; （Firefox）
-o-transition:all 1s linear; （欧鹏）

 

 注：display: none (or block); display 属性是没有过渡效果的，因此在需要过渡的地方不能用它做为显示和隐藏的属性;可以用visibility: visible/hidden 或 opacity：0-1来进行显示隐藏。