transition过渡效果

* {
  margin:0;
  padding:0;
}
.main{
  width:100px;
  margin:60px auto;
}
.wrapper {
  width:100px;
  height:100px;
  background-color:lightskyblue;
  cursor:pointer;
  transition-property:all /*height all指代所有属性，在这也可以只设置width/height，应用于单独某个属性*/;
  transition-duration:.8s; /*动画持续时间*/
  transition-delay:0s; /*延迟时间*/
  transition-timing-function:ease; /*esae是默认值，即整个过程先慢后快再慢。如果是ease-in,即是先慢后快；ease-out,即是先快后慢；ease-in-out,即是先慢后快再慢，和ease效果几乎等同；*/
 /* tansition:all .8s 1s ease-in; 简写属性，即是属性值-持续时间-延迟时间-过渡函数*/ 
}
.wrapper:hover {
  width:150px;
  height:200px;
}
.outBox {
  width:50px;
  height:50px;
  background-color:lightsalmon;
  cursor:pointer;
  transition:all .6s .6s ease-out
}
.outBox:hover {
  width:100px;
  height:100px;
  background-color:lightgreen;
  border-radius:15px;;
}