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">

 

/*視區寬度不大於像素時候，圖片實際尺寸像素*/360340

若是是用背景圖的方法就這樣:

/* retina image */ @media only screen { img{ background-image:url(images/w-day@480.png);} } @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/w-day@720.png);} }

 

最後能夠參考下:

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";*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:0;-webkit-tap-highlight-color:transparent}a:focus,select:focus{-webkit-tap-highlight-color:transparent,-webkit-user-modify:read-write-plaintext-only}a,body,img{-webkit-touch-callout:none}body,html{height:100%}html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{-webkit-user-select:none;-webkit-overflow-scrolling:touch}article,aside,audio,blockquote,body,button,canvas,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,li,nav,ol,p,progress,section,td,textarea,th,ul,video{margin:0;padding:0;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline}button,select{text-transform:none}h1,h2,h3{font-weight:500}strong{font-weight:700}a:focus{outline:thin dotted}a:focus{-webkit-user-modify:read-write-plaintext-only}a,a:active,a:hover{text-decoration:none}a{outline:0;background:0 0}fieldset,img{border:0}img,video{max-width:100%}em,i{font-style:normal}table{border-collapse:collapse;border-spacing:0}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}del{text-decoration:line-through}hr{height:0;-webkit-box-sizing:content-box;box-sizing:content-box}ol,ul{list-style:none}.hide{display:none}.block,.show{display:block}.fl,.fr{display:inline}.fl{float:left}.fr{float:right}.tac{text-align:center}.tal,caption,th{text-align:left}.tar{text-align:right}.inline{display:inline-block}.vab{vertical-align:bottom}.vas{vertical-align:sub}.vam{vertical-align:middle}.vat{vertical-align:top}.grid,.grid:after,.grid:before,.wrap,.wrap:after,.wrap:before{-webkit-box-sizing:border-box;box-sizing:border-box}.grid:after,.grid:before{display:table;content:"";line-height:0}.grid:after{clear:both}.grid{margin:0;padding:0;list-style-type:none}.grid>.grid{float:left;clear:none;margin:0!important} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-.5em} sub{bottom:-.25em} svg:not(:root){overflow:hidden} a{text-decoration:none;color:#000} a:active{color:#000} ul li{display:block} ol li{display:inline-block} input[type="button"], input[type="reset"], input[type="submit"], a:focus,a:active,a:hover, input:focus, textarea:focus{outline:none} textarea{overflow:auto;vertical-align:top} a:active,a:focus,a:hover, input:focus,input[type=button],input[type=reset],input[type=submit],textarea:focus{outline:none} input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button} input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none} input,input[type=checkbox],input[type=radio]{margin:0;padding:0;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline} input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield} input:focus,textarea:focus{-webkit-tap-highlight-color:transparent,-webkit-user-modify:read-write-plaintext-only} input::-ms-clear{display:none} textarea{resize:none} textarea{overflow:auto;vertical-align:top} input[type=text],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=checkbox],input[type=radio],select,textarea{-webkit-user-select:text;-webkit-appearance:none}

/*ios上使用transform的時候的閃屏問題能夠嘗試使用*/ .iosTransform{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden} input::-webkit-input-speech-button{display:none}/*Andriod 上去掉語音輸入按鈕*/
/*針對number作的去取原生*/ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}

/*input和textarea的placeholder字體顏色和大小的設置,還有點擊焦點時的樣式*/ input::-webkit-input-placeholder{color:#FFA500} textarea::-webkit-input-placeholder{color:#FFA500} input:focus,textarea:focus{border:1px solid #f60}
/*1rem=10px*/
/*字體自適應*/
/*好比說你在320px分辨率時,設置字體大小爲1.2rem時,如今在不一樣寬度均可以看上去同樣大小實現自適應.*/
/*設計師是以iphone5爲設計標準時,16px=100%,每一個斷點以1.2px遞增頁面最小的字體大小(6.25%=1px)*/ body{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;background:#1a2448;color:#000}
/*字體自適應:以1.2rem爲最小字體大小*/ h1{font-size:2.125rem} h2{font-size:1.875rem} h3{font-size:1.75rem} h4{font-size:1.625rem} h5{font-size:1.5rem} h6{font-size:1.375rem} article,button,input,p,select,span,textarea,h1,h2,h3,h4,h5,h6{line-height:20px}
/*分狀況來作,不是全部頁面都須要字體隨着屏幕大小改變而改變的.*/
/*三星大屏幕機最低寬度:note2-note3,S2-S4*/ @media only screen and (min-width:360px) and (max-width:384px){ html{font-size:64% !important} } /*Iphone6,Iphone6plus*/ @media only screen and (min-width:385px) and (max-width:435px) { html{font-size:80% !important} article,button,input,p,select,span,textarea,h1,h2,h3,h4,h5,h6{line-height:22px} } /*部分機型存在type爲search的input，自帶close按鈕樣式修改方法*/ #search::-webkit-search-cancel-button{display:none} #fixed{position:fixed;width:100%;left:0;top:0;z-index:9994;height:80px;transform:translateZ(0);-webkit-transform:translateZ(0)}/*bug修復*/
/*單行文本控制換行*/ .outL{white-space:normal;word-break:break-all;width:100px}
/*單行文本控制溢出(顯示....):注意設置寬度*/ .outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:50%}
/*多行文本溢出顯示省略號(...)的方法------webkit-line-clamp:2;這裏的數字表明多少行*/ .ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/*容器*/ .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} .header{top:0;height:44px} .footer{bottom:0}

/*寬度*/ .wrap{float:left;width:100%} .w100p{width:100%} .w20p{width:20%}

/*邊距*/ .m5{margin:5px} .p5{padding:5px} .flex{display:-webkit-flex;display:flex;display:-webkit-box;-webkit-flex:1;flex:1;-webkit-box-flex:1}
/*垂直方向*/ .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} .box{height:100%;text-align:center}

View Code

 

/*若是趕上input沒法輸入內容時,多是由於下面的緣由:*/ input[type=text],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=checkbox],input[type=radio],select,textarea{-webkit-user-select:text;-webkit-appearance:none}

 

下面這個是用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這些.