Transition property

元素的渐进变化(Transition property)

综合使用

Css Synax transition: property duration timing-function delay|initial|inherit; parmers:

• property 所有可以支持渐变效果的属性(width, height,color, background-color etc)
• duration 渐变效果持续时间
• timing-function 渐变效果变换函数
• delay 渐变效果开始前停顿时间

分开使用

Css Synax transition-property: none|all|property|initial|inherit;

• none 不指定渐变属性
• all 默认属性，指定所有的Css 属性都可以
• property 以逗号分割的一个到多个Css 属性，eg width,height,color ****transition-duration: time|initial|inherit;
• time 渐变效果在多少秒(s),毫秒(ms)完成 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
• linear 线性变化，变化是匀速进行
• ease 曲线变化，先慢，后快，最后变慢的方式进行,效果相当于cubic-bezier(0.25,0.1,0.25,1)
• ease-in 开始慢，效果相当于cubic-bezier(0.42,0,1,1)
• ease-out 结束慢，效果相当于cubic-bezier(0,0,0.58,1)
• ease-in-out 开始和结束都慢，效果相当于 cubic-bezier(0.42,0,0.58,1)
• step-start 相当于steps(1,start),步进函数
• step-end 相当于steps(1,end)
• steps(n,start|end) ,n必须是大于0一个非负整数,第二个参数可以 start或者end
• cubic-bezier(n,n,n,n) 自定义贝塞尔曲线

transition-delay: time|initial|inherit;