css实现过渡（transition）

css实现过渡（transition）

transition:属性名称 过渡时间 运动曲线 延迟时间
如：当鼠标hover div的时候宽度3秒,高度4秒匀速变化，宽无延迟高延迟4s。
<\style>
div{width:50px}
div:hover{width:100px}
transition:width 3s linear，height 3s linear 4s
</style>
</div></div>
1.含义：css属性值在一定时间内平滑的过渡，需要借助别人触发它：如hover，onclick

1.transition的分属性：（1）transition-proprty:指定过度的css属性。不写属性名则指所有的样式

​ （2）transition-duration:指定过渡所需要的时间

​ （3）transition-timing-function：指定过度的函数（运动曲线）

​ 属性：ease : 默认值 慢快慢

​ linear:匀速

​ ease-in：

​ ease-out：

​ ease-in-out：

​ 贝塞尔曲线：如：cubic-bezier(1，1.31，1，1.51)

​ （4）transition-delay：指定过度需要延迟的时间

​ （5）复合属性：transition:过渡属性 过渡时间 过渡曲线 过渡延时时间。

​ （6）多个css属性用逗号隔开，如：

                  transition:width 2s linear 3s,
                             height 5s linear,

​