css3过渡动画
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
background-color: skyblue;
/* 第一个值是要发生改变的属性,all表示只要发生改变的属性，全部加上过度动画 */
/* 第二个值是时间 */
/* 第三个值是动画的运行轨迹 */
/* 第四个值表示延时时间 */
/* linear 匀速 */
/* ease 慢速开始，然后变快，然后慢速结束 */
/* ease-in 以慢速开始的过渡效果*/
/* ease-out 以慢速结束的过渡效果*/
/* ease-in-out 由慢变快在变慢*/
/* 如果多个属性单独的动画效果不一样，可以分开写，用逗号隔开 */
/* 注：所有属性同时执行，没有前后之分 */
transition:width 2s ease-in-out 2s,height 2s linear;
}
.box:hover{
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
css3过渡使用条件
1.需要具有层级关系
2必须是hover可以做到
3需要考虑是否有动态数据的添加，没有动态数据的添加时可用
