CSS3 transition实现手风琴效果

最近在项目中遇到了一个需求，需要完成一个手风琴效果的展示，最后通过CSS3 transition实现了这个效果，下面就分享下实现方法。

效果

首先看下效果：

可以看到，当我们点击toggle按钮的时候会实现一个带有动画的过渡效果。

transition属性

实现动画效果这要用到了transition的四个属性，分别是：transition-property、transition-duration、transition-timing-function和transition-delay，下面简单介绍下四个属性。

transition-property：指定需要过渡的CSS属性。并不是所有属性都能过渡的，只有能数字量化的CSS属性才能过渡，常见的有width,height,right,left,bottom,top,opacity,color等，或者可以直接设为all，表示所有属性都会获得过度效果。
transition-duration：指定过渡所需要的时间。
transition-delay：延迟开始过渡的时间，默认值是0，表示不延迟，立即开始过渡动作。
transition-timing-function：过渡函数，规定了过渡效果的速度曲线（贝塞尔曲线），取值如下：

值	描述
`linear`	规定以相同速度开始至结束的过渡效果（等于 `cubic-bezier(0,0,1,1)`）。
`ease`	规定慢速开始，然后变快，然后慢速结束的过渡效果（`cubic-bezier(0.25,0.1,0.25,1)`）。
`ease-in`	规定以慢速开始的过渡效果（等于 `cubic-bezier(0.42,0,1,1)`）。
`ease-out`	规定以慢速结束的过渡效果（等于 `cubic-bezier(0,0,0.58,1)`）。
`cubic-bezier(n,n,n,n)`	在 `cubic-bezier` 函数中定义自己的值。可能的值是 0 至 1 之间的数值。。

可以看到，除了指定的属性之外，还可以通过cubic-bezier(n,n,n,n)自定义平滑曲线，贝塞尔曲线的生成比较复杂，我们可以借助于缓动函数速查表或者cubic-bezier等在线工具查看动画效果。

代码实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS3 transition实现手风琴特效</title></head><body><div class="slider" id="slider"><button class="toggle-btn" onclick="document.getElementById('slider').classList.toggle('toggle');">toggle</button></div><style>.slider {max-width: 400px;background: #2a85a0;height: 400px;width: 400px;position: relative;/*  Webkit内核浏览器：Safari and Chrome*/-webkit-transition-property: all;-webkit-transition-duration: .5s;-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);/*  Mozilla内核浏览器：firefox3.5+*/-moz-transition-property: all;-moz-transition-duration: .5s;-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);/*  Opera*/-o-transition-property: all;-o-transition-duration: .5s;-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);/*  IE9*/-ms-transition-property: all;-ms-transition-duration: .5s;-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}.slider.toggle {max-width: 10px;}.toggle-btn {position: absolute;top: 0;color: #ffffff;right: -50px;width: 50px;height: 20px;background: #5a7ef1;}</style></body>
</html>

下面的是我的公众号二维码图片，欢迎关注。