通过transition实现手风琴效果

手风琴是我们在前端设计中经常看到的一种图片的展示方式，其中最浅显易懂就是通过css的过渡属性（transition）来处理，首先我们脑补一下transition的用法，那就是经常被提到的动画三步骤，我们这里就以width为例来简单的介绍一下，我们实现一个100px宽度的div在鼠标悬停两秒之后开始发生过渡效果，并在两秒完成过渡，最后宽度过渡为500px

1、编写过渡前的样式；比如

div{
	width:100px;
}

2、编写过渡后的样式，并指明是由哪一个动作触发过渡，我们这里选择了hover；比如

div:hover{
	width:500px;
}

3、分析过渡，将过渡过程中发生的属性提取出来

transition-property：发生过渡的属性即哪一个属性在过渡中发生了变化，我们这里是width

transition-duration：过渡效果持续时间，我们这里是2s

transition-timing-function：动画过渡效果的时间曲线，