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
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
p{
width:100px;
height:200px;
background-color:aqua;
transition:width2sease-in-out0.5s;
}
p:hover{
width:500px;
}
</style>
</head>
<body>
</body>
</html>
结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r57265.shtml
