CSS 小结笔记之变形、过渡与动画的示例
导读：1、过渡transition 过渡属性用法：transition:ransition-propertytransition-durationtransition-timing-functiontransition-delay 可以一...
1、过渡transition
过渡属性用法：transition:ransition-propertytransition-durationtransition-timing-functiontransition-delay
可以一起指定也可以分别单独指定
transition-property:是要过渡的属性（如width，height），all是所有都改变。
transition-duration：花费的时间，单位为s或ms
transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种
ease=>
逐渐慢下来（默认值）linear=>
匀速ease-in=>
加速ease-out=>
减速ease-in-out=>
先加速在减速
transition-delay延迟时间，单位为s或ms
Document
p{
width:100px;
height:200px;
background-color:aqua;
transition:width2sease-in-out0.5s;
}
p:hover{
width:500px;
}
结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS 小结笔记之变形、过渡与动画的示例
本文地址： https://pptw.com/jishu/664456.html