css3 transform的基本用法和介绍

<style>
/* 最简单的一个transition动画
.box{width:100px;height:100px;border:1px solid;background:green;-webkit-transition:3s;}
.box:hover{width:200px;height:200px;background:pink;} */

/* transition宽度需要3s,背景需要5s
.box{width:100px;height:100px;border:1px solid;background:green;-webkit-transition:3s width,background 5s;}
.box:hover{width:200px;height:200px;background:pink;} */

/* transition宽度3s完成，高度5秒开始，2秒完成
.box{width:100px;height:100px;border:1px solid;background:green;-webkit-transition:3s width,height：5s 2s;}
.box:hover{width:200px;height:200px;background:pink;} */

 

/*贝塞尔可以自定义(https://matthewlein.com/ceaser/)曲线过渡 由慢到快 */
.box{
width:100px;height:100px;border:1px solid #000;background:red;
transition:5s background;transition:2s width;

-webkit-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, 0);
-webkit-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
-moz-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
-o-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
}
.box:hover{
background:blue;
width:200px;
height:200px;
}

</style>