3D http://fangyexu.com/tool-CSS3Inspector.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: #F00;
/*transition-property: all;
transition-duration: 4s;
transition-timing-function: ease;
transition-delay: 2s;*/
transition:bacground 4s linear 2s,
width 2s ease-in 1s;
color: #FFF;
}
.father:hover .box {
margin-left: 500px;
}
.linear {
transition-timing-function: linear;
}
.ease {
transition-timing-function: ease;
}
.ease-in {
transition-timing-function: ease-in;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in-out {
transition-timing-function: ease-in-out;
}
.cubic-bezier {
transition-timing-function: cubic-bezier(0.9, 1.26, 0.11, -0.9);
}
</style>
</head>
<body>
<div class="father">
<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box ease-in-out">ease-in-out</div>
<div class="box cubic-bezier">cubic-bezier</div>
</div>
</body>
</html>
来源：https://www.cnblogs.com/-CLAY-/p/transition.html