动画变换及其样式

　//下为一个空div从圆到正方形的渐变

div {
  　　 200px;
  　　height: 200px;
  　　background-color: orange;
  　　margin: 20px auto;
  　　border-radius: 100%;

　　//property指对哪个属性进行过渡
 　　 -webkit-transition-property: -webkit-border-radius;
  　　transition-property: border-radius;

　　//duration指过渡持续时间
  　　-webkit-transition-duration: 1s;
　　  transition-duration: 1s;

　　//timing-function指使用的方法（linear恒速、ease-in加速、ease-out减速、ease-in-out先加后减、ease由快到慢）
　　  -webkit-transition-timing-function:linear;
　　  transition-timing-function:linear;

　　//delay指延迟时间
  　　-webkit-transition-delay: .2s;
  　　transition-delay: .2s;
}

//鼠标停留的样子
div:hover {
  　　border-radius: 0px;
}