【前端学习笔记】做一个模态框窗口弹出，有动画哦

CSS3有了三种特殊效果的处理方式：过渡（transition），动画（animation），变化（transform）。

CSS3标准化前，各主流浏览器靠前缀提供样式支持。

-webkit-transition-delay: 300ms;//chrome,safari
-o-transition-delay: 300ms;//opera
-moz-transition-delay: 300ms;//firefox
-ms-transition-delay: 300ms;//ie
transition-delay: 300ms;

定义：

在 UI设计中，模态窗口是附属于主窗口的图形控制元素，它创建了一种状态模式，在这种状态模式下，主窗口无法被直接访问。当模态框出现之后，如果用户想要再回到主窗口操作，就必须先与模态框自身进行交互，也就是通过这样的形式中断了应用程序主窗口的正常工作流。
对话框一般分为两种类型：模态类型（ modal ）与非模态类型（ modeless ）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。

下面我们来实现一个模态窗口-「某种特定状态下的窗体」。

弹出窗口布局

弹窗在浏览器可见窗口可见，设置position：fixed
CSS**变换特效(transform)**的平移translate函数可达到目的。这里补充下变换效果有哪些函数：
tr