2015年---移动端webapp知识总结

没想到这样又过了5个月了,近期辞职了，所以我有时间来做总结.

这段时间里我学习了很多东西，而且都是我们移动端webapp的同学值得去学习的。

我先告诉大家我这次写的总结，有以下内容:

1.body的背景图，img图片自适应,切图小技巧.

2.字体rem自适应问题.

3.@media的断点分析.

4.页面布局:盒子模型.

5.CSS3选择器和H5新标签的使用.

6.表单常用的正则验证.

7.CSS3的变形,渐变,动画.

以下是去取原生样式的方法.

8.单选多选去掉原生方法.

9.select下拉框改变右边下拉按钮去掉原生方法.

10.文件上传,改变原生方法.

11.input框在手机里点击后,被输入法挡住的解决方法.

 

一,body的背景图,img图片自适应,切图小技巧.

1,body的背景图：人往往会越学越多，越学越忘记之前的东西基础知识.

近期,我们公司的页面设计做的背景图,经常出问题,往往是底部留白,不能把整个浏览器页面铺满,原因主要是忘记在html,body{height:100%}.

body{background:url('../img/back.jpg') no-repeat;background-size:100% 100%;}

如果底部出现留白,不能占满屏幕时的解决方法:添加 html,body{height:100%}

2,img图片自适应:

图标要设置宽度和高度的话，单位记得是rem.

图片宽度:max-width:100%;,也要给高度.

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x，mm-width-512px.jpg 3x"> 或者: <img class="image" src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w" sizes="(max-width:360px) 340px, 128px">

 

/*视区宽度不大于360像素时候，图片实际尺寸340像素*/

如果是用背景图的方法就这样:

/* retina image */ @media only screen { img{ background-image:url(images/[email protected]);} } @media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (min-device-pixel-ratio:2), only screen and (min-resolute:300dpi), only screen and (min-resolute:2dppx) { img{ background-image: url(images/[email protected]);} }

 

最后可以参考下:

http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/

 

3,切图小技巧:平常我们切图做页面的时候,会遇到一些页面需要切一个居中的图片.

对于这样居中的图片，我们该怎么解决呢？

我们可以直接把该图片的2边空白一起给切掉，

这样的好处就是:1,我们不需要计算2边居中的距离;2,图片可以不失真(这点几乎除了设计师能看出来);

 

二.字体rem自适应问题：

在手机端的字体大家都应该知道是以62.5%来设置html文字大小的,具体怎么计算怎么回事这个百度吧.

然而,在这里我觉得设计师是需要跟前端开发者来做一个文字大小的规范,比如说在320px屏幕大小,360px,420px等等大小不同屏幕上所要看到的文字大小会是多少？

下面是我所做的总结:(以2px来进行递增,具体请以你们与设计师沟通后来进行设置)

/*1rem=10px,同时,浏览器最低的字体大小是12px*/

/*字体自适应*/

/*比如说你在320px分辨率时,设置字体大小为1.2rem时,现在在不同宽度都可以看上去一样大小实现自适应.*/

/*设计师是以iphone6为设计标准时,16px=100%,每个断点以2px递增页面最小的字体大小(6.25%=1px)*/ h1{font-size:2.8rem;} h2{font-size:2.6rem;} h3{font-size:2.2rem;} @media only screen and (min-width:360px) and (max-width:374px){

    /*三星大屏幕机最低宽度:note2-note3,S2-S4:14px*/ html{font-size:87.5% !important;} } @media only screen and (min-width:375px) and (max-width:430px) {

    /*Iphone6,Iphone6plus最低宽度:16px*/ html{font-size:100% !important;} } /*手机横屏:最低宽度480px:18px*/ @media only screen and (min-width:480px) and (max-width:740px)and (orientation:landscape){ html{font-size:112.5% !important;} } /*平板电脑:最低宽度768px:20px*/ @media only screen and (min-width:768px) { html{font-size:125% !important;} }

 复制下面的来看看效果吧！

　　　　　　　　　　<ul>

                    <li>

                        <span>文字大小Rem这里可以看到文字在不同屏幕显示不同的大小.</span>

                    </li>

                    <li>

                        <h1>Hello World!</h1>

                    </li>

                    <li>

                        <h2>Hello World!</h2>

                    </li>

                    <li>

                        <h3>Hello World!</h3>

                    </li>

                    <li>

                        <span style="font-size:1.2rem">Hello World!</span>

                    </li>

                </ul>

 

 

 

三,@media的断点分析:

only关键字:only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对 那些不支持Media Query但却支持Media Type设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持 Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

min-width:最小宽度为多少时执行该样式;max-width:最大宽度为多少时执行该样式.

有宽度,那么高度呢？我经常做页面往往忘记的就是高度,因为我不知道怎么入手,但经常日常的工作和与同行沟通我发现可以通过定义高度来解决480px以下的手机页面问题.

min-height:最小高度为多少时执行该样式;max-height:最大高度为多少时执行该样式.

以下是分享的总结:

/* 手机断点 */

/*min-device-width或max-device-width指的是设备整个渲染区宽度(设备的实际最大或最小宽度), 用了它可能在某些安卓机无法调用到下面的样式,因为某部分安卓机的屏幕大小不一致.*/

/*iphone4等屏幕高度480px的解决方案*/ @media only screen and (max-device-height:480px) {

    

}

/*iphone5以上的屏幕高度解决方案*/ @media only screen and (min-device-height:481px) {

    

} @media only screen and (min-width:360px) and (max-width:374px){

    /*三星大屏幕机最低宽度:Note2-Note3,S2-S4*/



} @media only screen and (min-width:375px) and (max-width:430px) {

    /*Iphone6 plus,红米等大屏幕手机*/



}



/*手机横屏:orientation:landscape*/ @media only screen and (min-width:480px) and (max-width:569px) and (orientation:landscape) {

/*小米1,1s,iphone4,4s,5,5s等屏幕横屏宽度断点*/

} @media only screen and (min-width:570px) and (max-width:640px) and (orientation:landscape){

/*三星,红米等手机屏幕横屏宽度断点*/

} @media only screen and (min-width:641px) and (max-width:667px) and (orientation:landscape) {

/*Iphone6横屏宽度断点*/

} @media only screen and (min-width:736px) and (max-width:767px) and (orientation:landscape){

/*Iphone6 plus横屏宽度断点*/

} @media all and (orientation:landscape) {  

 /*这里是指所有屏幕横屏时*/

}  





/*平板和电脑:最低宽度768px*/ @media only screen and (min-width:768px) and (max-width: 959px) {



} @media only screen and (min-width:960px) and (max-width:1024px) {



} @media only screen and (min-width:1025px)and (max-width:1536px) {



}

 

四,页面布局:盒子模型

今天就以不规则布局来学习，之前做这个我花了很多时间还没达到很完美的效果！

这次用这个来box-sizing:border-box布局，发现效果还差一点点，所以多多指教了！

我来讲解下我css框架是如何使用来布局页面的(这个css框架我只是改了下类名而已,它是一个网上公开的框架,刚好是最轻量的).

首先,wrapper是我通过学习bootstrap框架提取出来的,因为一般情况下,你的页面如果有底部栏时，你有可能不能滑动而且还会被底部栏挡住.

只需要在wrapper加个padding-bottom就可以了,有底部栏就至少加个50px吧.

然后,wrap和grid你也看到我是一起写的，他们的也一起使用的.

这里涉及到关于浮动的问题,在移动端最好是少用浮动和绝对定位.

只要你页面布局时,加上grid这个class类就可以帮你清除浮动了。

另外,里面我也写了box这个类名，定义简单的是box-sizing:border-box,因为这样方便以后布局.(好像有点罗嗦)

同时,这里是可以使用栅格布局的.很灵活,因为百分比类名是你自己定义的.

如:  

.w30p{width:30%} <div class="wrap grid">



　　<p class="w30p wrap"></p>



</div>

 HTML页面:

<!DOCTYPE html>

<html>

    <head>

        <title>盒子模型</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <meta http-equiv="Pragma" name="no-store" />

        <meta http-equiv="Cache-Control" name="no-store" />

        <meta http-equiv="window-target" content="_top" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta content="telephone=no" name="format-detection" />

        <meta name="renderer" content="webkit">

        <meta name="screen-orientation" content="portrait">

        <meta name="full-screen" content="yes">

        <meta name="x5-orientation" content="portrait">

        <meta name="x5-fullscreen" content="true">

        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" href="css/template.css" />

<style> .bg1{background:#00CC66;} .bg2{background:#AAAAAA;} .bg3{background:#EEEEEE;} .bg4{background:#000000;} .bg5{background:#505050;} .bg6{background:#CCCCCC;} .h100{height:100px;} .h145{height:145px;} aside{width:30%;float: left;} .con{width:70%;float: left;} .w48p{width:48%;} .mr4p{margin-right:4%;} .mr2p{margin-right:2%;} .mb10{margin-bottom:10px;} .ptb10{padding:10px 0;} li{display: inline-block;} .w28p{width:28%;} .w68p{width:68%;} .w15p{width:15%;} .w53p{width:53%;} .w30p{width:30%;} .h210{height:210px;}



</style>

    </head>



    <body>

        <section class="wrap grid p5">

            <aside class="box p5">

                <div class="box h145 bg1 mb10"></div>

                <div class="box h145 bg2"></div>

            </aside>

            <section class="box con p5">

                <div class="box h100 bg3"></div>

                <div class="box h100 ptb10">

                    <div class="box bg4 w48p fl mr4p"></div>

                    <div class="box bg5 w48p fl"></div>

                </div>

                <div class="wrap grid box h100 bg6"></div>

            </section>

        </section>

        

        <section class="wrap grid p5">

            <ul class="box h100 m5">

                <li class="w30p h100 bg4 fl mr2p"></li>

                <li class="w68p h100 bg5 fl"></li>

            </ul>

            <ol class="box h100 m5">

                <li class="w53p h100 bg2 fl mr2p"></li>

                <li class="w28p h100 bg3 fl mr2p"></li>

                <li class="w15p h100 bg1 fl"></li>

            </ol>

            <section class="box m5">

                <div class="w30p h210 bg1 fl mr2p"></div>

                <div class="w68p h100 w100p fl">

                    <ul class="box h100 mb10">

                        <li class="w28p h100 bg3 mr4p fl"></li>

                        <li class="w68p h100 bg6 fl"></li>

                    </ul>

                    <ul class="box h100">

                        <li class="w68p h100 bg2 mr4p fl"></li>

                        <li class="w28p h100 bg5 fl"></li>

                    </ul>

                </div>

            </section>

    </section>

    

    </body>



</html>

View Code

以下是我总结得到的css样式,大家可以参考:(这里我会不定期更新,里面都写上了去掉原生的样式,其他要你自己写了)

@charset "utf-8"; html{ font-size: 62.5%;

} body { background:#fe6c9c; color:#505050;

    /*禁止选择*/ -webkit-user-select:none;

    /*去掉a,img,input的遮罩层*/ -webkit-tap-highlight-color:rgba(0, 0, 0, 0);

    /*允许独立的滚动区域和触摸回弹*/ -webkit-overflow-scrolling:touch;

    /*跟上面的一样..写法是兼容问题的话.*/ -webkit-tap-highlight-color:transparent; -webkit-user-select:none;

    /*禁止系统默认菜单*/ -webkit-touch-callout:none; -webkit-box-sizing:border-box;

} *{-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td,button,article,aside,details,figcaption,figure,footer,header,nav,section{margin:0;padding:0} body,button,input,select,textarea,p,article,span{line-height:2rem} h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:3rem}

/*1rem=10px */

/*字体自适应*/

/*比如说你在320px分辨率时,设置字体大小为1.2rem时,现在在不同宽度都可以看上去一样大小实现自适应.*/

/*设计师是以iphone6为设计标准时,16px=100%,每个断点以2px递增页面最小的字体大小*/ h1{font-size:2.8rem;} h2{font-size:2.6rem;} h3{font-size:2.2rem;} @media only screen and (min-width:360px) and (max-width:374px){

    /*三星大屏幕机最低宽度:note2-note3,S2-S4:14px*/ html{font-size:87.5% !important;} } @media only screen and (min-width:375px) and (max-width:430px) {

    /*Iphone6,Iphone6plus最低宽度:16px*/ html{font-size:100% !important;} } /*手机横屏:最低宽度480px:18px*/ @media only screen and (min-width:480px) and (max-width:740px){ html{font-size:112.5% !important;} } /*平板电脑:最低宽度768px:20px*/ @media only screen and (min-width:768px) { html{font-size:125% !important;} } html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋转屏幕时自动调整字体大小*/ textarea{resize:none;-webkit-appearance:none;outline:none} a,img{-webkit-touch-callout:none;}

/* 链接选中以及鼠标悬浮样式*/ a:active, a:hover { outline: 0; text-decoration: none;

}



/*取消标签的特殊字体样式*/ strong { font-weight: normal;

} em , i{ font-style: normal;

}

/*取消按钮在inphone上的默认样式*/ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance:button; cursor:pointer } input[type="checkbox"], input[type="radio"] { box-sizing:border-box; padding:0; -webkit-appearance:none;

} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height:auto } input[type="search"] { -webkit-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:textfield } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance:none } input[type=button] { outline:0; -webkit-appearance:none } table { border-collapse:collapse; border-spacing:0 } audio, canvas, progress, video { display:inline-block; vertical-align:baseline } audio:not([controls]) { display:none; height:0 } input::-webkit-input-placeholder{color:#F0F0F0;} textarea::-webkit-input-placeholder{color:#F0F0F0;} input::-webkit-input-speech-button {display:none}

/*android上input:focus时input不随软键盘升起而抬高的情况和点击时高亮*/ a:focus,input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0);/*这个是兼容2.3以下的系统*/ -webkit-user-modify:read-write-plaintext-only;/*这个兼容到4.0以上的系统*/

} table {border-collapse:collapse;border-spacing:0;} th {text-align:inherit;} fieldset,img {border:none;} abbr,acronym {border:none;font-variant:normal;} del{text-decoration:line-through;} ol,ul {list-style:none;} caption,th {text-align:left;} sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sup {top:-0.5em;} sub {bottom:-0.25em;} ins,a,a:hover {text-decoration:none;} a:focus,*:focus {outline:none;} .clearfix:before,.clearfix:after {content:"";display:table;clear:both;overflow:hidden;} .clearfix {zoom:1;} .clear {clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;} .hide {display:none;} .block {display:block;}

/*单行文本控制溢出和换行*/ .outL{white-space:normal;word-break:break-all;width:100px;} .outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}

/*多行文本溢出显示省略号(...)的方法------webkit-line-clamp:2;这里的数字代表多少行*/ .ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/*布局*/ .fl{float:left;display:inline;} .fr{float:right;display:inline;} .cb{clear:both;} .cl{clear:left;} .cr{clear:rigth;} .rel{position:relative;} .abs{position:absolute;} .tac{text-align:center;} .tal{text-align:left;} .tar{text-align:right;} .dib{display:inline-block;} .vab{vertical-align:bottom;} .vam{vertical-align:middle;} .vat{vertical-align:top;}

/*网格*/ .box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;} .grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .grid{*zoom:1} .grid:before,.grid:after{display:table;content:"";line-height:0} .grid:after{clear:both} .grid{list-style-type:none;padding:0;margin:0} .grid>.grid{clear:none;float:left;margin:0 !important} .wrap{float:left;width:100%}

/*网格*/

/*flex*/ .flex{display:-webkit-flex;display:flex;display:-webkit-box;-webkit-flex:1;flex:1;-webkit-box-flex:1;} .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}

/*垂直方向*/ .col{display:-webkit-box;display:flex;display:-webkit-flex;height:100%;-webkit-box-orient:vertical;flex-direction:column}

/*水平方向*/ .row{display:-webkit-flex;display:flex;display:-webkit-box;margin:auto;width:100%;height:auto;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;-webkit-box-orient:horizontal;-webkit-box-lines:multiple} .flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1} .flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2} .flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3}



/*flex*/

/*容器*/ .wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding-bottom:60px;overflow:auto;-webkit-overflow-scrolling:touch;}

/*头尾*/ header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;} header{top:0;height:44px;} footer{bottom:0;}

/*ios上使用transform的时候的闪屏问题可以尝试使用 .transform{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;} */

/*宽度*/ .w100p{width:100%} .w20p{width:20%;}



/*边距*/ .m5{margin:5px;} .p5{padding:5px;} .box{height:100%;text-align:center;}

/* 页面背景图,需要注意问题: 1,该图片看设计师做的图片大小,不然做手机的怎么可能会在PC上浏览清晰呢? 2,利用好background-size:100% 100%;就可以让整个背景图都正确的展示到页面上. */ body{background:url('../img/back.jpg') no-repeat;background-size:100% 100%;}

/*如果底部出现留白,不能占满屏幕时的解决方法: 添加 html,body{height:100%} */

/* 页面背景图 */



/* 手机断点 */

/*min-device-width或max-device-width指的是设备整个渲染区宽度(设备的实际最大或最小宽度), 用了它可能在某些安卓机无法调用到下面的样式,因为某部分安卓机的屏幕大小不一致.*/

/*iphone4等屏幕高度480px的解决方案*/ @media only screen and (max-device-height:480px) {

    

}

/*iphone5以上的屏幕高度解决方案*/ @media only screen and (min-device-height:481px) {

    

} @media only screen and (min-width:360px) and (max-width:374px){

    /*三星大屏幕机最低宽度:note2-note3,S2-S4*/



} @media only screen and (min-width:375px) and (max-width:430px) {

    /*Iphone6 plus,红米等大屏幕手机*/



}



/*手机横屏:orientation:landscape*/ @media only screen and (min-width:480px) and (max-width:569px) and (orientation:landscape) {

/*小米1,1s,iphone4,4s,5,5s等屏幕横屏宽度断点*/

} @media only screen and (min-width:570px) and (max-width:640px) and (orientation:landscape){

/*三星,红米等手机屏幕横屏宽度断点*/

} @media only screen and (min-width:641px) and (max-width:667px) and (orientation:landscape) {

/*Iphone6横屏宽度断点*/

} @media only screen and (min-width:736px) and (max-width:767px) and (orientation:landscape){

/*Iphone6 plus横屏宽度断点*/

} @media all and (orientation:landscape) {  

 /*这里是指所有屏幕横屏时*/

}  





/*平板和电脑:最低宽度768px*/ @media only screen and (min-width:768px) and (max-width: 959px) {



} @media only screen and (min-width:960px) and (max-width:1024px) {



} @media only screen and (min-width:1025px)and (max-width:1536px) {



}

View Code

下面这个是用flex来写的不规则布局:

 

<!DOCTYPE html>

<html>

    <head>

        <title>盒子模型</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <meta http-equiv="window-target" content="_top" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta content="telephone=no" name="format-detection" />

        <meta name="renderer" content="webkit">

        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" href="css/template.css" />

<style> .bg1{background:#00CC66;} .bg2{background:#AAAAAA;} .bg3{background:#FE6C9C;} .bg4{background:#000000;} .bg5{background:#505050;} .bg6{background:#CCCCCC;} .h80{height:80px;} .h100{height:100px;} .h145{height:145px;} .mr4p{margin-right:4%;} .mr2p{margin-right:2%;} .mb10{margin-bottom:10px;} .ptb10{padding:10px 0;} li{display:inline-block;} .mr1p{margin-right:1%;} .h210{height:210px} .flex4{-webkit-box-flex:4;-webkit-flex:4;flex:4} .flex6{-webkit-box-flex:6;-webkit-flex:6;flex:6}

</style>

    </head>



    <body>

        

        <section class="flex p5">

            <ul class="col p5 flex4">

                <li class="bg1 h145" style="margin-bottom:10px;">1</li>

                <li class="bg6 h145">2</li>

            </ul>

            <ul class="col flex6 p5">

                <li class="bg5 h100">1</li>

                <ul class="row h100" style="padding:5% 0;">

                    <li class="flex bg3 p5" style="margin-right:3%;">3</li>

                    <li class="flex bg4 p5">4</li>

                </ul>

                <li class="h100 bg2">5</li>

            </ul>

        </section>

        

        <section class="flex p5">

            <ul class="col p5 flex4">

                <li class="bg1 h145" style="margin-bottom:10px;">1</li>

                <li class="bg6 h145">2</li>

            </ul>

            <div class="col flex6 p5">

                <div class="bg5 h100">1</div>

                <aside style="padding:10px 0;">

                    <div class="row">

                        <div class="flex2 h80 bg3 p5 mr2p">3</div>

                        <div class="flex6 h80 bg6 p5">4</div>

                    </div>

                </aside>

                <li class="h100 bg2">5</li>

            </div>

        </section>

        

        <section class="flex p5">

            <section class="col p5 w100p">

                <div class="row" style="margin-bottom:1%;">

                    <div class="flex1 h100 bg1 mr1p">1</div>

                    <div class="flex3 h100 bg2">2</div>

                </div>

                <div class="row">

                    <div class="flex3 h100 bg6 mr1p">3</div>

                    <div class="flex2 h100 bg5 mr1p">4</div>

                    <div class="flex1 h100 bg3">5</div>

                </div>

            </section>

        </section>

        

        <section class="flex p5">

            <section class="row p5 w100p">

                <div class="flex1 h210 bg2 mr2p">1</div>

                <div class="flex3 h210">

                    <div class="row">

                        <div class="flex1 h100 bg3 mr2p">2</div>

                        <div class="flex3 h100 bg2">3</div>

                    </div>

                    <div class="row"style="margin-top:5%;">

                        <div class="flex3 h100 bg5 mr2p">4</div>

                        <div class="flex1 h100 bg6">5</div>

                    </div>    

                </div>

            </section>

        </section>

    </body>



</html>

View Code

 

 

 

五,CSS3选择器和H5新标签的使用：

伪类选择器,我以前是一直没用过的,但发现有时候用了你会有新收获的样子.

同时,我也通过W3C来新增了些该添加的新标签.这样方便以后使用.

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <meta http-equiv="Pragma" name="no-store" />

        <meta http-equiv="Cache-Control" name="no-store" />

        <meta http-equiv="window-target" content="_top" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta content="telephone=no" name="format-detection" />

        <meta name="renderer" content="webkit">

        <meta name="screen-orientation" content="portrait">

        <meta name="full-screen" content="yes">

        <meta name="x5-orientation" content="portrait">

        <meta name="x5-fullscreen" content="true">

        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" href="css/template.css" />

        <title>选择器和H5新标签</title>

        <style> body{color:#000000;} article>h1{background:#239528;}/*h1是article的子元素*/ .title+p{background:#239528;}/*兄弟选择器*/ .title1 li:first-child{background:#239528;}/*第一个li元素*/ p:nth-of-type(2){color:#0066cc;}/*2是指父元素的第二个选择器*/ fieldset:nth-child(odd){background:#239528;} fieldset:nth-child(even){color:#0066cc;} ul li:last-child{background:#0066CC;color:#239528;}/*最后一个li元素*/

        </style>

    </head>



    <body>



        <address> Written by <a href="#">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

        <article>

            <h1>Internet Explorer 9</h1>

            <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>

        </article>

        <blockquote>

            <p class="title">This is a long quotation. This is a long quotationuotatiouotatio.</p>

            <p>This is a long quotation.</p>

            <p>This is a long quotation. This is a long quotation.</p>

        </blockquote>



        <figure>

            <figcaption>黄浦江上的的卢浦大桥</figcaption>

            <ul class="title1">

                <li>黄浦江</li>

                <li>黄浦江黄浦江</li>

                <li>黄浦江黄浦江黄浦江</li>

            </ul>

        </figure>



        <form>

            <fieldset> 身高： <input type="text" />

            </fieldset>

            <fieldset> 体重： <input type="text" />

            </fieldset>

            <fieldset> 姓名： <input type="text" />

            </fieldset>

            <fieldset> 住址： <input type="text" />

            </fieldset>

        </form>

        <details>

            <summary>Copyright 2011.</summary>

            <p>All pages and graphics on this web site are the property of W3School.</p>

        </details>



    </body>



</html>

View Code

 

六,表单常用的正则验证:

在HTML5中添加了几个值得关注的关键词:pattern通过它来写正则表达式;required通过它来提醒用户还有什么没填写好！

<!DOCTYPE html>

<html>

    <head>

        <title>首页</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <!--开发后删除-->

        <meta http-equiv="Pragma" name="no-store" />

        <!--必须联网才可以访问-->

        <meta http-equiv="Cache-Control" name="no-store" />

        <!--浏览器缓存-->

        <meta http-equiv="window-target" content="_top" />

        <!--防止别人在框架里调用自己的页面-->

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!--忽略页面中的数字识别为电话，忽略email识别,去除Android平台中对邮箱地址的识别-->

        <meta content="telephone=no" name="format-detection" />

        <!--启用360浏览器的极速模式(webkit)-->

        <meta name="renderer" content="webkit">

        <!--UC强制竖屏-->

        <meta name="screen-orientation" content="portrait">

        <!--QQ强制竖屏-->

        <meta name="x5-orientation" content="portrait">

        <!--windows phone 点击无高光-->

        <meta name="msapplication-tap-highlight" content="no">

        </head>



            <body>

                <form method="post">

                    <fieldset>

                        <input type="text" placeholder="你的中文名" pattern="[\u4e00-\u9fa5]" required/>

                    </fieldset>

                    <fieldset>

                        <input type="text" placeholder="用户名" name="usename" pattern="^[0-9a-zA-Z]{4,16}$" autocomplete="on" required/>

                    </fieldset>

                    <fieldset>

                        <input type="password" id="input1" placeholder="密码" pattern="^[a-zA-Z][0-9a-zA-Z_]{5,15}$" required/>

                    </fieldset>

                    <fieldset>

                        <input type="password" id="input2" placeholder="密码" pattern="^[a-zA-Z][0-9a-zA-Z_]{5,15}$" required/>

                    </fieldset>

                    <fieldset>

                        <input type="email" placeholder="邮箱" pattern="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?" autocomplete="on" required/>

                    </fieldset>

                    <fieldset>

                        <input type="url" placeholder="http://www.baidu.com" pattern="[a-zA-z]+://[^\s]*" required/>

                    </fieldset>

                    <fieldset>

                        <input type="text" placeholder="QQ" pattern="[1-9][0-9]{4,}" autocomplete="on" required/>

                    </fieldset>

                    <fieldset>

                        <input type="date" placeholder="年-月-日" pattern="([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))" required/>

                    </fieldset>

                    <fieldset>

                        <input type="text" placeholder="手机号" maxlength="11" pattern="/^((\(\d{3}\))|(\d{3}\-))?13\d{9}|15\d{9}$/" required/>

                    </fieldset>

                    <fieldset>

                        <input type="text" placeholder="身份证" maxlength="18" pattern="^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$" required/>

                    </fieldset>



                    <input type="submit" value="提交" onclick="check()" />

                </form>

                <script>

                    function check() { with(document.all) { if (input1.value != input2.value) { alert("false") input1.value = ""; input2.value = ""; } else document.forms[0].submit(); } } </script>

            </body>



</html>

View Code

 

七,CSS3的渐变,动画:

渐变:这个学习起来不难，但就是要记住方向.

<!DOCTYPE html>

<html>

    <head>

        <title>首页</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <meta http-equiv="Pragma" name="no-store" />

        <meta http-equiv="Cache-Control" name="no-store" />

        <meta http-equiv="window-target" content="_top" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta content="telephone=no" name="format-detection" />

        <meta name="renderer" content="webkit">

        <meta name="screen-orientation" content="portrait">

        <meta name="full-screen" content="yes">

        <meta name="x5-orientation" content="portrait">

        <meta name="x5-fullscreen" content="true">

        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" href="css/template.css" />

        <style> div{ width:100%; height:100px;

            }

                /*从orange向green渐变*/

                /*从左向右渐变*/ .linear1{ background-image: linear-gradient(360deg,orange,green);background-image:-webkit-linear-gradient(360deg,orange,green);} .linear8{background-image: linear-gradient(0deg,orange,green);background-image:-webkit-linear-gradient(0deg,orange,green);}

            /*效果是从顶部向底部渐变*/ .linear2{background-image: linear-gradient(to bottom,orange,green);background-image:-webkit-linear-gradient(to bottom,orange,green);} .linear6{background-image: linear-gradient(270deg,orange,green);background-image:-webkit-linear-gradient(270deg,orange,green);}

            /*从右边向左边渐变*/ .linear3{background-image: linear-gradient(180deg,orange,green);background-image:-webkit-linear-gradient(180deg,orange,green);} .linear4{background-image: linear-gradient(-180deg,orange,green);background-image:-webkit-linear-gradient(-180deg,orange,green);}

            /*效果是从底部向顶部渐变*/ .linear5{background-image: linear-gradient(90deg,orange,green);background-image:-webkit-linear-gradient(90deg,orange,green);} .linear7{background-image: linear-gradient(-270deg,orange,green);background-image:-webkit-linear-gradient(-270deg,orange,green);} .linear9{background-image:linear-gradient(to top,orange,green);background-image:-webkit-linear-gradient(to top,orange,green);}

            /*从右下角向左上角线性渐变*/ .linear10{background-image: linear-gradient(to top left,#00cc66,#505050);background-image:-webkit-linear-gradient(to top left,#00cc66,#505050);}

            /*从左下角向右上角线性渐变*/ .linear11{background-image: linear-gradient(to top right,#00cc66,#505050);background-image:-webkit-linear-gradient(to top right,#00cc66,#505050);}

            /*从右上角向左下角线性渐变*/ .linear12{background-image:linear-gradient(to bottom left,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom left,#00cc66,#505050);}

            /*从左上角向右下角线性渐变*/ .linear13{background-image: linear-gradient(to bottom right,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom right,#00cc66,#505050);}

            /*从右向左线性渐变*/ .linear14{background-image: linear-gradient(to left,#505050,green,#00cc66,orange);background-image:-webkit-linear-gradient(to left,#505050,green,#00cc66,orange);}

            /*径向渐变*/

            /*1,渐变往中心方向聚焦--center*/ .linear15{ background-image:radial-gradient(circle at center,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);

                }

            /*2,渐变往顶部方向聚焦--top*/

            /*3,渐变往右边方向聚焦--right*/

            /*4,渐变往底部方向聚焦--bottom*/

            /*5,渐变往左边方向聚焦--left*/

            /*6,渐变往左上角方向聚焦--top left*/

            /*7,渐变往右上角方向聚焦--top right*/

            /*8,渐变往右下角方向聚焦--bottom right*/

            /*9,渐变往左下角方向聚焦--bottom left*/

            /*circle是圆形,ellipse是椭圆形*/

            /*圆形渐变*/ .linear16{ background-image:radial-gradient(20px circle at center,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);

                }

            /*椭圆渐变*/ .linear17{ background-image:radial-gradient(2em 4em ellipse at center,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);

                }

                /*可以自定义圆形的方向*/ .linear18{ background-image:radial-gradient(2em circle at top,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66);

                }

                /*可以多色渐变*/ .linear19{ background:radial-gradient(red 20%,green 50%,blue 80%); background:-webkit-radial-gradient(red 20%,green 50%,blue 80%);

                }

        </style>

    </head>



    <body>

        <section>    

        <!--从左向右渐变-->

        <div class="linear1"></div>

        <div class="linear8"></div>

        <!--从顶部向底部渐变-->

        <div class="linear2"></div>

        <div class="linear6"></div>

        <!--从右边向左边渐变-->

        <div class="linear3"></div>

        <div class="linear4"></div>

        <!--从底部向顶部渐变-->

        <div class="linear5"></div>

        <div class="linear7"></div>

        <div class="linear9"></div>

        <!--从右下角向左上角线性渐变-->

        <div class="linear10"></div>

        <!--从左下角向右上角线性渐变-->

        <div class="linear11"></div>

        <!--从右上角向左下角线性渐变-->

        <div class="linear12"></div>

        <!--从左上角向右下角线性渐变-->

        <div class="linear13"></div>

        <!--从右向左渐变-->

        <div class="linear14"></div>

        <!--径向渐变-->

        <div class="linear15"></div>

        <!--圆形渐变-->

        <div class="linear16"></div>

        <!--椭圆渐变-->

        <div class="linear17"></div>

        <!--可以自定义圆形的方向-->

        <div class="linear18"></div>

        

        <div class="linear19"></div>

        </section>

    </body>



</html>

View Code

 

动画:这个可以去使用animate.css,当然了引入文件有风险,改起来麻烦,但是你可以直接复制里面的代码,然后自己慢慢改.

@charset "UTF-8";



/*!

Animate.css - http://daneden.me/animate

Licensed under the MIT license - http://opensource.org/licenses/MIT



Copyright (c) 2015 Daniel Eden

*/



.animated {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}



.animated.infinite {

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

}



.animated.hinge {

  -webkit-animation-duration: 2s;

  animation-duration: 2s;

}



.animated.bounceIn,

.animated.bounceOut {

  -webkit-animation-duration: .75s;

  animation-duration: .75s;

}



.animated.flipOutX,

.animated.flipOutY {

  -webkit-animation-duration: .75s;

  animation-duration: .75s;

}



@-webkit-keyframes bounce {

  0%, 20%, 53%, 80%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

  }



  40%, 43% {

    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    -webkit-transform: translate3d(0, -30px, 0);

    transform: translate3d(0, -30px, 0);

  }



  70% {

    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    -webkit-transform: translate3d(0, -15px, 0);

    transform: translate3d(0, -15px, 0);

  }



  90% {

    -webkit-transform: translate3d(0,-4px,0);

    transform: translate3d(0,-4px,0);

  }

}



@keyframes bounce {

  0%, 20%, 53%, 80%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

  }



  40%, 43% {

    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    -webkit-transform: translate3d(0, -30px, 0);

    transform: translate3d(0, -30px, 0);

  }



  70% {

    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    -webkit-transform: translate3d(0, -15px, 0);

    transform: translate3d(0, -15px, 0);

  }



  90% {

    -webkit-transform: translate3d(0,-4px,0);

    transform: translate3d(0,-4px,0);

  }

}



.bounce {

  -webkit-animation-name: bounce;

  animation-name: bounce;

  -webkit-transform-origin: center bottom;

  transform-origin: center bottom;

}



@-webkit-keyframes flash {

  0%, 50%, 100% {

    opacity: 1;

  }



  25%, 75% {

    opacity: 0;

  }

}



@keyframes flash {

  0%, 50%, 100% {

    opacity: 1;

  }



  25%, 75% {

    opacity: 0;

  }

}



.flash {

  -webkit-animation-name: flash;

  animation-name: flash;

}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



@-webkit-keyframes pulse {

  0% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }



  50% {

    -webkit-transform: scale3d(1.05, 1.05, 1.05);

    transform: scale3d(1.05, 1.05, 1.05);

  }



  100% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



@keyframes pulse {

  0% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }



  50% {

    -webkit-transform: scale3d(1.05, 1.05, 1.05);

    transform: scale3d(1.05, 1.05, 1.05);

  }



  100% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



.pulse {

  -webkit-animation-name: pulse;

  animation-name: pulse;

}



@-webkit-keyframes rubberBand {

  0% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }



  30% {

    -webkit-transform: scale3d(1.25, 0.75, 1);

    transform: scale3d(1.25, 0.75, 1);

  }



  40% {

    -webkit-transform: scale3d(0.75, 1.25, 1);

    transform: scale3d(0.75, 1.25, 1);

  }



  50% {

    -webkit-transform: scale3d(1.15, 0.85, 1);

    transform: scale3d(1.15, 0.85, 1);

  }



  65% {

    -webkit-transform: scale3d(.95, 1.05, 1);

    transform: scale3d(.95, 1.05, 1);

  }



  75% {

    -webkit-transform: scale3d(1.05, .95, 1);

    transform: scale3d(1.05, .95, 1);

  }



  100% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



@keyframes rubberBand {

  0% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }



  30% {

    -webkit-transform: scale3d(1.25, 0.75, 1);

    transform: scale3d(1.25, 0.75, 1);

  }



  40% {

    -webkit-transform: scale3d(0.75, 1.25, 1);

    transform: scale3d(0.75, 1.25, 1);

  }



  50% {

    -webkit-transform: scale3d(1.15, 0.85, 1);

    transform: scale3d(1.15, 0.85, 1);

  }



  65% {

    -webkit-transform: scale3d(.95, 1.05, 1);

    transform: scale3d(.95, 1.05, 1);

  }



  75% {

    -webkit-transform: scale3d(1.05, .95, 1);

    transform: scale3d(1.05, .95, 1);

  }



  100% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



.rubberBand {

  -webkit-animation-name: rubberBand;

  animation-name: rubberBand;

}



@-webkit-keyframes shake {

  0%, 100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  10%, 30%, 50%, 70%, 90% {

    -webkit-transform: translate3d(-10px, 0, 0);

    transform: translate3d(-10px, 0, 0);

  }



  20%, 40%, 60%, 80% {

    -webkit-transform: translate3d(10px, 0, 0);

    transform: translate3d(10px, 0, 0);

  }

}



@keyframes shake {

  0%, 100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  10%, 30%, 50%, 70%, 90% {

    -webkit-transform: translate3d(-10px, 0, 0);

    transform: translate3d(-10px, 0, 0);

  }



  20%, 40%, 60%, 80% {

    -webkit-transform: translate3d(10px, 0, 0);

    transform: translate3d(10px, 0, 0);

  }

}



.shake {

  -webkit-animation-name: shake;

  animation-name: shake;

}



@-webkit-keyframes swing {

  20% {

    -webkit-transform: rotate3d(0, 0, 1, 15deg);

    transform: rotate3d(0, 0, 1, 15deg);

  }



  40% {

    -webkit-transform: rotate3d(0, 0, 1, -10deg);

    transform: rotate3d(0, 0, 1, -10deg);

  }



  60% {

    -webkit-transform: rotate3d(0, 0, 1, 5deg);

    transform: rotate3d(0, 0, 1, 5deg);

  }



  80% {

    -webkit-transform: rotate3d(0, 0, 1, -5deg);

    transform: rotate3d(0, 0, 1, -5deg);

  }



  100% {

    -webkit-transform: rotate3d(0, 0, 1, 0deg);

    transform: rotate3d(0, 0, 1, 0deg);

  }

}



@keyframes swing {

  20% {

    -webkit-transform: rotate3d(0, 0, 1, 15deg);

    transform: rotate3d(0, 0, 1, 15deg);

  }



  40% {

    -webkit-transform: rotate3d(0, 0, 1, -10deg);

    transform: rotate3d(0, 0, 1, -10deg);

  }



  60% {

    -webkit-transform: rotate3d(0, 0, 1, 5deg);

    transform: rotate3d(0, 0, 1, 5deg);

  }



  80% {

    -webkit-transform: rotate3d(0, 0, 1, -5deg);

    transform: rotate3d(0, 0, 1, -5deg);

  }



  100% {

    -webkit-transform: rotate3d(0, 0, 1, 0deg);

    transform: rotate3d(0, 0, 1, 0deg);

  }

}



.swing {

  -webkit-transform-origin: top center;

  transform-origin: top center;

  -webkit-animation-name: swing;

  animation-name: swing;

}



@-webkit-keyframes tada {

  0% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }



  10%, 20% {

    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

  }



  30%, 50%, 70%, 90% {

    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

  }



  40%, 60%, 80% {

    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

  }



  100% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



@keyframes tada {

  0% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }



  10%, 20% {

    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

  }



  30%, 50%, 70%, 90% {

    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

  }



  40%, 60%, 80% {

    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

  }



  100% {

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



.tada {

  -webkit-animation-name: tada;

  animation-name: tada;

}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



@-webkit-keyframes wobble {

  0% {

    -webkit-transform: none;

    transform: none;

  }



  15% {

    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

  }



  30% {

    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

  }



  45% {

    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

  }



  60% {

    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

  }



  75% {

    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes wobble {

  0% {

    -webkit-transform: none;

    transform: none;

  }



  15% {

    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

  }



  30% {

    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

  }



  45% {

    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

  }



  60% {

    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

  }



  75% {

    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



.wobble {

  -webkit-animation-name: wobble;

  animation-name: wobble;

}



@-webkit-keyframes bounceIn {

  0%, 20%, 40%, 60%, 80%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }



  20% {

    -webkit-transform: scale3d(1.1, 1.1, 1.1);

    transform: scale3d(1.1, 1.1, 1.1);

  }



  40% {

    -webkit-transform: scale3d(.9, .9, .9);

    transform: scale3d(.9, .9, .9);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(1.03, 1.03, 1.03);

    transform: scale3d(1.03, 1.03, 1.03);

  }



  80% {

    -webkit-transform: scale3d(.97, .97, .97);

    transform: scale3d(.97, .97, .97);

  }



  100% {

    opacity: 1;

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



@keyframes bounceIn {

  0%, 20%, 40%, 60%, 80%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }



  20% {

    -webkit-transform: scale3d(1.1, 1.1, 1.1);

    transform: scale3d(1.1, 1.1, 1.1);

  }



  40% {

    -webkit-transform: scale3d(.9, .9, .9);

    transform: scale3d(.9, .9, .9);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(1.03, 1.03, 1.03);

    transform: scale3d(1.03, 1.03, 1.03);

  }



  80% {

    -webkit-transform: scale3d(.97, .97, .97);

    transform: scale3d(.97, .97, .97);

  }



  100% {

    opacity: 1;

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

  }

}



.bounceIn {

  -webkit-animation-name: bounceIn;

  animation-name: bounceIn;

}



@-webkit-keyframes bounceInDown {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, -3000px, 0);

    transform: translate3d(0, -3000px, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(0, 25px, 0);

    transform: translate3d(0, 25px, 0);

  }



  75% {

    -webkit-transform: translate3d(0, -10px, 0);

    transform: translate3d(0, -10px, 0);

  }



  90% {

    -webkit-transform: translate3d(0, 5px, 0);

    transform: translate3d(0, 5px, 0);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes bounceInDown {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, -3000px, 0);

    transform: translate3d(0, -3000px, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(0, 25px, 0);

    transform: translate3d(0, 25px, 0);

  }



  75% {

    -webkit-transform: translate3d(0, -10px, 0);

    transform: translate3d(0, -10px, 0);

  }



  90% {

    -webkit-transform: translate3d(0, 5px, 0);

    transform: translate3d(0, 5px, 0);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



.bounceInDown {

  -webkit-animation-name: bounceInDown;

  animation-name: bounceInDown;

}



@-webkit-keyframes bounceInLeft {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(-3000px, 0, 0);

    transform: translate3d(-3000px, 0, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(25px, 0, 0);

    transform: translate3d(25px, 0, 0);

  }



  75% {

    -webkit-transform: translate3d(-10px, 0, 0);

    transform: translate3d(-10px, 0, 0);

  }



  90% {

    -webkit-transform: translate3d(5px, 0, 0);

    transform: translate3d(5px, 0, 0);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes bounceInLeft {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(-3000px, 0, 0);

    transform: translate3d(-3000px, 0, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(25px, 0, 0);

    transform: translate3d(25px, 0, 0);

  }



  75% {

    -webkit-transform: translate3d(-10px, 0, 0);

    transform: translate3d(-10px, 0, 0);

  }



  90% {

    -webkit-transform: translate3d(5px, 0, 0);

    transform: translate3d(5px, 0, 0);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



.bounceInLeft {

  -webkit-animation-name: bounceInLeft;

  animation-name: bounceInLeft;

}



@-webkit-keyframes bounceInRight {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(3000px, 0, 0);

    transform: translate3d(3000px, 0, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(-25px, 0, 0);

    transform: translate3d(-25px, 0, 0);

  }



  75% {

    -webkit-transform: translate3d(10px, 0, 0);

    transform: translate3d(10px, 0, 0);

  }



  90% {

    -webkit-transform: translate3d(-5px, 0, 0);

    transform: translate3d(-5px, 0, 0);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes bounceInRight {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(3000px, 0, 0);

    transform: translate3d(3000px, 0, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(-25px, 0, 0);

    transform: translate3d(-25px, 0, 0);

  }



  75% {

    -webkit-transform: translate3d(10px, 0, 0);

    transform: translate3d(10px, 0, 0);

  }



  90% {

    -webkit-transform: translate3d(-5px, 0, 0);

    transform: translate3d(-5px, 0, 0);

  }



  100% {

    -webkit-transform: none;

    transform: none;

  }

}



.bounceInRight {

  -webkit-animation-name: bounceInRight;

  animation-name: bounceInRight;

}



@-webkit-keyframes bounceInUp {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 3000px, 0);

    transform: translate3d(0, 3000px, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(0, -20px, 0);

    transform: translate3d(0, -20px, 0);

  }



  75% {

    -webkit-transform: translate3d(0, 10px, 0);

    transform: translate3d(0, 10px, 0);

  }



  90% {

    -webkit-transform: translate3d(0, -5px, 0);

    transform: translate3d(0, -5px, 0);

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



@keyframes bounceInUp {

  0%, 60%, 75%, 90%, 100% {

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 3000px, 0);

    transform: translate3d(0, 3000px, 0);

  }



  60% {

    opacity: 1;

    -webkit-transform: translate3d(0, -20px, 0);

    transform: translate3d(0, -20px, 0);

  }



  75% {

    -webkit-transform: translate3d(0, 10px, 0);

    transform: translate3d(0, 10px, 0);

  }



  90% {

    -webkit-transform: translate3d(0, -5px, 0);

    transform: translate3d(0, -5px, 0);

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



.bounceInUp {

  -webkit-animation-name: bounceInUp;

  animation-name: bounceInUp;

}



@-webkit-keyframes bounceOut {

  20% {

    -webkit-transform: scale3d(.9, .9, .9);

    transform: scale3d(.9, .9, .9);

  }



  50%, 55% {

    opacity: 1;

    -webkit-transform: scale3d(1.1, 1.1, 1.1);

    transform: scale3d(1.1, 1.1, 1.1);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }

}



@keyframes bounceOut {

  20% {

    -webkit-transform: scale3d(.9, .9, .9);

    transform: scale3d(.9, .9, .9);

  }



  50%, 55% {

    opacity: 1;

    -webkit-transform: scale3d(1.1, 1.1, 1.1);

    transform: scale3d(1.1, 1.1, 1.1);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }

}



.bounceOut {

  -webkit-animation-name: bounceOut;

  animation-name: bounceOut;

}



@-webkit-keyframes bounceOutDown {

  20% {

    -webkit-transform: translate3d(0, 10px, 0);

    transform: translate3d(0, 10px, 0);

  }



  40%, 45% {

    opacity: 1;

    -webkit-transform: translate3d(0, -20px, 0);

    transform: translate3d(0, -20px, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }

}



@keyframes bounceOutDown {

  20% {

    -webkit-transform: translate3d(0, 10px, 0);

    transform: translate3d(0, 10px, 0);

  }



  40%, 45% {

    opacity: 1;

    -webkit-transform: translate3d(0, -20px, 0);

    transform: translate3d(0, -20px, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }

}



.bounceOutDown {

  -webkit-animation-name: bounceOutDown;

  animation-name: bounceOutDown;

}



@-webkit-keyframes bounceOutLeft {

  20% {

    opacity: 1;

    -webkit-transform: translate3d(20px, 0, 0);

    transform: translate3d(20px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }

}



@keyframes bounceOutLeft {

  20% {

    opacity: 1;

    -webkit-transform: translate3d(20px, 0, 0);

    transform: translate3d(20px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }

}



.bounceOutLeft {

  -webkit-animation-name: bounceOutLeft;

  animation-name: bounceOutLeft;

}



@-webkit-keyframes bounceOutRight {

  20% {

    opacity: 1;

    -webkit-transform: translate3d(-20px, 0, 0);

    transform: translate3d(-20px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }

}



@keyframes bounceOutRight {

  20% {

    opacity: 1;

    -webkit-transform: translate3d(-20px, 0, 0);

    transform: translate3d(-20px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }

}



.bounceOutRight {

  -webkit-animation-name: bounceOutRight;

  animation-name: bounceOutRight;

}



@-webkit-keyframes bounceOutUp {

  20% {

    -webkit-transform: translate3d(0, -10px, 0);

    transform: translate3d(0, -10px, 0);

  }



  40%, 45% {

    opacity: 1;

    -webkit-transform: translate3d(0, 20px, 0);

    transform: translate3d(0, 20px, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }

}



@keyframes bounceOutUp {

  20% {

    -webkit-transform: translate3d(0, -10px, 0);

    transform: translate3d(0, -10px, 0);

  }



  40%, 45% {

    opacity: 1;

    -webkit-transform: translate3d(0, 20px, 0);

    transform: translate3d(0, 20px, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }

}



.bounceOutUp {

  -webkit-animation-name: bounceOutUp;

  animation-name: bounceOutUp;

}



@-webkit-keyframes fadeIn {

  0% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



@keyframes fadeIn {

  0% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



.fadeIn {

  -webkit-animation-name: fadeIn;

  animation-name: fadeIn;

}



@-webkit-keyframes fadeInDown {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInDown {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInDown {

  -webkit-animation-name: fadeInDown;

  animation-name: fadeInDown;

}



@-webkit-keyframes fadeInDownBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInDownBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInDownBig {

  -webkit-animation-name: fadeInDownBig;

  animation-name: fadeInDownBig;

}



@-webkit-keyframes fadeInLeft {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInLeft {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInLeft {

  -webkit-animation-name: fadeInLeft;

  animation-name: fadeInLeft;

}



@-webkit-keyframes fadeInLeftBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInLeftBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInLeftBig {

  -webkit-animation-name: fadeInLeftBig;

  animation-name: fadeInLeftBig;

}



@-webkit-keyframes fadeInRight {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInRight {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInRight {

  -webkit-animation-name: fadeInRight;

  animation-name: fadeInRight;

}



@-webkit-keyframes fadeInRightBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInRightBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInRightBig {

  -webkit-animation-name: fadeInRightBig;

  animation-name: fadeInRightBig;

}



@-webkit-keyframes fadeInUp {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInUp {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInUp {

  -webkit-animation-name: fadeInUp;

  animation-name: fadeInUp;

}



@-webkit-keyframes fadeInUpBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInUpBig {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInUpBig {

  -webkit-animation-name: fadeInUpBig;

  animation-name: fadeInUpBig;

}



@-webkit-keyframes fadeOut {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

  }

}



@keyframes fadeOut {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

  }

}



.fadeOut {

  -webkit-animation-name: fadeOut;

  animation-name: fadeOut;

}



@-webkit-keyframes fadeOutDown {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }

}



@keyframes fadeOutDown {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }

}



.fadeOutDown {

  -webkit-animation-name: fadeOutDown;

  animation-name: fadeOutDown;

}



@-webkit-keyframes fadeOutDownBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }

}



@keyframes fadeOutDownBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, 2000px, 0);

    transform: translate3d(0, 2000px, 0);

  }

}



.fadeOutDownBig {

  -webkit-animation-name: fadeOutDownBig;

  animation-name: fadeOutDownBig;

}



@-webkit-keyframes fadeOutLeft {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }

}



@keyframes fadeOutLeft {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }

}



.fadeOutLeft {

  -webkit-animation-name: fadeOutLeft;

  animation-name: fadeOutLeft;

}



@-webkit-keyframes fadeOutLeftBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }

}



@keyframes fadeOutLeftBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(-2000px, 0, 0);

    transform: translate3d(-2000px, 0, 0);

  }

}



.fadeOutLeftBig {

  -webkit-animation-name: fadeOutLeftBig;

  animation-name: fadeOutLeftBig;

}



@-webkit-keyframes fadeOutRight {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }

}



@keyframes fadeOutRight {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }

}



.fadeOutRight {

  -webkit-animation-name: fadeOutRight;

  animation-name: fadeOutRight;

}



@-webkit-keyframes fadeOutRightBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }

}



@keyframes fadeOutRightBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(2000px, 0, 0);

    transform: translate3d(2000px, 0, 0);

  }

}



.fadeOutRightBig {

  -webkit-animation-name: fadeOutRightBig;

  animation-name: fadeOutRightBig;

}



@-webkit-keyframes fadeOutUp {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }

}



@keyframes fadeOutUp {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }

}



.fadeOutUp {

  -webkit-animation-name: fadeOutUp;

  animation-name: fadeOutUp;

}



@-webkit-keyframes fadeOutUpBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }

}



@keyframes fadeOutUpBig {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(0, -2000px, 0);

    transform: translate3d(0, -2000px, 0);

  }

}



.fadeOutUpBig {

  -webkit-animation-name: fadeOutUpBig;

  animation-name: fadeOutUpBig;

}



@-webkit-keyframes flip {

  0% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

    -webkit-animation-timing-function: ease-out;

    animation-timing-function: ease-out;

  }



  40% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    -webkit-animation-timing-function: ease-out;

    animation-timing-function: ease-out;

  }



  50% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }



  80% {

    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);

    transform: perspective(400px) scale3d(.95, .95, .95);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }



  100% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }

}



@keyframes flip {

  0% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);

    -webkit-animation-timing-function: ease-out;

    animation-timing-function: ease-out;

  }



  40% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

    -webkit-animation-timing-function: ease-out;

    animation-timing-function: ease-out;

  }



  50% {

    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }



  80% {

    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);

    transform: perspective(400px) scale3d(.95, .95, .95);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }



  100% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }

}



.animated.flip {

  -webkit-backface-visibility: visible;

  backface-visibility: visible;

  -webkit-animation-name: flip;

  animation-name: flip;

}



@-webkit-keyframes flipInX {

  0% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

    opacity: 0;

  }



  40% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

  }



  60% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

    opacity: 1;

  }



  80% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

  }



  100% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }

}



@keyframes flipInX {

  0% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

    opacity: 0;

  }



  40% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

  }



  60% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

    opacity: 1;

  }



  80% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

  }



  100% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }

}



.flipInX {

  -webkit-backface-visibility: visible !important;

  backface-visibility: visible !important;

  -webkit-animation-name: flipInX;

  animation-name: flipInX;

}



@-webkit-keyframes flipInY {

  0% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

    opacity: 0;

  }



  40% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

  }



  60% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

    opacity: 1;

  }



  80% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

  }



  100% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }

}



@keyframes flipInY {

  0% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

    opacity: 0;

  }



  40% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

    -webkit-transition-timing-function: ease-in;

    transition-timing-function: ease-in;

  }



  60% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

    opacity: 1;

  }



  80% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

  }



  100% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }

}



.flipInY {

  -webkit-backface-visibility: visible !important;

  backface-visibility: visible !important;

  -webkit-animation-name: flipInY;

  animation-name: flipInY;

}



@-webkit-keyframes flipOutX {

  0% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }



  30% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    opacity: 1;

  }



  100% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    opacity: 0;

  }

}



@keyframes flipOutX {

  0% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }



  30% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

    opacity: 1;

  }



  100% {

    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

    opacity: 0;

  }

}



.flipOutX {

  -webkit-animation-name: flipOutX;

  animation-name: flipOutX;

  -webkit-backface-visibility: visible !important;

  backface-visibility: visible !important;

}



@-webkit-keyframes flipOutY {

  0% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }



  30% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

    opacity: 1;

  }



  100% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    opacity: 0;

  }

}



@keyframes flipOutY {

  0% {

    -webkit-transform: perspective(400px);

    transform: perspective(400px);

  }



  30% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

    opacity: 1;

  }



  100% {

    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

    opacity: 0;

  }

}



.flipOutY {

  -webkit-backface-visibility: visible !important;

  backface-visibility: visible !important;

  -webkit-animation-name: flipOutY;

  animation-name: flipOutY;

}



@-webkit-keyframes lightSpeedIn {

  0% {

    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);

    transform: translate3d(100%, 0, 0) skewX(-30deg);

    opacity: 0;

  }



  60% {

    -webkit-transform: skewX(20deg);

    transform: skewX(20deg);

    opacity: 1;

  }



  80% {

    -webkit-transform: skewX(-5deg);

    transform: skewX(-5deg);

    opacity: 1;

  }



  100% {

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



@keyframes lightSpeedIn {

  0% {

    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);

    transform: translate3d(100%, 0, 0) skewX(-30deg);

    opacity: 0;

  }



  60% {

    -webkit-transform: skewX(20deg);

    transform: skewX(20deg);

    opacity: 1;

  }



  80% {

    -webkit-transform: skewX(-5deg);

    transform: skewX(-5deg);

    opacity: 1;

  }



  100% {

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.lightSpeedIn {

  -webkit-animation-name: lightSpeedIn;

  animation-name: lightSpeedIn;

  -webkit-animation-timing-function: ease-out;

  animation-timing-function: ease-out;

}



@-webkit-keyframes lightSpeedOut {

  0% {

    opacity: 1;

  }



  100% {

    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);

    transform: translate3d(100%, 0, 0) skewX(30deg);

    opacity: 0;

  }

}



@keyframes lightSpeedOut {

  0% {

    opacity: 1;

  }



  100% {

    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);

    transform: translate3d(100%, 0, 0) skewX(30deg);

    opacity: 0;

  }

}



.lightSpeedOut {

  -webkit-animation-name: lightSpeedOut;

  animation-name: lightSpeedOut;

  -webkit-animation-timing-function: ease-in;

  animation-timing-function: ease-in;

}



@-webkit-keyframes rotateIn {

  0% {

    -webkit-transform-origin: center;

    transform-origin: center;

    -webkit-transform: rotate3d(0, 0, 1, -200deg);

    transform: rotate3d(0, 0, 1, -200deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: center;

    transform-origin: center;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



@keyframes rotateIn {

  0% {

    -webkit-transform-origin: center;

    transform-origin: center;

    -webkit-transform: rotate3d(0, 0, 1, -200deg);

    transform: rotate3d(0, 0, 1, -200deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: center;

    transform-origin: center;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.rotateIn {

  -webkit-animation-name: rotateIn;

  animation-name: rotateIn;

}



@-webkit-keyframes rotateInDownLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);

    transform: rotate3d(0, 0, 1, -45deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



@keyframes rotateInDownLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);

    transform: rotate3d(0, 0, 1, -45deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.rotateInDownLeft {

  -webkit-animation-name: rotateInDownLeft;

  animation-name: rotateInDownLeft;

}



@-webkit-keyframes rotateInDownRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);

    transform: rotate3d(0, 0, 1, 45deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



@keyframes rotateInDownRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);

    transform: rotate3d(0, 0, 1, 45deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.rotateInDownRight {

  -webkit-animation-name: rotateInDownRight;

  animation-name: rotateInDownRight;

}



@-webkit-keyframes rotateInUpLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);

    transform: rotate3d(0, 0, 1, 45deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



@keyframes rotateInUpLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);

    transform: rotate3d(0, 0, 1, 45deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.rotateInUpLeft {

  -webkit-animation-name: rotateInUpLeft;

  animation-name: rotateInUpLeft;

}



@-webkit-keyframes rotateInUpRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, -90deg);

    transform: rotate3d(0, 0, 1, -90deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



@keyframes rotateInUpRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, -90deg);

    transform: rotate3d(0, 0, 1, -90deg);

    opacity: 0;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: none;

    transform: none;

    opacity: 1;

  }

}



.rotateInUpRight {

  -webkit-animation-name: rotateInUpRight;

  animation-name: rotateInUpRight;

}



@-webkit-keyframes rotateOut {

  0% {

    -webkit-transform-origin: center;

    transform-origin: center;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: center;

    transform-origin: center;

    -webkit-transform: rotate3d(0, 0, 1, 200deg);

    transform: rotate3d(0, 0, 1, 200deg);

    opacity: 0;

  }

}



@keyframes rotateOut {

  0% {

    -webkit-transform-origin: center;

    transform-origin: center;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: center;

    transform-origin: center;

    -webkit-transform: rotate3d(0, 0, 1, 200deg);

    transform: rotate3d(0, 0, 1, 200deg);

    opacity: 0;

  }

}



.rotateOut {

  -webkit-animation-name: rotateOut;

  animation-name: rotateOut;

}



@-webkit-keyframes rotateOutDownLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);

    transform: rotate3d(0, 0, 1, 45deg);

    opacity: 0;

  }

}



@keyframes rotateOutDownLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);

    transform: rotate3d(0, 0, 1, 45deg);

    opacity: 0;

  }

}



.rotateOutDownLeft {

  -webkit-animation-name: rotateOutDownLeft;

  animation-name: rotateOutDownLeft;

}



@-webkit-keyframes rotateOutDownRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);

    transform: rotate3d(0, 0, 1, -45deg);

    opacity: 0;

  }

}



@keyframes rotateOutDownRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);

    transform: rotate3d(0, 0, 1, -45deg);

    opacity: 0;

  }

}



.rotateOutDownRight {

  -webkit-animation-name: rotateOutDownRight;

  animation-name: rotateOutDownRight;

}



@-webkit-keyframes rotateOutUpLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);

    transform: rotate3d(0, 0, 1, -45deg);

    opacity: 0;

  }

}



@keyframes rotateOutUpLeft {

  0% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: left bottom;

    transform-origin: left bottom;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);

    transform: rotate3d(0, 0, 1, -45deg);

    opacity: 0;

  }

}



.rotateOutUpLeft {

  -webkit-animation-name: rotateOutUpLeft;

  animation-name: rotateOutUpLeft;

}



@-webkit-keyframes rotateOutUpRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, 90deg);

    transform: rotate3d(0, 0, 1, 90deg);

    opacity: 0;

  }

}



@keyframes rotateOutUpRight {

  0% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    opacity: 1;

  }



  100% {

    -webkit-transform-origin: right bottom;

    transform-origin: right bottom;

    -webkit-transform: rotate3d(0, 0, 1, 90deg);

    transform: rotate3d(0, 0, 1, 90deg);

    opacity: 0;

  }

}



.rotateOutUpRight {

  -webkit-animation-name: rotateOutUpRight;

  animation-name: rotateOutUpRight;

}



@-webkit-keyframes hinge {

  0% {

    -webkit-transform-origin: top left;

    transform-origin: top left;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

  }



  20%, 60% {

    -webkit-transform: rotate3d(0, 0, 1, 80deg);

    transform: rotate3d(0, 0, 1, 80deg);

    -webkit-transform-origin: top left;

    transform-origin: top left;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

  }



  40%, 80% {

    -webkit-transform: rotate3d(0, 0, 1, 60deg);

    transform: rotate3d(0, 0, 1, 60deg);

    -webkit-transform-origin: top left;

    transform-origin: top left;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

    opacity: 1;

  }



  100% {

    -webkit-transform: translate3d(0, 700px, 0);

    transform: translate3d(0, 700px, 0);

    opacity: 0;

  }

}



@keyframes hinge {

  0% {

    -webkit-transform-origin: top left;

    transform-origin: top left;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

  }



  20%, 60% {

    -webkit-transform: rotate3d(0, 0, 1, 80deg);

    transform: rotate3d(0, 0, 1, 80deg);

    -webkit-transform-origin: top left;

    transform-origin: top left;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

  }



  40%, 80% {

    -webkit-transform: rotate3d(0, 0, 1, 60deg);

    transform: rotate3d(0, 0, 1, 60deg);

    -webkit-transform-origin: top left;

    transform-origin: top left;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

    opacity: 1;

  }



  100% {

    -webkit-transform: translate3d(0, 700px, 0);

    transform: translate3d(0, 700px, 0);

    opacity: 0;

  }

}



.hinge {

  -webkit-animation-name: hinge;

  animation-name: hinge;

}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



@-webkit-keyframes rollIn {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes rollIn {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.rollIn {

  -webkit-animation-name: rollIn;

  animation-name: rollIn;

}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



@-webkit-keyframes rollOut {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);

    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);

  }

}



@keyframes rollOut {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);

    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);

  }

}



.rollOut {

  -webkit-animation-name: rollOut;

  animation-name: rollOut;

}



@-webkit-keyframes zoomIn {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }



  50% {

    opacity: 1;

  }

}



@keyframes zoomIn {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }



  50% {

    opacity: 1;

  }

}



.zoomIn {

  -webkit-animation-name: zoomIn;

  animation-name: zoomIn;

}



@-webkit-keyframes zoomInDown {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



@keyframes zoomInDown {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



.zoomInDown {

  -webkit-animation-name: zoomInDown;

  animation-name: zoomInDown;

}



@-webkit-keyframes zoomInLeft {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



@keyframes zoomInLeft {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



.zoomInLeft {

  -webkit-animation-name: zoomInLeft;

  animation-name: zoomInLeft;

}



@-webkit-keyframes zoomInRight {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



@keyframes zoomInRight {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



.zoomInRight {

  -webkit-animation-name: zoomInRight;

  animation-name: zoomInRight;

}



@-webkit-keyframes zoomInUp {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



@keyframes zoomInUp {

  0% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



.zoomInUp {

  -webkit-animation-name: zoomInUp;

  animation-name: zoomInUp;

}



@-webkit-keyframes zoomOut {

  0% {

    opacity: 1;

  }



  50% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }



  100% {

    opacity: 0;

  }

}



@keyframes zoomOut {

  0% {

    opacity: 1;

  }



  50% {

    opacity: 0;

    -webkit-transform: scale3d(.3, .3, .3);

    transform: scale3d(.3, .3, .3);

  }



  100% {

    opacity: 0;

  }

}



.zoomOut {

  -webkit-animation-name: zoomOut;

  animation-name: zoomOut;

}



@-webkit-keyframes zoomOutDown {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

    -webkit-transform-origin: center bottom;

    transform-origin: center bottom;

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



@keyframes zoomOutDown {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

    -webkit-transform-origin: center bottom;

    transform-origin: center bottom;

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



.zoomOutDown {

  -webkit-animation-name: zoomOutDown;

  animation-name: zoomOutDown;

}



@-webkit-keyframes zoomOutLeft {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);

    transform: scale(.1) translate3d(-2000px, 0, 0);

    -webkit-transform-origin: left center;

    transform-origin: left center;

  }

}



@keyframes zoomOutLeft {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);

    transform: scale(.1) translate3d(-2000px, 0, 0);

    -webkit-transform-origin: left center;

    transform-origin: left center;

  }

}



.zoomOutLeft {

  -webkit-animation-name: zoomOutLeft;

  animation-name: zoomOutLeft;

}



@-webkit-keyframes zoomOutRight {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);

    transform: scale(.1) translate3d(2000px, 0, 0);

    -webkit-transform-origin: right center;

    transform-origin: right center;

  }

}



@keyframes zoomOutRight {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);

    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);

    transform: scale(.1) translate3d(2000px, 0, 0);

    -webkit-transform-origin: right center;

    transform-origin: right center;

  }

}



.zoomOutRight {

  -webkit-animation-name: zoomOutRight;

  animation-name: zoomOutRight;

}



@-webkit-keyframes zoomOutUp {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

    -webkit-transform-origin: center bottom;

    transform-origin: center bottom;

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



@keyframes zoomOutUp {

  40% {

    opacity: 1;

    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  100% {

    opacity: 0;

    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

    -webkit-transform-origin: center bottom;

    transform-origin: center bottom;

    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



.zoomOutUp {

  -webkit-animation-name: zoomOutUp;

  animation-name: zoomOutUp;

}



@-webkit-keyframes slideInDown {

  0% {

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



@keyframes slideInDown {

  0% {

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



.slideInDown {

  -webkit-animation-name: slideInDown;

  animation-name: slideInDown;

}



@-webkit-keyframes slideInLeft {

  0% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



@keyframes slideInLeft {

  0% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



.slideInLeft {

  -webkit-animation-name: slideInLeft;

  animation-name: slideInLeft;

}



@-webkit-keyframes slideInRight {

  0% {

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



@keyframes slideInRight {

  0% {

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



.slideInRight {

  -webkit-animation-name: slideInRight;

  animation-name: slideInRight;

}



@-webkit-keyframes slideInUp {

  0% {

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



@keyframes slideInUp {

  0% {

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

    visibility: visible;

  }



  100% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}



.slideInUp {

  -webkit-animation-name: slideInUp;

  animation-name: slideInUp;

}



@-webkit-keyframes slideOutDown {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }

}



@keyframes slideOutDown {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

  }

}



.slideOutDown {

  -webkit-animation-name: slideOutDown;

  animation-name: slideOutDown;

}



@-webkit-keyframes slideOutLeft {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }

}



@keyframes slideOutLeft {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }

}



.slideOutLeft {

  -webkit-animation-name: slideOutLeft;

  animation-name: slideOutLeft;

}



@-webkit-keyframes slideOutRight {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }

}



@keyframes slideOutRight {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

  }

}



.slideOutRight {

  -webkit-animation-name: slideOutRight;

  animation-name: slideOutRight;

}



@-webkit-keyframes slideOutUp {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }

}



@keyframes slideOutUp {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  100% {

    visibility: hidden;

    -webkit-transform: translate3d(0, -100%, 0);

    transform: translate3d(0, -100%, 0);

  }

}



.slideOutUp {

  -webkit-animation-name: slideOutUp;

  animation-name: slideOutUp;

}

View Code

 仅供参考:

<!DOCTYPE html>

<html>

    <head>

        <title>动画</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <meta http-equiv="Pragma" name="no-store" />

        <meta http-equiv="Cache-Control" name="no-store" />

        <meta http-equiv="window-target" content="_top" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta content="telephone=no" name="format-detection" />

        <meta name="renderer" content="webkit">

        <meta name="screen-orientation" content="portrait">

        <meta name="full-screen" content="yes">

        <meta name="x5-orientation" content="portrait">

        <meta name="x5-fullscreen" content="true">

        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" href="css/template.css" />

        <style> .animate{ width:200px;height:200px;background:#AAAAAA; animation-name:animate; animation-duration:3s; animation-timing-function:ease-in; animation-delay:2s, 100ms; -webkit-animation-name:animate; -webkit-animation-duration:3s; -webkit-animation-timing-function:ease-in; -webkit-animation-delay:.25s, 100ms;

            } @keyframes animate{ 0%{ margin-left:20px; background:#008000; border-radius:5px; -webkit-border-radius:5px; transform:scale(0.25) rotate(60deg); -webkit-transform:scale(0.25) rotate(60deg);

                } 20%{ margin-left:40px; border-radius:55px; -webkit-border-radius:55px; background:#FFA500; transform: scale(0.5) rotate(120deg); -webkit-transform:scale(0.5) rotate(120deg);

                } 40%{ margin-left:60px; border-radius:105px; -webkit-border-radius:105px; background:#FFA500; transform: scale(0.75) rotate(180deg); -webkit-transform:scale(0.75) rotate(180deg);

                } 60%{ margin-left:100px; border-radius:155px; -webkit-border-radius:155px; background:#FFA500; transform: scale(1) rotate(240deg); -webkit-transform:scale(1) rotate(240deg);

                } 80%{ margin-left:150px; border-radius:180px; -webkit-border-radius:180px; background:#FFA500; transform: scale(1.25) rotate(300deg); -webkit-transform:scale(1.25) rotate(300deg);

                } 100%{ margin-left:200px; border-radius:200px; -webkit-border-radius:200px; background:#AAAAAA; transform: scale(1.5) rotate(360deg); -webkit-transform:scale(1.5) rotate(360deg);

                } } @-webkit-keyframes animate{ 0%{ margin-left:20px; background:#008000; border-radius:5px; -webkit-border-radius:5px; transform:scale(0.25) rotate(60deg); -webkit-transform:scale(0.25) rotate(60deg);

                } 20%{ margin-left:40px; border-radius:55px; -webkit-border-radius:55px; background:#FFA500; transform: scale(0.5) rotate(120deg); -webkit-transform:scale(0.5) rotate(120deg);

                } 40%{ margin-left:60px; border-radius:105px; -webkit-border-radius:105px; background:#FFA500; transform: scale(0.75) rotate(180deg); -webkit-transform:scale(0.75) rotate(180deg);

                } 60%{ margin-left:100px; border-radius:155px; -webkit-border-radius:155px; background:#FFA500; transform: scale(1) rotate(240deg); -webkit-transform:scale(1) rotate(240deg);

                } 80%{ margin-left:150px; border-radius:180px; -webkit-border-radius:180px; background:#FFA500; transform: scale(1.25) rotate(300deg); -webkit-transform:scale(1.25) rotate(300deg);

                } 100%{ margin-left:200px; border-radius:200px; -webkit-border-radius:200px; background:#AAAAAA; transform: scale(1.5) rotate(360deg); -webkit-transform:scale(1.5) rotate(360deg);

                } } /* animation-name:animate; animation-duration:秒数或infinite; animation-timing-function:ease,ease-in,ease-in-out,ease-out,linear,step-start(这些是状态); animation-delay:延长时间; animation-iteration-count:播放次数或infinite; animation-fill-mode: backwards或forwards或none; */

            /* @keyframes name{ 0%{ 里面可以写css样式,或tranform的效果 tranform-orgin:这个是方向:top bottom left right } 50%{} 100%{} } */ .animated{ width:200px;height:200px;background:#AAAAAA; animation-name:animated; animation-duration:0.2s; animation-timing-function:ease; animation-iteration-count: infinite; -webkit-animation-name:animated; -webkit-animation-duration:0.2s; -webkit-animation-timing-function:ease; -webkit-animation-iteration-count: infinite;

            } @keyframes animated{ 0%{ transform: rotate(180deg); border-radius:200px; -webkit-border-radius:200px;

                } 100%{ transform: rotate(360deg);

                } } </style>

    </head>



    <body>

        <div class="animate"></div>

        <div class="animated"></div>

    </body>



</html>

View Code

 

以下是去取原生样式的方法: -webkit-appearance:none;appearance:none;然后通过一些技巧来达到想要的效果.

八,单选多选去掉原生方法:

很多时候我们会用JS,JQ来做的覆盖,但是能用CSS就别用JS了.现在一般情况下,很多系统都支持.

<!DOCTYPE html>

<html>

    <head>

        <title>首页</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <meta http-equiv="Pragma" name="no-store" />

        <meta http-equiv="Cache-Control" name="no-store" />

        <meta http-equiv="window-target" content="_top" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta content="telephone=no" name="format-detection" />

        <meta name="renderer" content="webkit">

        <meta name="screen-orientation" content="portrait">

        <meta name="full-screen" content="yes">

        <meta name="x5-orientation" content="portrait">

        <meta name="x5-fullscreen" content="true">

        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" href="css/template.css" />

        <style> .radio,.checkbox{ width:10px; height: 10px; margin-bottom:-3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 10px;-webkit-border-radius:10px; border:2px solid#000000; outline: none;

   } input[type="radio"]:checked{background:#FF69B4;} input[type="checkbox"]:checked{background:#000000;}



        </style>

    </head>



    <body>

       <form class="">

   <label>

   <input class="radio" type="radio" name="radio" checked="checked"/><span>单选1</span>

   </label>

   <label>

   <input class="radio" type="radio" name="radio"/><span>单选2</span>

   </label>

   <label>

   <input class="radio" type="radio" name="radio1" checked/><span>单选1</span>

   </label>

   <label>

   <input class="radio" type="radio" name="radio1"/><span>单选2</span>

   </label>

   <label>

   <input class="checkbox" type="checkbox" /><span>复选1</span>

   </label>

   <label>

   <input class="checkbox" type="checkbox" /><span>复选1</span>

   </label>

  </form>

    </body>



</html>

View Code

 

九,select下拉框改变右边下拉按钮去掉原生方法:

<!DOCTYPE html>

<html>

    <head>

        <title>首页</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <meta http-equiv="Pragma" name="no-store" />

        <meta http-equiv="Cache-Control" name="no-store" />

        <meta http-equiv="window-target" content="_top" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="HandheldFriendly" content="true" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes" />

        <meta content="telephone=no" name="format-detection" />

        <meta name="renderer" content="webkit">

        <meta name="screen-orientation" content="portrait">

        <meta name="full-screen" content="yes">

        <meta name="x5-orientation" content="portrait">

        <meta name="x5-fullscreen" content="true">

        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" href="css/template.css" />

        <style> select { width:100%; height: 50px; font-size: 18px; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; color: #333333; border-radius: 0px; border:0; -webkit-border-radius:0px; background: url(img/drop.png)no-repeat right center; background-size: contain;

   } .selectContent{margin-top:20px;height:52px;border:1px solid#000000;}

        </style>

    </head>



    <body>

      <div class="box selectContent">

   <select>

    <option value="选择1">改变原生select样式</option>

    <option value="选择2">选择2</option>

    <option value="选择3">选择3</option>

    <option value="选择4">选择4</option>

   </select>

  </div>

    </body>



</html>

View Code

 

十,文件上传,改变原生方法:

文件上传我是第一次使用,发现原生样式是显示:文件上传这个按钮的,但我们的设计师当然不会让你这样来做页面啦.

<!DOCTYPE html>

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <meta http-equiv="Cache-Control" name="no-store" />

  <!--浏览器缓存-->

  <meta http-equiv="window-target" content="_top" />

  <!--防止别人在框架里调用自己的页面-->

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta name="HandheldFriendly" content="true" />

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <meta name="apple-mobile-web-app-capable" content="yes" />

  <meta content="black" name="apple-mobile-web-app-status-bar-style" />

  <meta content="telephone=no" name="format-detection" />

  <meta content="email=no" name="format-detection" />

  <style type="text/css"> .fileInputCon{width:256px;height:256px; background:url(img/avatar1.jpg) no-repeat;position:relative;} .fileInput{height:256px;overflow: hidden;font-size: 300px;position: absolute;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}

  </style>

 </head>

 <body>

  <div class="fileInputCon">

   <input class="fileInput" type="file" name="" id="" />

  </div>

 </body>

</html>

View Code

 

十一,input框在手机里点击后,被输入法挡住的解决方法:

 这里是一个input的焦点事件方法:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <title>首页</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="window-target" content="_top" />  <!--防止别人在框架里调用自己的页面-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!--在QQ浏览器,UC浏览器进行强制竖屏，这样就不用担心横屏兼容问题-->

    <meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->

    <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <meta content="email=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />



</head>

<body>

<!--第一种方法:-->

<p id="input"> 请输入英文字符：<input type="text" onfocus="focusFun(this);" onblur="blurFun(this);"/>

</p>

<script>

function focusFun(input){ var parent = input.parentNode; parent.style.backgroundColor="red"; } function blurFun(input){ var parent = input.parentNode; parent.style.backgroundColor="green"; } </script>



<!--第二种方法:-->

<div id='input'>

    <input type='text' onfocus='focusFun(this)'>

</div>

<script>

    var lock = true; function focusFun(elem){ if(lock){ lock = false; document.getElementById('input').style.margin= '10px'; elem.onblur = function(){ document.getElementById('input').style.margin= '0'; lock = true; } } } </script>

    </body>

</html>

View Code

那么如何解决被输入法挡住的问题呢？

你看到我上面追加的样式了吧,是追加到父元素的,用wrapper作为父元素,

然后当input遇到点击时就追加wrapper{padding-bottom:100px},

因为可以通过点击追加让页面升上去的可能性,本来这个解决方法是由专业的原生开发来解决的，我们只能通过技巧来解决.

大概就是这么解释吧.

纯canvas来画出斑的万花筒写轮眼

主要注意的问题：

1，先进行定位，用三角形的角点来定写轮眼的坐标，

2，用二次贝塞尔曲线来画出曲线和弧度。

3，要注意覆盖方面的问题：颜色覆盖，图形覆盖这些问题！

代码如下:(浏览器：火狐，360，谷歌都没问题!)

<!DOCTYPE HTML>



<html>



<body >



<canvas id="myCanvas" style="border:1px solid;" width="400" height="400" ></canvas>



<script type="text/javascript">



var c=document.getElementById("myCanvas"); var context=c.getContext("2d"); //大圆黑色

 context.fillStyle="#000000"; context.globalCompositeOperation="source-over"; context.beginPath(); context.arc(173,195,170,0,Math.PI*2,true); context.closePath(); context.fill(); //小圆白色

 context.fillStyle="#FFFFFF"; context.globalCompositeOperation="source-over"; context.beginPath(); context.arc(173,195,160,0,Math.PI*2,true); context.closePath(); context.fill(); //中心大圆



/*context.fillStyle="#00CC66"; context.globalCompositeOperation="source-over"; context.beginPath(); context.arc(173,195,120,0,Math.PI*2,true); context.closePath(); context.fill();*/



//上中圆黑色

 context.fillStyle="#000000"; context.beginPath(); context.arc(175,90,37,0,Math.PI*2,true); context.closePath(); context.fill(); //左圆黑色

 context.fillStyle="#000000"; context.beginPath(); context.arc(75,240,37,0,Math.PI*2,true); context.closePath(); context.fill(); //右圆黑色

 context.fillStyle="#000000"; context.beginPath(); context.arc(270,240,37,0,Math.PI*2,true); context.closePath(); context.fill(); //右边外曲线

 context.fillStyle="#000000"; context.beginPath(); context.moveTo(280,206);//右外起点

 context.quadraticCurveTo(252,38,161,55);//右上终点

 context.lineWidth=2; context.fill(); //右边内曲线

 context.fillStyle="#FFFFFF"; context.beginPath(); context.moveTo(195,120);//右内终点

 context.quadraticCurveTo(235,78,280,206);//右内起点

 context.lineWidth=2; context.fill(); //左边外曲线

 context.fillStyle="#000000"; context.beginPath(); context.moveTo(138,95);//起点

 context.quadraticCurveTo(0,183,46,264);//终点

 context.lineWidth=2; context.fill(); //左边内曲线

 context.fillStyle="#FFFFFF"; context.beginPath(); context.moveTo(138,95);//起点

 context.quadraticCurveTo(39,196,87,205);//终点

 context.lineWidth=2; context.fill(); //底边外曲线

 context.fillStyle="#000000"; context.beginPath(); context.moveTo(96,270);//起点

 context.quadraticCurveTo(290,328,305,246);//终点

 context.lineWidth=2; context.fill(); //底边内曲线

 context.fillStyle="#FFFFFF"; context.beginPath(); context.moveTo(96,270);//起点

 context.quadraticCurveTo(250,290,234,247);//终点

 context.lineWidth=2; context.fill(); //上小圆

 context.fillStyle="#FFFFFF"; context.beginPath(); context.arc(270,240,10,0,Math.PI*2,true); context.closePath(); context.fill(); //左小圆

 context.fillStyle="#FFFFFF"; context.beginPath(); context.arc(175,90,10,0,Math.PI*2,true); context.closePath(); context.fill(); //右小圆

 context.fillStyle="#FFFFFF"; context.beginPath(); context.arc(75,240,10,0,Math.PI*2,true); context.closePath(); context.fill(); //中心圆

 context.fillStyle="#000000"; context.globalCompositeOperation="source-over"; context.beginPath(); context.arc(173,195,50,0,Math.PI*2,true); context.closePath(); context.fill(); //三角形



/* context.strokeStyle="#ff00ff"; context.beginPath(); context.moveTo(175,90); context.lineTo(75,240); context.moveTo(175,90); context.lineTo(270,240); context.moveTo(75,240); context.lineTo(270,240); context.stroke();*/



</script>



</body>



</html>

View Code

 

其他小问题:

大概讲解下文字居中问题,我们平时做居中很简单，但如果遇到文字数量2行或多行不一样的时候,我们就需要额外加个设置了.

我们除了需要将div设置margin-left和margin-right为auto之外，我们还需要给这个div一个宽度,然后子元素设置左对齐，

如果是自适应页面，那么这个div的宽度就得通过断点来发生改变.

　　　　　　<div class="" style="width:75%;margin:0 auto">

                <!--多行文本居中要注意宽度,@media来限制不同屏幕的宽度,这里是iphone5-->

                <ul style="text-align:left;">

                    <li>fghjkl</li>

                    <li>sdsdfghjklsdfghjklsdfghjklfghjkl</li>

                </ul>

      　　 </div>

1，垂直居中,可以给高度和行高来调整.

2，小图标或图片如何跟 左边或右边 的文字对齐:

可以看看我的CSS样式表，有3个类名:vam,vab,vat总有一个合适你;

再或者就是将图标设置一个margin-bottom为负值调整就可以达到效果了。

 

以上div+css的学习总结只要有足够的练习和项目操作，就一定可以熟练.

可能是我之前太好运了吧,遇到的公司都是30%项目任务时间,70%学习时间.(但工资特别低).

近期我也挺开心的,可以克服困难把dom学会了,然后就花时间来进行熟练DOM,AJAX,JSON这些.