transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #ccc;
float:left;
margin-right:10px;
}
.box1:hover{
background-color: red;
transition: background-color 3s ;
}
.box2:hover{
background-color: red;
transition: background-color 3s ease-in;
}
.box3:hover{
background-color: yellow;
transition: background-color 3s ease-out;
}
.box4:hover{
background-color: green;
transition: background-color 3s linear;
}
.box5:hover{
background-color: blue;
transition: background-color 3s ease-in-out;
}
</style>
</head>
<body>
<!--
平滑过渡
transition-
property 改变某个属性
duration 转换过程的持续时间 单位 s/ms
-timing-function 变换的速度
ease 逐渐变慢
linear 匀速
ease-in 加速(由慢变快)
ease-out 减速(由快变慢)
ease-in-out 先加速然后减速再加速
-delay 延迟时间 单位 s/ms
-->
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>
<div class='box5'></div>
</body>
</html>