transition : 要过渡的属性 花费时间 运动曲线 何时开始
1.属性 : 宽度 高度 背景颜色 内外边距 ... (all 所有)
2.花费时间 : 单位是秒(必须写)
3.运动曲线:默认是ease(逐渐慢下来) linear (匀速)ease-in (加速) ease-out (减速)
ease-in-out (先加后减)
4.何时开始:单位是秒 默认是0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.big {
width: 200px;
height: 200px;
background-color: pink;
transition: all 3s linear 0;
}
.big:hover {
width: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="big"></div>
</body>
</html>
结果:当鼠标经过时,按照上图顺序缓慢变化,颜色从粉色渐渐变蓝,宽度慢慢变成二倍
注意:多个属性分开设置可以用逗号隔开
transition: width .5s,height 2s;