要在网页中实现动画效果他必须有三要数；
1；元素的属性值要有变化；
2；要告诉系统那个元素的那个属性要变化；transition-property: widht,height,background-color;
3；要告诉系统这个变化过程要持续多长时间；transition-duration: 2s,2s,2s;
注意过度动画的4种属性
1；/*告诉系统那些属性要执行动画*/
transition-property:widht,height,background-color;
2；/*告诉系统执行动画的时长*/
transition-duration:2s,2s,2s;
3；/*延时多少时间才开始执行动画*/
transition-delay:2s;
4；/*动画在执行动画过程的速度*/
transition-timing-function:ease;
下面是一个手风琴效果
*{
margin:0;
padding:0;}
/*注意这里一定要清空默认的边距，不然左边有一个空隙，把盒子撑开了*/
ul{
width:1000px;
height:500px;
border:1px solid #000;
margin:100px auto; //这一句是让元素ul居中显示
list-style:none; //这一句是去掉li前面的小远点
}
ul li{
width:200px;
height:500px;
border:1px solid #bb07ff;
box-sizing:border-box; //设置边框不占元素位置
float:left; //因为li是块级元素；用浮动让他水平显示
transition:width 0.2s; // 设置动画效果
}
ul li:nth-child(1){
background-color:#27e059;
}
ul li:nth-child(2){
background-color:#ff4470;
}
ul li:nth-child(3){
background-color:#0066b8;
}
ul li:nth-child(4){
background-color:#ff7ad8;
}
ul li:nth-child(5){
background-color:#efff24;
}
ul:hover li{ /*这个是当鼠标到ul 上的时候所有的列都缩小*/
width:100px;}
/*当鼠标到具体的列上的时候。这个列变大*/
ul li:hover{
width:600px;}
