css3 div跳动动画_div层滑出效果css3动画代码

一款使用jQuery和css3制作的滑动显示面板特效插件。当点击了滑动显示按钮，面板从左侧滑出，点击改变按钮或面板外任意位置，面板又滑动收缩回去。

HTML结构

Title Goes Here

Close

CSS样式

首先解释一下为什么要将header从panel容器中分离出来。我们为panel使用了一个CSS3 transformation(准确的说是 translateX )来使它滑动显示。使用CSS3 transformation要比改变position的左右位置的效果要好(参考：Why Moving Elements With Translate() Is Better Than Pos:abs Top/left)。header元素的位置是fixed 的，固定位置的元素再你对它们进行CSS3 transformation时会发生跳动。这是将header从panel容器中分离出来的原因。

.cd-panel {

/*...*/

visibility: hidden;

transition: visibility 0s 0.6s;

}

.cd-panel.is-visible {

visibility: visible;

transition: visibility 0s 0s;

}

.cd-panel-header {

/*...*/

position: fixed;

top: -50px;

width: 90%;

h