├── src ├── sass │ ├── _variables.scss │ └── styles.scss ├── img │ ├── favicon.png │ └── carregando.gif ├── css │ ├── styles.css.map │ ├── styles.css │ └── animate.css ├── classificadores.html ├── index.html ├── js │ ├── classificadores.js │ ├── main.js │ └── naive_bayes.js └── server.py ├── tela.png ├── requirements.txt └── README.md /src/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | $base_color: #0091ea; 2 | $main_width: 800px; -------------------------------------------------------------------------------- /tela.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafjaa/Social-Insights/master/tela.png -------------------------------------------------------------------------------- /src/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafjaa/Social-Insights/master/src/img/favicon.png -------------------------------------------------------------------------------- /src/img/carregando.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafjaa/Social-Insights/master/src/img/carregando.gif -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | # Python 2 | 3 | flask 4 | requests[security] 5 | python-twitter 6 | pymongo 7 | 8 | # DB 9 | mongodb 10 | -------------------------------------------------------------------------------- /src/css/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,CAAC;EACA,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,cAAc,EAAE,kBAAkB;EAClC,sBAAsB,EAAE,WAAW;EACnC,kBAAkB,EAAE,UAAU;EAC9B,UAAU,EAAE,UAAU", 4 | "sources": ["../sass/styles.scss"], 5 | "names": [], 6 | "file": "styles.css" 7 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Social Insights 2 | 3 | _Análise de sentimentos para o Twitter adaptável a diferentes domínios de problema_ 4 | 5 |

6 | Captura de tela 7 |

8 | 9 | Trabalho prático final para o curso de __Técnicas e Tecnologias para o Desenvolvimento Front-End__ ministrado no Projeto Laboratório de Redes de Conhecimento do Instituto Federal do Sudeste de Minas Gerais, Câmpus Barbacena. 10 | 11 | __Proposta__: oferecer um sistema de classificação automática de _tweets_ em tempo real por meio de algoritmo de classificação bayesiano para auxílio na análise de tendências e em processos de tomada de decisão, que seja flexível e adaptável a diferentes domínios de problema. 12 | 13 | __Diferencial__: enquanto alguns sistemas similares na web realizam apenas a análise de sentimentos dos _tweets_ coletados (em sua maioria para o idoma inglês), este web app possibilita ao usuário criar e treinar seus próprios classificadores, de modo que a análise automática seja baseada nas regras e categorias definidas pelo usuário. 14 | 15 | __Tecnologias envolvidas__ 16 | - Twitter API 17 | - HTML5 18 | - CSS3 19 | - SASS 20 | - LocalStorage 21 | - MongoDB 22 | - Python Flask 23 | -------------------------------------------------------------------------------- /src/classificadores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Social Insights 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 |
26 |

Novo classificador

27 | 28 |

Nome do classificador

29 | 30 | 31 |

Categorias (uma por linha)

32 | 33 | 34 |

35 | 36 |

Meus classificadores

37 |
38 |
39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Social Insights 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 |

Análise

40 | 41 |

Distribuição dos tweets analisados automaticamente

42 |
43 | 44 |
45 |

Impacto

46 | 47 |

Quantidade de retweets e número de seguidores por categoria

48 |
49 | 50 |
51 | 52 |
53 |
54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/js/classificadores.js: -------------------------------------------------------------------------------- 1 | // AJAX com cache transparente (opcional) via localStorage 2 | function ajax(url, cache, callback){ 3 | // Checa se já possui consulta em cache 4 | if(localStorage[url] && cache){ 5 | callback(JSON.parse(localStorage[url])); 6 | return; 7 | } 8 | 9 | var xmlHttp = new XMLHttpRequest(); 10 | xmlHttp.onreadystatechange = function(){ 11 | if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 12 | if(cache){ 13 | localStorage[url] = xmlHttp.responseText; 14 | } 15 | callback(JSON.parse(xmlHttp.responseText)); 16 | } 17 | } 18 | xmlHttp.open('GET', url, true); 19 | xmlHttp.send(null); 20 | }; 21 | 22 | function remover(nome){ 23 | ajax('/api/mongodb/classifier/remove?nome=' + nome, false, function(resp_remover){ 24 | document.location.href = '/classificadores.html'; 25 | }); 26 | } 27 | 28 | document.querySelector('#brand').onclick = function(){ 29 | document.location.href = '/'; 30 | } 31 | 32 | /*** Variáveis ***/ 33 | var dados_classificadores = document.querySelector('#dados_classificadores'); 34 | var input_nome = document.querySelector('#input_nome'); 35 | var txt_categorias = document.querySelector('#txt_categorias'); 36 | var btn_adicionar = document.querySelector('#btn_adicionar'); 37 | 38 | // Obtém as informações sobre os classificadores 39 | ajax('/api/mongodb/classifiers/info', false, function(resp_classif){ 40 | 41 | for(var c in resp_classif.info){ 42 | var classif = resp_classif.info[c]; 43 | var html = '
'; 44 | 45 | if(classif.nome != 'sentimentos'){ 46 | html += 'delete'; 47 | } 48 | 49 | html += '

' + classif.nome.toUpperCase() + '

'; 50 | html += '

' + classif.tamanho + ' bytes

'; 51 | html += '

Categorias: ' + classif.categorias + '

'; 52 | html += '
'; 53 | 54 | dados_classificadores.innerHTML += html; 55 | } 56 | 57 | 58 | // Evento de clique o botão para adicionar categoria 59 | btn_adicionar.onclick = function(){ 60 | var nome_classificador = input_nome.value; 61 | var categorias = txt_categorias.value.split('\n'); 62 | 63 | // valida os campos 64 | if(!/\S/.test(nome_classificador) || !/\S/.test(categorias) || categorias.length == 1){ 65 | return; 66 | } 67 | 68 | // Instancia o novo classificador 69 | var classifier = bayes.exports(); 70 | for(var c in categorias){ 71 | classifier.learn('', categorias[c]); 72 | } 73 | 74 | ajax('/api/mongodb/classifier/new?nome=' + nome_classificador + '&dados=' + classifier.toJson(), false, function(resp_add){ 75 | document.location.href = '/classificadores.html'; 76 | }); 77 | 78 | }; 79 | 80 | }); -------------------------------------------------------------------------------- /src/css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | text-rendering: optimizeLegibility; 5 | -webkit-font-smoothing: antialiased; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | font-family: Roboto; } 9 | 10 | nav:before, nav:after { 11 | display: table; 12 | content: " "; 13 | clear: both; } 14 | 15 | #nav { 16 | text-align: center; 17 | background-color: #0091ea; 18 | padding: 25px; 19 | font-size: 20px; 20 | color: #fff; 21 | box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5); 22 | margin-bottom: 10px; } 23 | #nav div { 24 | width: 800px; 25 | margin: 0 auto; } 26 | #nav div p#brand { 27 | float: left; 28 | cursor: pointer; } 29 | #nav div #classificadores { 30 | float: right; 31 | font-size: 14px; 32 | cursor: pointer; } 33 | #nav div #classificadores span { 34 | display: inline-block; } 35 | #nav p#brand { 36 | cursor: pointer; } 37 | 38 | main:before, main:after { 39 | display: table; 40 | content: " "; 41 | clear: both; } 42 | 43 | main { 44 | width: 800px; 45 | margin: 0 auto; } 46 | main #busca { 47 | width: 560px; 48 | padding: 10px; 49 | color: #333; } 50 | main #select_classif { 51 | padding: 10px; 52 | width: 150px; } 53 | main #btn_buscar { 54 | padding: 10px; 55 | width: 80px; 56 | cursor: pointer; } 57 | main #resultados:before, main #resultados:after { 58 | display: table; 59 | content: " "; 60 | clear: both; } 61 | main section#resultados { 62 | margin: 15px 0; } 63 | main section#resultados #tweet { 64 | margin: 10px 0; 65 | padding: 15px; 66 | border: solid 1px #ddd; 67 | border-radius: 2px; 68 | font-size: 13px; 69 | padding-bottom: 38px; } 70 | main section#resultados #tweet p { 71 | margin-top: 10px; } 72 | main section#resultados #tweet select { 73 | margin-top: 0; 74 | float: right; 75 | padding: 3px; } 76 | main canvas { 77 | width: 360px; 78 | height: 250px; } 79 | main #graficos { 80 | margin: 25px 0; 81 | display: none; } 82 | main #graficos div { 83 | box-shadow: 0px 1px 15px #ddd; 84 | border-radius: 2px; 85 | padding: 15px; } 86 | main #graficos .titulo { 87 | font-size: 20px; 88 | margin-bottom: 15px; } 89 | main #graficos .descricao { 90 | font-size: 13px; 91 | text-align: center; 92 | margin-top: 15px; 93 | width: 360px; 94 | color: #222; } 95 | main #graficos #analise { 96 | float: left; } 97 | main #graficos #impacto { 98 | float: right; } 99 | main#m_classificadores p { 100 | font-size: 13px; 101 | margin-top: 15px; } 102 | main#m_classificadores i { 103 | color: #333; 104 | cursor: pointer; 105 | float: right; } 106 | main#m_classificadores .titulo_c { 107 | font-size: 20px; } 108 | main#m_classificadores textarea, main#m_classificadores input { 109 | display: block; 110 | width: 800px; 111 | margin: 5px 0 15px; 112 | padding: 15px; 113 | font-size: 14px; } 114 | main#m_classificadores button { 115 | padding: 10px 15px; 116 | cursor: pointer; } 117 | main#m_classificadores .b { 118 | text-align: right; } 119 | main#m_classificadores #dados_classificadores { 120 | margin: 15px 0; } 121 | main#m_classificadores #dados_classificadores div { 122 | margin: 15px 0; 123 | border: solid 1px #ddd; 124 | border-radius: 2px; 125 | padding: 15px; } 126 | main#m_classificadores #dados_classificadores div p { 127 | margin: 0; } 128 | main#m_classificadores #dados_classificadores div .sent { 129 | font-size: 14px; 130 | margin-bottom: 5px; } 131 | main#m_classificadores #dados_classificadores div .tam { 132 | color: #222; 133 | margin-bottom: 10px; 134 | font-size: 11px; } 135 | main#m_classificadores #dados_classificadores div .cat { 136 | margin-bottom: 10px; } 137 | -------------------------------------------------------------------------------- /src/sass/styles.scss: -------------------------------------------------------------------------------- 1 | @import "_variables"; 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | text-rendering: optimizeLegibility; 7 | -webkit-font-smoothing: antialiased; 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | font-family: Roboto; 11 | } 12 | 13 | nav:before, nav:after{ 14 | display: table; 15 | content: " "; 16 | clear: both; 17 | } 18 | 19 | #nav{ 20 | text-align: center; 21 | background-color: $base_color; 22 | padding: 25px; 23 | font-size: 20px; 24 | color: #fff; 25 | box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5); 26 | margin-bottom: 10px; 27 | 28 | div{ 29 | width: $main_width; 30 | margin: 0 auto; 31 | 32 | p#brand{ 33 | float: left; 34 | cursor: pointer; 35 | } 36 | 37 | #classificadores{ 38 | float: right; 39 | font-size: 14px; 40 | cursor: pointer; 41 | 42 | span{ 43 | display: inline-block; 44 | } 45 | } 46 | } 47 | 48 | p#brand{ 49 | cursor: pointer; 50 | } 51 | } 52 | 53 | main:before, main:after{ 54 | display: table; 55 | content: " "; 56 | clear: both; 57 | } 58 | 59 | main{ 60 | width: $main_width; 61 | margin: 0 auto; 62 | 63 | #busca{ 64 | width: $main_width - 240px; 65 | padding: 10px; 66 | color: #333; 67 | } 68 | 69 | #select_classif{ 70 | padding: 10px; 71 | width: 150px; 72 | } 73 | 74 | #btn_buscar{ 75 | padding: 10px; 76 | width: 80px; 77 | cursor: pointer; 78 | } 79 | 80 | #resultados:before, #resultados:after{ 81 | display: table; 82 | content: " "; 83 | clear: both; 84 | } 85 | 86 | section#resultados{ 87 | margin: 15px 0; 88 | 89 | #tweet{ 90 | margin: 10px 0; 91 | padding: 15px; 92 | border: solid 1px #ddd; 93 | border-radius: 2px; 94 | font-size: 13px; 95 | padding-bottom: 38px; 96 | 97 | p{ 98 | margin-top: 10px; 99 | } 100 | 101 | strong{ 102 | 103 | } 104 | 105 | select{ 106 | margin-top: 0; 107 | float: right; 108 | padding: 3px; 109 | } 110 | } 111 | } 112 | 113 | canvas{ 114 | width: 360px; 115 | height: 250px; 116 | } 117 | 118 | #graficos{ 119 | margin: 25px 0; 120 | display: none; 121 | 122 | div{ 123 | box-shadow: 0px 1px 15px #ddd; 124 | border-radius: 2px; 125 | padding: 15px; 126 | } 127 | 128 | .titulo{ 129 | font-size: 20px; 130 | margin-bottom: 15px; 131 | } 132 | 133 | .descricao{ 134 | font-size: 13px; 135 | text-align: center; 136 | margin-top: 15px; 137 | width: 360px; 138 | color: #222; 139 | } 140 | 141 | #analise{ 142 | float: left; 143 | } 144 | 145 | #impacto{ 146 | float: right; 147 | } 148 | } 149 | 150 | &#m_classificadores{ 151 | p{ 152 | font-size: 13px; 153 | margin-top: 15px; 154 | } 155 | 156 | i{ 157 | color: #333; 158 | cursor: pointer; 159 | float: right; 160 | } 161 | 162 | .titulo_c{ 163 | font-size: 20px; 164 | } 165 | 166 | textarea, input{ 167 | display: block; 168 | width: 800px; 169 | margin: 5px 0 15px; 170 | padding: 15px; 171 | font-size: 14px; 172 | } 173 | 174 | button{ 175 | padding: 10px 15px; 176 | cursor: pointer; 177 | } 178 | 179 | .b{ 180 | text-align: right; 181 | } 182 | 183 | #dados_classificadores{ 184 | margin: 15px 0; 185 | 186 | div{ 187 | margin: 15px 0; 188 | border: solid 1px #ddd; 189 | border-radius: 2px; 190 | padding: 15px; 191 | 192 | p{ 193 | margin: 0; 194 | } 195 | 196 | .sent{ 197 | font-size: 14px; 198 | margin-bottom: 5px; 199 | } 200 | 201 | .tam{ 202 | color: #222; 203 | margin-bottom: 10px; 204 | font-size: 11px; 205 | } 206 | 207 | .cat{ 208 | margin-bottom: 10px; 209 | } 210 | } 211 | } 212 | } 213 | } -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | /*** Variáveis ***/ 2 | var input_busca = document.querySelector('#busca'); 3 | var select_classif = document.querySelector('#select_classif'); 4 | var btn_buscar = document.querySelector('#btn_buscar'); 5 | var p_brand = document.querySelector('#brand'); 6 | var span_classif = document.querySelector('#classificadores'); 7 | var section_resultados = document.querySelector('#resultados'); 8 | var section_graficos = document.querySelector('#graficos'); 9 | var ctx_analise = document.getElementById('chart_analise').getContext("2d"); 10 | var ctx_impacto = document.getElementById('chart_impacto').getContext("2d"); 11 | var grafico_analise = null; 12 | var grafico_impacto = null; 13 | var atualiza_treinamento = null; 14 | var CORES = ['#f78f38', '#ef3b2d', '#5e2c8d', '#bab732', '#f13d2f', '#32728b', '#016aae', '#019f91', '#f78f38', '#ef3b2d', '#5e2c8d', '#bab732', '#f13d2f', '#32728b']; 15 | 16 | /*** Funções ***/ 17 | 18 | // AJAX com cache transparente (opcional) via localStorage 19 | function ajax(url, cache, callback){ 20 | // Checa se já possui consulta em cache 21 | if(localStorage[url] && cache){ 22 | callback(JSON.parse(localStorage[url])); 23 | return; 24 | } 25 | 26 | var xmlHttp = new XMLHttpRequest(); 27 | xmlHttp.onreadystatechange = function(){ 28 | if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 29 | if(cache){ 30 | localStorage[url] = xmlHttp.responseText; 31 | } 32 | callback(JSON.parse(xmlHttp.responseText)); 33 | } 34 | } 35 | xmlHttp.open('GET', url, true); 36 | xmlHttp.send(null); 37 | }; 38 | 39 | span_classif.onclick = function(){ 40 | document.location.href = '/classificadores.html'; 41 | } 42 | 43 | p_brand.onclick = function(){ 44 | document.location.href = '/'; 45 | } 46 | 47 | /*** Recupera os classificadores persistidos no banco ***/ 48 | ajax('/api/mongodb/classifiers', false, function(resp_classif){ 49 | 50 | // Reconstrói os classificadores 51 | var classificadores = {}; 52 | 53 | for(var c in resp_classif){ 54 | classificadores[c] = bayes.exports.fromJson(resp_classif[c]); 55 | 56 | // Preenche a tag 'select' do formulário 57 | select_classif.options.add(new Option(c.toUpperCase(), c)); 58 | } 59 | 60 | // Clique em buscar 61 | btn_buscar.onclick = function(){ 62 | var termo = input_busca.value; 63 | 64 | // Verifica se a busca está vazia ou só com espaços em branco 65 | if(!/\S/.test(termo)){ 66 | return; 67 | } 68 | 69 | var id_classif = select_classif.value; 70 | 71 | // Carregando 72 | section_resultados.innerHTML = '

'; 73 | 74 | // Consome a API do Twitter 75 | ajax('/api/twitter/search?q=' + termo, true, function(resp_json){ 76 | var tweets = resp_json.tweets; 77 | var cont_categorias = {}; 78 | // Inicializa as categorias 79 | for(var c in classificadores[id_classif].categories){ 80 | cont_categorias[c] = {'cont': 0, 'retweets': 0, 'followers': 0}; 81 | } 82 | 83 | var html = ''; 84 | for(var i in tweets){ 85 | var tweet = tweets[i]; 86 | var classificacao = classificadores[id_classif].categorize(tweet.text); 87 | 88 | cont_categorias[classificacao].cont += 1; 89 | cont_categorias[classificacao].retweets += (tweet.retweet_count ? tweet.retweet_count : 0); 90 | cont_categorias[classificacao].followers += (tweet.user.followers_count ? tweet.user.followers_count : 0); 91 | 92 | html += '
' + tweet.user.name + ': ' + tweet.text; 93 | html += '

' + (tweet.retweet_count ? tweet.retweet_count : 0) + ' retweets, ' + (tweet.user.followers_count ? tweet.user.followers_count : 0) + ' usuários impactados

'; 94 | html += '
'; 104 | } 105 | section_resultados.innerHTML = html; 106 | 107 | /*** Gráficos ***/ 108 | var dados_pizza = []; 109 | var cont_cores = 0; 110 | for(var cat in cont_categorias){ 111 | dados_pizza.push({ 112 | value: cont_categorias[cat].cont, 113 | label: cat.toUpperCase(), 114 | color: CORES[cont_cores] 115 | }); 116 | cont_cores += 1; 117 | } 118 | 119 | var dados_barra = {labels: [], datasets: [ 120 | { 121 | label: "Retweets", 122 | fillColor: '#016aae', 123 | data: [] 124 | }, 125 | { 126 | label: "Seguidores", 127 | fillColor: '#019f91', 128 | data: [] 129 | } 130 | ]}; 131 | 132 | for(var cat in cont_categorias){ 133 | dados_barra['labels'].push(cat.toUpperCase()); 134 | dados_barra['datasets'][0].data.push(cont_categorias[cat].retweets); 135 | dados_barra['datasets'][1].data.push(cont_categorias[cat].followers); 136 | } 137 | 138 | if(grafico_analise){ 139 | grafico_analise.destroy(); 140 | } 141 | if(grafico_impacto){ 142 | grafico_impacto.destroy(); 143 | } 144 | 145 | section_graficos.style.display = 'block'; 146 | 147 | grafico_analise = new Chart(ctx_analise).Doughnut(dados_pizza); 148 | grafico_impacto = new Chart(ctx_impacto).Bar(dados_barra); 149 | }); 150 | }; // Clique em buscar 151 | 152 | // Pressionar enter na busca 153 | input_busca.onkeyup = function(event){ 154 | if(event.keyCode == 13){ 155 | btn_buscar.onclick(); 156 | } 157 | }; 158 | 159 | select_classif.onchange = function(){ 160 | btn_buscar.onclick(); 161 | } 162 | 163 | // Alteração treinamento 164 | atualiza_treinamento = function(select){ 165 | var id_classif = select_classif.value; 166 | var nova_categoria = select.value; 167 | var texto_tweet = select.dataset.text; 168 | 169 | classificadores[id_classif].learn(texto_tweet, nova_categoria); 170 | 171 | //Persiste o novo treinamento 172 | ajax('/api/mongodb/classifier/update?nome=' + id_classif + '&dados=' + classificadores[id_classif].toJson(), false, function(resp_update){ 173 | // Atualiza os resultados 174 | btn_buscar.onclick(); 175 | }); 176 | } 177 | 178 | }); // AJAX classificadores -------------------------------------------------------------------------------- /src/server.py: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | 3 | import json 4 | import twitter 5 | from pymongo import MongoClient 6 | from flask import Flask 7 | from flask import send_from_directory 8 | from flask import request 9 | from flask import jsonify 10 | 11 | # Força todo o servidor a trabalhar com UTF-8 12 | import sys 13 | reload(sys) 14 | sys.setdefaultencoding('utf-8') 15 | 16 | # Dados para autenticação OAuth na API Twitter v1.1 17 | CONSUMER_KEY = '' 18 | CONSUMER_SECRET = '' 19 | ACCESS_TOKEN_KEY = '' 20 | ACCESS_TOKEN_SECRET = '' 21 | 22 | # Autenticação na API 23 | api = twitter.Api( 24 | consumer_key=CONSUMER_KEY, 25 | consumer_secret=CONSUMER_SECRET, 26 | access_token_key=ACCESS_TOKEN_KEY, 27 | access_token_secret=ACCESS_TOKEN_SECRET 28 | ) 29 | 30 | # Classificador default 31 | DEFAULT_CLASSIFIER = '{"categories":{"Positivo":true,"Negativo":true},"docCount":{"Positivo":2,"Negativo":19},"totalDocuments":21,"vocabulary":{"2015":true,"bom":true,"legal":true,"interessante":true,"timo":true,"fant":true,"stico":true,"ruim":true,"feio":true,"horr":true,"vel":true,"terr":true,"p":true,"ssimo":true,"droga":true,"bosta":true,"De":true,"todos":true,"os":true,"aplicativos":true,"que":true,"voc":true,"usa":true,"nenhum":true,"melhor":true,"o":true,"aplicativo":true,"j":true,"est":true,"dentro":true,"de":true,"Seu":true,"cora":true,"whatsapp":true,"vai":true,"ser":true,"bloqueado":true,"no":true,"brasil":true,"todo":true,"ainda":true,"bem":true,"eu":true,"moro":true,"em":true,"carazinho":true,"Recebi":true,"comunicado":true,"do":true,"bloqueio":true,"WhatsApp":true,"Brasil":true,"senti":true,"as":true,"vistas":true,"escurecerem":true,"cai":true,"e":true,"agora":true,"estou":true,"aqui":true,"na":true,"enfermaria":true,"":true,"RT":true,"ivannmonteiro":true,"Mark":true,"Zuckerberg":true,"compre":true,"logo":true,"Vai":true,"resolver":true,"toda":true,"essa":true,"bagun":true,"a":true,"To":true,"mal":true,"vpn":true,"minha":true,"net":true,"fica":true,"tipo":true,"muito":true,"Lula":true,"culpa":true,"colonizadores":true,"por":true,"atrasos":true,"educa":true,"gera":true,"pol":true,"mica":true,"Portugal":true,"https":true,"t":true,"co":true,"qUvIvLdIEl":true,"Mas":true,"um":true,"mesmo":true,"Nossa":true,"vc":true,"bilingue":true,"Fala":true,"portugu":true,"s":true,"fala":true,"Depois":true,"dessa":true,"piada":true,"vou":true,"ali":true,"me":true,"esfaquear":true,"ja":true,"volto":true,"Minha":true,"galeria":true,"ta":true,"cheia":true,"foto":true,"CamillaAlencarr":true,"te":true,"fude":true,"tu":true,"lol":true,"quem":true,"joga":true,"kingofpopis":true,"faz":true,"meia":true,"hora":true,"q":true,"tentando":true,"cagar":true,"n":true,"sai":true,"da":true,"porra":true,"meu":true,"cu":true,"pfvr":true,"seja":true,"ano":true,"Meu":true,"cabelo":true,"entendendo":true,"rezenbela":true,"Acho":true,"engra":true,"ado":true,"agr":true,"aqueles":true,"ficavam":true,"falando":true,"mudando":true,"totalmente":true,"opini":true,"pra":true,"levar":true,"unf":true,"ou":true,"mute":true,"brogui":true,"foi":true,"chamar":true,"receita":true,"deixou":true,"ela":true,"tua":true,"pregui":true,"abs":true,"Carolgatte_":true,"EU":true,"ODEIO":true,"ESSA":true,"BOSTA":true,"rezenicornio":true,"fiquei":true,"mimimi":true,"nem":true,"pedindo":true,"desculpa":true,"ter":true,"falado":true,"rezende_evil":true,"Gente":true,"namoro":true,"com":true,"Helena":true,"deu":true,"ok":true,"Parem":true,"ficar":true,"merda":true,"mano":true,"Tentei":true,"at":true,"ir":true,"aguentando":true,"marialuuizaa_":true,"Kuetlem":true,"b":true,"bada":true},"vocabularySize":205,"wordCount":{"Positivo":13,"Negativo":321},"wordFrequencyCount":{"Positivo":{"bom":1,"legal":1,"interessante":1,"timo":1,"fant":1,"stico":1,"Minha":1,"galeria":1,"ta":1,"cheia":1,"de":1,"foto":1,"bosta":1},"Negativo":{"2015":1,"ruim":2,"feio":1,"horr":1,"vel":2,"terr":1,"p":1,"ssimo":1,"droga":1,"bosta":15,"De":1,"todos":1,"os":1,"aplicativos":1,"que":7,"voc":4,"usa":1,"nenhum":1,"melhor":1,"o":16,"aplicativo":1,"j":2,"est":2,"dentro":1,"de":6,"Seu":1,"cora":1,"whatsapp":1,"vai":2,"ser":1,"bloqueado":1,"no":2,"brasil":1,"todo":1,"ainda":1,"bem":1,"eu":3,"moro":1,"em":2,"carazinho":1,"Recebi":1,"comunicado":1,"do":5,"bloqueio":1,"WhatsApp":1,"Brasil":3,"senti":1,"as":1,"vistas":1,"escurecerem":1,"cai":1,"e":6,"agora":2,"estou":1,"aqui":2,"na":2,"enfermaria":1,"":8,"RT":6,"ivannmonteiro":1,"Mark":1,"Zuckerberg":1,"compre":1,"logo":1,"Vai":1,"resolver":1,"toda":1,"essa":2,"bagun":1,"a":6,"To":1,"mal":1,"vpn":1,"minha":1,"net":1,"fica":1,"tipo":1,"muito":1,"Lula":1,"culpa":1,"colonizadores":1,"por":2,"atrasos":1,"educa":1,"gera":1,"pol":1,"mica":1,"Portugal":1,"https":1,"t":5,"co":1,"qUvIvLdIEl":1,"Mas":1,"um":3,"mesmo":2,"Nossa":1,"vc":1,"bilingue":1,"Fala":1,"portugu":1,"s":5,"fala":1,"Depois":1,"dessa":1,"piada":1,"vou":1,"ali":1,"me":1,"esfaquear":1,"ja":1,"volto":1,"Minha":1,"galeria":1,"ta":1,"cheia":1,"foto":1,"CamillaAlencarr":1,"te":1,"fude":1,"tu":1,"lol":1,"quem":1,"joga":1,"kingofpopis":1,"faz":1,"meia":1,"hora":1,"q":3,"tentando":1,"cagar":1,"n":7,"sai":1,"da":1,"porra":1,"meu":2,"cu":1,"pfvr":1,"seja":1,"ano":1,"Meu":1,"cabelo":1,"entendendo":1,"rezenbela":1,"Acho":2,"engra":2,"ado":2,"agr":2,"aqueles":2,"ficavam":2,"falando":3,"mudando":2,"totalmente":2,"opini":2,"pra":2,"levar":2,"unf":2,"ou":2,"mute":2,"brogui":1,"foi":2,"chamar":1,"receita":1,"deixou":1,"ela":1,"tua":1,"pregui":1,"abs":1,"Carolgatte_":1,"EU":1,"ODEIO":1,"ESSA":1,"BOSTA":1,"rezenicornio":1,"fiquei":1,"mimimi":1,"nem":1,"pedindo":1,"desculpa":1,"ter":1,"falado":1,"rezende_evil":1,"Gente":1,"namoro":1,"com":1,"Helena":1,"deu":1,"ok":1,"Parem":1,"ficar":1,"merda":1,"mano":1,"Tentei":1,"at":1,"ir":1,"aguentando":1,"marialuuizaa_":1,"Kuetlem":1,"b":1,"bada":1}},"options":{}}' 32 | 33 | # Servidor HTTP 34 | app = Flask(__name__) 35 | app.debug = True 36 | 37 | STATIC_DIR = '' 38 | 39 | @app.route('/') 40 | def index(): 41 | ''' 42 | Página inicial 43 | ''' 44 | return send_from_directory(STATIC_DIR , 'index.html') 45 | 46 | 47 | @app.route('/api/twitter/search') 48 | def query(): 49 | ''' 50 | Busca termo no Twitter 51 | Argumentos: q (query) 52 | ''' 53 | 54 | MAX_RESULTS = 100 55 | 56 | try: 57 | query = request.args.get('q') 58 | resp = api.GetSearch(term=query, count=MAX_RESULTS) 59 | json_r = {'tweets': [r.AsDict() for r in resp]} 60 | except: 61 | json_r = {'tweets': []} 62 | 63 | return jsonify(json_r) 64 | 65 | 66 | @app.route('/api/mongodb/classifiers') 67 | def classifiers(): 68 | ''' 69 | Recupera todos os classificadores persistidos no MongoDB 70 | ''' 71 | # Conecta ao MongoDB 72 | cliente = MongoClient('mongodb://localhost:27017/') 73 | banco = cliente['bd_classificadores'] 74 | 75 | classificadores = {}; 76 | 77 | # Recupera os classificadores 78 | colecao_classificadores = banco['classificadores'] 79 | 80 | # Se a coleção estiver vazia, insere o 81 | # classificador de sentimentos deafult 82 | if not colecao_classificadores.count(): 83 | colecao_classificadores.insert_one({'nome': 'sentimentos', 'dados': DEFAULT_CLASSIFIER}) 84 | 85 | for c in colecao_classificadores.find(): 86 | classificadores[c['nome']] = c['dados'] 87 | 88 | return jsonify(classificadores) 89 | 90 | 91 | @app.route('/api/mongodb/classifiers/info') 92 | def info_classifiers(): 93 | ''' 94 | Retorna informações sobre todos os classificadores persistidos no MongoDB 95 | ''' 96 | # Conecta ao MongoDB 97 | cliente = MongoClient('mongodb://localhost:27017/') 98 | banco = cliente['bd_classificadores'] 99 | 100 | info_classificadores = {'info': []}; 101 | 102 | # Recupera os classificadores 103 | colecao_classificadores = banco['classificadores'] 104 | 105 | for c in colecao_classificadores.find(): 106 | info_classificadores['info'].append({'nome': c['nome'], 'tamanho': len(str(c['dados'])), 'categorias': json.loads(c['dados'])['categories'].keys() 107 | }) 108 | 109 | return jsonify(info_classificadores) 110 | 111 | 112 | @app.route('/api/mongodb/classifier/new') 113 | def new_classifier(): 114 | ''' 115 | Persiste um novo classificador no MongoDB 116 | Argumentos: nome e dados 117 | ''' 118 | # Conecta ao MongoDB 119 | cliente = MongoClient('mongodb://localhost:27017/') 120 | banco = cliente['bd_classificadores'] 121 | 122 | # Argumentos 123 | arg_nome = request.args.get('nome') 124 | arg_dados = request.args.get('dados') 125 | 126 | if arg_nome and arg_dados: 127 | colecao_classificadores = banco['classificadores'] 128 | colecao_classificadores.insert_one({'nome': arg_nome, 'dados': arg_dados}) 129 | json_r = {'status': 'ok'} 130 | else: 131 | json_r = {'status': 'error'} 132 | 133 | return jsonify(json_r) 134 | 135 | 136 | @app.route('/api/mongodb/classifier/update') 137 | def update_classifier(): 138 | ''' 139 | Atualiza um classificador com seu novo treinamento 140 | Argumentos: nome e dados 141 | ''' 142 | # Conecta ao MongoDB 143 | cliente = MongoClient('mongodb://localhost:27017/') 144 | banco = cliente['bd_classificadores'] 145 | colecao_classificadores = banco['classificadores'] 146 | 147 | try: 148 | # Argumentos 149 | arg_nome = request.args.get('nome') 150 | arg_dados = request.args.get('dados') 151 | 152 | # Obtém o classificador e o modifica 153 | c = colecao_classificadores.find_one({'nome': arg_nome}) 154 | c['dados'] = arg_dados 155 | colecao_classificadores.save(c) 156 | 157 | json_r = {'status': 'ok'} 158 | 159 | except: 160 | json_r = {'status': 'error'} 161 | 162 | return jsonify(json_r) 163 | 164 | 165 | @app.route('/api/mongodb/classifier/remove') 166 | def remove_classifier(): 167 | ''' 168 | Remove um classificador 169 | Argumento: nome 170 | ''' 171 | # Conecta ao MongoDB 172 | cliente = MongoClient('mongodb://localhost:27017/') 173 | banco = cliente['bd_classificadores'] 174 | colecao_classificadores = banco['classificadores'] 175 | 176 | try: 177 | # Argumentos 178 | arg_nome = request.args.get('nome') 179 | 180 | # Obtém o classificador e o modifica 181 | colecao_classificadores.remove({'nome': arg_nome}) 182 | 183 | json_r = {'status': 'ok'} 184 | 185 | except: 186 | json_r = {'status': 'error'} 187 | 188 | return jsonify(json_r) 189 | 190 | 191 | @app.route('/') 192 | def static_proxy(path): 193 | ''' 194 | Mídia estática (img, css, js) 195 | ''' 196 | try: 197 | return send_from_directory(STATIC_DIR , path) 198 | except: 199 | return send_from_directory(STATIC_DIR , 'index.html') 200 | 201 | 202 | if __name__ == "__main__": 203 | app.run() -------------------------------------------------------------------------------- /src/js/naive_bayes.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) by Tolga Tezel tolgatezel11@gmail.com 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | */ 10 | 11 | 12 | bayes = {}; 13 | 14 | bayes.exports = function (options) { 15 | return new Naivebayes(options) 16 | } 17 | 18 | // keys we use to serialize a classifier's state 19 | var STATE_KEYS = bayes.exports.STATE_KEYS = [ 20 | 'categories', 'docCount', 'totalDocuments', 'vocabulary', 'vocabularySize', 21 | 'wordCount', 'wordFrequencyCount', 'options' 22 | ]; 23 | 24 | /** 25 | * Initializes a NaiveBayes instance from a JSON state representation. 26 | * Use this with classifier.toJson(). 27 | * 28 | * @param {String} jsonStr state representation obtained by classifier.toJson() 29 | * @return {NaiveBayes} Classifier 30 | */ 31 | bayes.exports.fromJson = function (jsonStr) { 32 | var parsed; 33 | try { 34 | parsed = JSON.parse(jsonStr) 35 | } catch (e) { 36 | throw new Error('Naivebayes.fromJson expects a valid JSON string.') 37 | } 38 | // init a new classifier 39 | var classifier = new Naivebayes(parsed.options) 40 | 41 | // override the classifier's state 42 | STATE_KEYS.forEach(function (k) { 43 | if (!parsed[k]) { 44 | throw new Error('Naivebayes.fromJson: JSON string is missing an expected property: `'+k+'`.') 45 | } 46 | classifier[k] = parsed[k] 47 | }) 48 | 49 | return classifier 50 | } 51 | 52 | /** 53 | * Given an input string, tokenize it into an array of word tokens. 54 | * This is the default tokenization function used if user does not provide one in `options`. 55 | * 56 | * @param {String} text 57 | * @return {Array} 58 | */ 59 | var defaultTokenizer = function (text) { 60 | //remove punctuation from text - remove anything that isn't a word char or a space 61 | var rgxPunctuation = /[^\w\s]/g 62 | 63 | var sanitized = text.replace(rgxPunctuation, ' ') 64 | 65 | return sanitized.split(/\s+/) 66 | } 67 | 68 | /** 69 | * Naive-Bayes Classifier 70 | * 71 | * This is a naive-bayes classifier that uses Laplace Smoothing. 72 | * 73 | * Takes an (optional) options object containing: 74 | * - `tokenizer` => custom tokenization function 75 | * 76 | */ 77 | function Naivebayes (options) { 78 | // set options object 79 | this.options = {} 80 | if (typeof options !== 'undefined') { 81 | if (!options || typeof options !== 'object' || Array.isArray(options)) { 82 | throw TypeError('NaiveBayes got invalid `options`: `' + options + '`. Pass in an object.') 83 | } 84 | this.options = options 85 | } 86 | 87 | this.tokenizer = this.options.tokenizer || defaultTokenizer 88 | 89 | //initialize our vocabulary and its size 90 | this.vocabulary = {} 91 | this.vocabularySize = 0 92 | 93 | //number of documents we have learned from 94 | this.totalDocuments = 0 95 | 96 | //document frequency table for each of our categories 97 | //=> for each category, how often were documents mapped to it 98 | this.docCount = {} 99 | 100 | //for each category, how many words total were mapped to it 101 | this.wordCount = {} 102 | 103 | //word frequency table for each category 104 | //=> for each category, how frequent was a given word mapped to it 105 | this.wordFrequencyCount = {} 106 | 107 | //hashmap of our category names 108 | this.categories = {} 109 | } 110 | 111 | /** 112 | * Initialize each of our data structure entries for this new category 113 | * 114 | * @param {String} categoryName 115 | */ 116 | Naivebayes.prototype.initializeCategory = function (categoryName) { 117 | if (!this.categories[categoryName]) { 118 | this.docCount[categoryName] = 0 119 | this.wordCount[categoryName] = 0 120 | this.wordFrequencyCount[categoryName] = {} 121 | this.categories[categoryName] = true 122 | } 123 | return this 124 | } 125 | 126 | /** 127 | * train our naive-bayes classifier by telling it what `category` 128 | * the `text` corresponds to. 129 | * 130 | * @param {String} text 131 | * @param {String} class 132 | */ 133 | Naivebayes.prototype.learn = function (text, category) { 134 | var self = this 135 | 136 | //initialize category data structures if we've never seen this category 137 | self.initializeCategory(category) 138 | 139 | //update our count of how many documents mapped to this category 140 | self.docCount[category]++ 141 | 142 | //update the total number of documents we have learned from 143 | self.totalDocuments++ 144 | 145 | //normalize the text into a word array 146 | var tokens = self.tokenizer(text) 147 | 148 | //get a frequency count for each token in the text 149 | var frequencyTable = self.frequencyTable(tokens) 150 | 151 | /* 152 | Update our vocabulary and our word frequency count for this category 153 | */ 154 | 155 | Object 156 | .keys(frequencyTable) 157 | .forEach(function (token) { 158 | //add this word to our vocabulary if not already existing 159 | if (!self.vocabulary[token]) { 160 | self.vocabulary[token] = true 161 | self.vocabularySize++ 162 | } 163 | 164 | var frequencyInText = frequencyTable[token] 165 | 166 | //update the frequency information for this word in this category 167 | if (!self.wordFrequencyCount[category][token]) 168 | self.wordFrequencyCount[category][token] = frequencyInText 169 | else 170 | self.wordFrequencyCount[category][token] += frequencyInText 171 | 172 | //update the count of all words we have seen mapped to this category 173 | self.wordCount[category] += frequencyInText 174 | }) 175 | 176 | return self 177 | } 178 | 179 | /** 180 | * Determine what category `text` belongs to. 181 | * 182 | * @param {String} text 183 | * @return {String} category 184 | */ 185 | Naivebayes.prototype.categorize = function (text) { 186 | var self = this 187 | , maxProbability = -Infinity 188 | , chosenCategory = null 189 | 190 | var tokens = self.tokenizer(text) 191 | var frequencyTable = self.frequencyTable(tokens) 192 | 193 | //iterate thru our categories to find the one with max probability for this text 194 | Object 195 | .keys(self.categories) 196 | .forEach(function (category) { 197 | 198 | //start by calculating the overall probability of this category 199 | //=> out of all documents we've ever looked at, how many were 200 | // mapped to this category 201 | var categoryProbability = self.docCount[category] / self.totalDocuments 202 | 203 | //take the log to avoid underflow 204 | var logProbability = Math.log(categoryProbability) 205 | 206 | //now determine P( w | c ) for each word `w` in the text 207 | Object 208 | .keys(frequencyTable) 209 | .forEach(function (token) { 210 | var frequencyInText = frequencyTable[token] 211 | var tokenProbability = self.tokenProbability(token, category) 212 | 213 | // console.log('token: %s category: `%s` tokenProbability: %d', token, category, tokenProbability) 214 | 215 | //determine the log of the P( w | c ) for this word 216 | logProbability += frequencyInText * Math.log(tokenProbability) 217 | }) 218 | 219 | if (logProbability > maxProbability) { 220 | maxProbability = logProbability 221 | chosenCategory = category 222 | } 223 | }) 224 | 225 | return chosenCategory 226 | } 227 | /*Naivebayes.prototype.categorize = function (text) { 228 | var self = this 229 | , maxProbability = -Infinity 230 | , chosenCategory = null 231 | , result = [] 232 | 233 | var tokens = self.tokenizer(text) 234 | var frequencyTable = self.frequencyTable(tokens) 235 | 236 | //iterate thru our categories to find the one with max probability for this text 237 | Object 238 | .keys(self.categories) 239 | .forEach(function (category) { 240 | 241 | //start by calculating the overall probability of this category 242 | //=> out of all documents we've ever looked at, how many were 243 | // mapped to this category 244 | var categoryProbability = self.docCount[category] / self.totalDocuments 245 | 246 | //take the log to avoid underflow 247 | var logProbability = Math.log(categoryProbability) 248 | 249 | //now determine P( w | c ) for each word `w` in the text 250 | Object 251 | .keys(frequencyTable) 252 | .forEach(function (token) { 253 | var frequencyInText = frequencyTable[token] 254 | var tokenProbability = self.tokenProbability(token, category) 255 | 256 | // console.log('token: %s category: `%s` tokenProbability: %d', token, category, tokenProbability) 257 | 258 | //determine the log of the P( w | c ) for this word 259 | logProbability += frequencyInText * Math.log(tokenProbability) 260 | }) 261 | 262 | result.push([logProbability, category]); 263 | 264 | if (logProbability > maxProbability) { 265 | maxProbability = logProbability 266 | chosenCategory = category 267 | } 268 | }) 269 | 270 | return result.sort(function(a,b){ return b[0] - a[0];}); 271 | }*/ 272 | 273 | /** 274 | * Calculate probability that a `token` belongs to a `category` 275 | * 276 | * @param {String} token 277 | * @param {String} category 278 | * @return {Number} probability 279 | */ 280 | Naivebayes.prototype.tokenProbability = function (token, category) { 281 | //how many times this word has occurred in documents mapped to this category 282 | var wordFrequencyCount = this.wordFrequencyCount[category][token] || 0 283 | 284 | //what is the count of all words that have ever been mapped to this category 285 | var wordCount = this.wordCount[category] 286 | 287 | //use laplace Add-1 Smoothing equation 288 | return ( wordFrequencyCount + 1 ) / ( wordCount + this.vocabularySize ) 289 | } 290 | 291 | /** 292 | * Build a frequency hashmap where 293 | * - the keys are the entries in `tokens` 294 | * - the values are the frequency of each entry in `tokens` 295 | * 296 | * @param {Array} tokens Normalized word array 297 | * @return {Object} 298 | */ 299 | Naivebayes.prototype.frequencyTable = function (tokens) { 300 | var frequencyTable = {} 301 | 302 | tokens.forEach(function (token) { 303 | if (!frequencyTable[token]) 304 | frequencyTable[token] = 1 305 | else 306 | frequencyTable[token]++ 307 | }) 308 | 309 | return frequencyTable 310 | } 311 | 312 | /** 313 | * Dump the classifier's state as a JSON string. 314 | * @return {String} Representation of the classifier. 315 | */ 316 | Naivebayes.prototype.toJson = function () { 317 | var state = {} 318 | var self = this 319 | STATE_KEYS.forEach(function (k) { 320 | state[k] = self[k] 321 | }) 322 | 323 | var jsonStr = JSON.stringify(state) 324 | 325 | return jsonStr 326 | } -------------------------------------------------------------------------------- /src/css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.0 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2015 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | -webkit-animation-duration: 1s; 13 | animation-duration: 1s; 14 | -webkit-animation-fill-mode: both; 15 | animation-fill-mode: both; 16 | } 17 | 18 | .animated.infinite { 19 | -webkit-animation-iteration-count: infinite; 20 | animation-iteration-count: infinite; 21 | } 22 | 23 | .animated.hinge { 24 | -webkit-animation-duration: 2s; 25 | animation-duration: 2s; 26 | } 27 | 28 | .animated.flipOutX, 29 | .animated.flipOutY, 30 | .animated.bounceIn, 31 | .animated.bounceOut { 32 | -webkit-animation-duration: .75s; 33 | animation-duration: .75s; 34 | } 35 | 36 | @-webkit-keyframes bounce { 37 | from, 20%, 53%, 80%, to { 38 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 39 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 40 | -webkit-transform: translate3d(0,0,0); 41 | transform: translate3d(0,0,0); 42 | } 43 | 44 | 40%, 43% { 45 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 46 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 47 | -webkit-transform: translate3d(0, -30px, 0); 48 | transform: translate3d(0, -30px, 0); 49 | } 50 | 51 | 70% { 52 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 53 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 54 | -webkit-transform: translate3d(0, -15px, 0); 55 | transform: translate3d(0, -15px, 0); 56 | } 57 | 58 | 90% { 59 | -webkit-transform: translate3d(0,-4px,0); 60 | transform: translate3d(0,-4px,0); 61 | } 62 | } 63 | 64 | @keyframes bounce { 65 | from, 20%, 53%, 80%, to { 66 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 67 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 68 | -webkit-transform: translate3d(0,0,0); 69 | transform: translate3d(0,0,0); 70 | } 71 | 72 | 40%, 43% { 73 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 74 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 75 | -webkit-transform: translate3d(0, -30px, 0); 76 | transform: translate3d(0, -30px, 0); 77 | } 78 | 79 | 70% { 80 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 81 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 82 | -webkit-transform: translate3d(0, -15px, 0); 83 | transform: translate3d(0, -15px, 0); 84 | } 85 | 86 | 90% { 87 | -webkit-transform: translate3d(0,-4px,0); 88 | transform: translate3d(0,-4px,0); 89 | } 90 | } 91 | 92 | .bounce { 93 | -webkit-animation-name: bounce; 94 | animation-name: bounce; 95 | -webkit-transform-origin: center bottom; 96 | transform-origin: center bottom; 97 | } 98 | 99 | @-webkit-keyframes flash { 100 | from, 50%, to { 101 | opacity: 1; 102 | } 103 | 104 | 25%, 75% { 105 | opacity: 0; 106 | } 107 | } 108 | 109 | @keyframes flash { 110 | from, 50%, to { 111 | opacity: 1; 112 | } 113 | 114 | 25%, 75% { 115 | opacity: 0; 116 | } 117 | } 118 | 119 | .flash { 120 | -webkit-animation-name: flash; 121 | animation-name: flash; 122 | } 123 | 124 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 125 | 126 | @-webkit-keyframes pulse { 127 | from { 128 | -webkit-transform: scale3d(1, 1, 1); 129 | transform: scale3d(1, 1, 1); 130 | } 131 | 132 | 50% { 133 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 134 | transform: scale3d(1.05, 1.05, 1.05); 135 | } 136 | 137 | to { 138 | -webkit-transform: scale3d(1, 1, 1); 139 | transform: scale3d(1, 1, 1); 140 | } 141 | } 142 | 143 | @keyframes pulse { 144 | from { 145 | -webkit-transform: scale3d(1, 1, 1); 146 | transform: scale3d(1, 1, 1); 147 | } 148 | 149 | 50% { 150 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 151 | transform: scale3d(1.05, 1.05, 1.05); 152 | } 153 | 154 | to { 155 | -webkit-transform: scale3d(1, 1, 1); 156 | transform: scale3d(1, 1, 1); 157 | } 158 | } 159 | 160 | .pulse { 161 | -webkit-animation-name: pulse; 162 | animation-name: pulse; 163 | } 164 | 165 | @-webkit-keyframes rubberBand { 166 | from { 167 | -webkit-transform: scale3d(1, 1, 1); 168 | transform: scale3d(1, 1, 1); 169 | } 170 | 171 | 30% { 172 | -webkit-transform: scale3d(1.25, 0.75, 1); 173 | transform: scale3d(1.25, 0.75, 1); 174 | } 175 | 176 | 40% { 177 | -webkit-transform: scale3d(0.75, 1.25, 1); 178 | transform: scale3d(0.75, 1.25, 1); 179 | } 180 | 181 | 50% { 182 | -webkit-transform: scale3d(1.15, 0.85, 1); 183 | transform: scale3d(1.15, 0.85, 1); 184 | } 185 | 186 | 65% { 187 | -webkit-transform: scale3d(.95, 1.05, 1); 188 | transform: scale3d(.95, 1.05, 1); 189 | } 190 | 191 | 75% { 192 | -webkit-transform: scale3d(1.05, .95, 1); 193 | transform: scale3d(1.05, .95, 1); 194 | } 195 | 196 | to { 197 | -webkit-transform: scale3d(1, 1, 1); 198 | transform: scale3d(1, 1, 1); 199 | } 200 | } 201 | 202 | @keyframes rubberBand { 203 | from { 204 | -webkit-transform: scale3d(1, 1, 1); 205 | transform: scale3d(1, 1, 1); 206 | } 207 | 208 | 30% { 209 | -webkit-transform: scale3d(1.25, 0.75, 1); 210 | transform: scale3d(1.25, 0.75, 1); 211 | } 212 | 213 | 40% { 214 | -webkit-transform: scale3d(0.75, 1.25, 1); 215 | transform: scale3d(0.75, 1.25, 1); 216 | } 217 | 218 | 50% { 219 | -webkit-transform: scale3d(1.15, 0.85, 1); 220 | transform: scale3d(1.15, 0.85, 1); 221 | } 222 | 223 | 65% { 224 | -webkit-transform: scale3d(.95, 1.05, 1); 225 | transform: scale3d(.95, 1.05, 1); 226 | } 227 | 228 | 75% { 229 | -webkit-transform: scale3d(1.05, .95, 1); 230 | transform: scale3d(1.05, .95, 1); 231 | } 232 | 233 | to { 234 | -webkit-transform: scale3d(1, 1, 1); 235 | transform: scale3d(1, 1, 1); 236 | } 237 | } 238 | 239 | .rubberBand { 240 | -webkit-animation-name: rubberBand; 241 | animation-name: rubberBand; 242 | } 243 | 244 | @-webkit-keyframes shake { 245 | from, to { 246 | -webkit-transform: translate3d(0, 0, 0); 247 | transform: translate3d(0, 0, 0); 248 | } 249 | 250 | 10%, 30%, 50%, 70%, 90% { 251 | -webkit-transform: translate3d(-10px, 0, 0); 252 | transform: translate3d(-10px, 0, 0); 253 | } 254 | 255 | 20%, 40%, 60%, 80% { 256 | -webkit-transform: translate3d(10px, 0, 0); 257 | transform: translate3d(10px, 0, 0); 258 | } 259 | } 260 | 261 | @keyframes shake { 262 | from, to { 263 | -webkit-transform: translate3d(0, 0, 0); 264 | transform: translate3d(0, 0, 0); 265 | } 266 | 267 | 10%, 30%, 50%, 70%, 90% { 268 | -webkit-transform: translate3d(-10px, 0, 0); 269 | transform: translate3d(-10px, 0, 0); 270 | } 271 | 272 | 20%, 40%, 60%, 80% { 273 | -webkit-transform: translate3d(10px, 0, 0); 274 | transform: translate3d(10px, 0, 0); 275 | } 276 | } 277 | 278 | .shake { 279 | -webkit-animation-name: shake; 280 | animation-name: shake; 281 | } 282 | 283 | @-webkit-keyframes headShake { 284 | 0% { 285 | -webkit-transform: translateX(0); 286 | transform: translateX(0); 287 | } 288 | 289 | 6.5% { 290 | -webkit-transform: translateX(-6px) rotateY(-9deg); 291 | transform: translateX(-6px) rotateY(-9deg); 292 | } 293 | 294 | 18.5% { 295 | -webkit-transform: translateX(5px) rotateY(7deg); 296 | transform: translateX(5px) rotateY(7deg); 297 | } 298 | 299 | 31.5% { 300 | -webkit-transform: translateX(-3px) rotateY(-5deg); 301 | transform: translateX(-3px) rotateY(-5deg); 302 | } 303 | 304 | 43.5% { 305 | -webkit-transform: translateX(2px) rotateY(3deg); 306 | transform: translateX(2px) rotateY(3deg); 307 | } 308 | 309 | 50% { 310 | -webkit-transform: translateX(0); 311 | transform: translateX(0); 312 | } 313 | } 314 | 315 | @keyframes headShake { 316 | 0% { 317 | -webkit-transform: translateX(0); 318 | transform: translateX(0); 319 | } 320 | 321 | 6.5% { 322 | -webkit-transform: translateX(-6px) rotateY(-9deg); 323 | transform: translateX(-6px) rotateY(-9deg); 324 | } 325 | 326 | 18.5% { 327 | -webkit-transform: translateX(5px) rotateY(7deg); 328 | transform: translateX(5px) rotateY(7deg); 329 | } 330 | 331 | 31.5% { 332 | -webkit-transform: translateX(-3px) rotateY(-5deg); 333 | transform: translateX(-3px) rotateY(-5deg); 334 | } 335 | 336 | 43.5% { 337 | -webkit-transform: translateX(2px) rotateY(3deg); 338 | transform: translateX(2px) rotateY(3deg); 339 | } 340 | 341 | 50% { 342 | -webkit-transform: translateX(0); 343 | transform: translateX(0); 344 | } 345 | } 346 | 347 | .headShake { 348 | -webkit-animation-timing-function: ease-in-out; 349 | animation-timing-function: ease-in-out; 350 | -webkit-animation-name: headShake; 351 | animation-name: headShake; 352 | } 353 | 354 | @-webkit-keyframes swing { 355 | 20% { 356 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 357 | transform: rotate3d(0, 0, 1, 15deg); 358 | } 359 | 360 | 40% { 361 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 362 | transform: rotate3d(0, 0, 1, -10deg); 363 | } 364 | 365 | 60% { 366 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 367 | transform: rotate3d(0, 0, 1, 5deg); 368 | } 369 | 370 | 80% { 371 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 372 | transform: rotate3d(0, 0, 1, -5deg); 373 | } 374 | 375 | to { 376 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 377 | transform: rotate3d(0, 0, 1, 0deg); 378 | } 379 | } 380 | 381 | @keyframes swing { 382 | 20% { 383 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 384 | transform: rotate3d(0, 0, 1, 15deg); 385 | } 386 | 387 | 40% { 388 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 389 | transform: rotate3d(0, 0, 1, -10deg); 390 | } 391 | 392 | 60% { 393 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 394 | transform: rotate3d(0, 0, 1, 5deg); 395 | } 396 | 397 | 80% { 398 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 399 | transform: rotate3d(0, 0, 1, -5deg); 400 | } 401 | 402 | to { 403 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 404 | transform: rotate3d(0, 0, 1, 0deg); 405 | } 406 | } 407 | 408 | .swing { 409 | -webkit-transform-origin: top center; 410 | transform-origin: top center; 411 | -webkit-animation-name: swing; 412 | animation-name: swing; 413 | } 414 | 415 | @-webkit-keyframes tada { 416 | from { 417 | -webkit-transform: scale3d(1, 1, 1); 418 | transform: scale3d(1, 1, 1); 419 | } 420 | 421 | 10%, 20% { 422 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 423 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 424 | } 425 | 426 | 30%, 50%, 70%, 90% { 427 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 428 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 429 | } 430 | 431 | 40%, 60%, 80% { 432 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 433 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 434 | } 435 | 436 | to { 437 | -webkit-transform: scale3d(1, 1, 1); 438 | transform: scale3d(1, 1, 1); 439 | } 440 | } 441 | 442 | @keyframes tada { 443 | from { 444 | -webkit-transform: scale3d(1, 1, 1); 445 | transform: scale3d(1, 1, 1); 446 | } 447 | 448 | 10%, 20% { 449 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 450 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 451 | } 452 | 453 | 30%, 50%, 70%, 90% { 454 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 455 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 456 | } 457 | 458 | 40%, 60%, 80% { 459 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 460 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 461 | } 462 | 463 | to { 464 | -webkit-transform: scale3d(1, 1, 1); 465 | transform: scale3d(1, 1, 1); 466 | } 467 | } 468 | 469 | .tada { 470 | -webkit-animation-name: tada; 471 | animation-name: tada; 472 | } 473 | 474 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 475 | 476 | @-webkit-keyframes wobble { 477 | from { 478 | -webkit-transform: none; 479 | transform: none; 480 | } 481 | 482 | 15% { 483 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 484 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 485 | } 486 | 487 | 30% { 488 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 489 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 490 | } 491 | 492 | 45% { 493 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 494 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 495 | } 496 | 497 | 60% { 498 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 499 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 500 | } 501 | 502 | 75% { 503 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 504 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 505 | } 506 | 507 | to { 508 | -webkit-transform: none; 509 | transform: none; 510 | } 511 | } 512 | 513 | @keyframes wobble { 514 | from { 515 | -webkit-transform: none; 516 | transform: none; 517 | } 518 | 519 | 15% { 520 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 521 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 522 | } 523 | 524 | 30% { 525 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 526 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 527 | } 528 | 529 | 45% { 530 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 531 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 532 | } 533 | 534 | 60% { 535 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 536 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 537 | } 538 | 539 | 75% { 540 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 541 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 542 | } 543 | 544 | to { 545 | -webkit-transform: none; 546 | transform: none; 547 | } 548 | } 549 | 550 | .wobble { 551 | -webkit-animation-name: wobble; 552 | animation-name: wobble; 553 | } 554 | 555 | @-webkit-keyframes jello { 556 | from, 11.1%, to { 557 | -webkit-transform: none; 558 | transform: none; 559 | } 560 | 561 | 22.2% { 562 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 563 | transform: skewX(-12.5deg) skewY(-12.5deg); 564 | } 565 | 566 | 33.3% { 567 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 568 | transform: skewX(6.25deg) skewY(6.25deg); 569 | } 570 | 571 | 44.4% { 572 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 573 | transform: skewX(-3.125deg) skewY(-3.125deg); 574 | } 575 | 576 | 55.5% { 577 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 578 | transform: skewX(1.5625deg) skewY(1.5625deg); 579 | } 580 | 581 | 66.6% { 582 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 583 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 584 | } 585 | 586 | 77.7% { 587 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 588 | transform: skewX(0.390625deg) skewY(0.390625deg); 589 | } 590 | 591 | 88.8% { 592 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 593 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 594 | } 595 | } 596 | 597 | @keyframes jello { 598 | from, 11.1%, to { 599 | -webkit-transform: none; 600 | transform: none; 601 | } 602 | 603 | 22.2% { 604 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 605 | transform: skewX(-12.5deg) skewY(-12.5deg); 606 | } 607 | 608 | 33.3% { 609 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 610 | transform: skewX(6.25deg) skewY(6.25deg); 611 | } 612 | 613 | 44.4% { 614 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 615 | transform: skewX(-3.125deg) skewY(-3.125deg); 616 | } 617 | 618 | 55.5% { 619 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 620 | transform: skewX(1.5625deg) skewY(1.5625deg); 621 | } 622 | 623 | 66.6% { 624 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 625 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 626 | } 627 | 628 | 77.7% { 629 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 630 | transform: skewX(0.390625deg) skewY(0.390625deg); 631 | } 632 | 633 | 88.8% { 634 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 635 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 636 | } 637 | } 638 | 639 | .jello { 640 | -webkit-animation-name: jello; 641 | animation-name: jello; 642 | -webkit-transform-origin: center; 643 | transform-origin: center; 644 | } 645 | 646 | @-webkit-keyframes bounceIn { 647 | from, 20%, 40%, 60%, 80%, to { 648 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 649 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 650 | } 651 | 652 | 0% { 653 | opacity: 0; 654 | -webkit-transform: scale3d(.3, .3, .3); 655 | transform: scale3d(.3, .3, .3); 656 | } 657 | 658 | 20% { 659 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 660 | transform: scale3d(1.1, 1.1, 1.1); 661 | } 662 | 663 | 40% { 664 | -webkit-transform: scale3d(.9, .9, .9); 665 | transform: scale3d(.9, .9, .9); 666 | } 667 | 668 | 60% { 669 | opacity: 1; 670 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 671 | transform: scale3d(1.03, 1.03, 1.03); 672 | } 673 | 674 | 80% { 675 | -webkit-transform: scale3d(.97, .97, .97); 676 | transform: scale3d(.97, .97, .97); 677 | } 678 | 679 | to { 680 | opacity: 1; 681 | -webkit-transform: scale3d(1, 1, 1); 682 | transform: scale3d(1, 1, 1); 683 | } 684 | } 685 | 686 | @keyframes bounceIn { 687 | from, 20%, 40%, 60%, 80%, to { 688 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 689 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 690 | } 691 | 692 | 0% { 693 | opacity: 0; 694 | -webkit-transform: scale3d(.3, .3, .3); 695 | transform: scale3d(.3, .3, .3); 696 | } 697 | 698 | 20% { 699 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 700 | transform: scale3d(1.1, 1.1, 1.1); 701 | } 702 | 703 | 40% { 704 | -webkit-transform: scale3d(.9, .9, .9); 705 | transform: scale3d(.9, .9, .9); 706 | } 707 | 708 | 60% { 709 | opacity: 1; 710 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 711 | transform: scale3d(1.03, 1.03, 1.03); 712 | } 713 | 714 | 80% { 715 | -webkit-transform: scale3d(.97, .97, .97); 716 | transform: scale3d(.97, .97, .97); 717 | } 718 | 719 | to { 720 | opacity: 1; 721 | -webkit-transform: scale3d(1, 1, 1); 722 | transform: scale3d(1, 1, 1); 723 | } 724 | } 725 | 726 | .bounceIn { 727 | -webkit-animation-name: bounceIn; 728 | animation-name: bounceIn; 729 | } 730 | 731 | @-webkit-keyframes bounceInDown { 732 | from, 60%, 75%, 90%, to { 733 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 734 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 735 | } 736 | 737 | 0% { 738 | opacity: 0; 739 | -webkit-transform: translate3d(0, -3000px, 0); 740 | transform: translate3d(0, -3000px, 0); 741 | } 742 | 743 | 60% { 744 | opacity: 1; 745 | -webkit-transform: translate3d(0, 25px, 0); 746 | transform: translate3d(0, 25px, 0); 747 | } 748 | 749 | 75% { 750 | -webkit-transform: translate3d(0, -10px, 0); 751 | transform: translate3d(0, -10px, 0); 752 | } 753 | 754 | 90% { 755 | -webkit-transform: translate3d(0, 5px, 0); 756 | transform: translate3d(0, 5px, 0); 757 | } 758 | 759 | to { 760 | -webkit-transform: none; 761 | transform: none; 762 | } 763 | } 764 | 765 | @keyframes bounceInDown { 766 | from, 60%, 75%, 90%, to { 767 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 768 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 769 | } 770 | 771 | 0% { 772 | opacity: 0; 773 | -webkit-transform: translate3d(0, -3000px, 0); 774 | transform: translate3d(0, -3000px, 0); 775 | } 776 | 777 | 60% { 778 | opacity: 1; 779 | -webkit-transform: translate3d(0, 25px, 0); 780 | transform: translate3d(0, 25px, 0); 781 | } 782 | 783 | 75% { 784 | -webkit-transform: translate3d(0, -10px, 0); 785 | transform: translate3d(0, -10px, 0); 786 | } 787 | 788 | 90% { 789 | -webkit-transform: translate3d(0, 5px, 0); 790 | transform: translate3d(0, 5px, 0); 791 | } 792 | 793 | to { 794 | -webkit-transform: none; 795 | transform: none; 796 | } 797 | } 798 | 799 | .bounceInDown { 800 | -webkit-animation-name: bounceInDown; 801 | animation-name: bounceInDown; 802 | } 803 | 804 | @-webkit-keyframes bounceInLeft { 805 | from, 60%, 75%, 90%, to { 806 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 807 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 808 | } 809 | 810 | 0% { 811 | opacity: 0; 812 | -webkit-transform: translate3d(-3000px, 0, 0); 813 | transform: translate3d(-3000px, 0, 0); 814 | } 815 | 816 | 60% { 817 | opacity: 1; 818 | -webkit-transform: translate3d(25px, 0, 0); 819 | transform: translate3d(25px, 0, 0); 820 | } 821 | 822 | 75% { 823 | -webkit-transform: translate3d(-10px, 0, 0); 824 | transform: translate3d(-10px, 0, 0); 825 | } 826 | 827 | 90% { 828 | -webkit-transform: translate3d(5px, 0, 0); 829 | transform: translate3d(5px, 0, 0); 830 | } 831 | 832 | to { 833 | -webkit-transform: none; 834 | transform: none; 835 | } 836 | } 837 | 838 | @keyframes bounceInLeft { 839 | from, 60%, 75%, 90%, to { 840 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 841 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 842 | } 843 | 844 | 0% { 845 | opacity: 0; 846 | -webkit-transform: translate3d(-3000px, 0, 0); 847 | transform: translate3d(-3000px, 0, 0); 848 | } 849 | 850 | 60% { 851 | opacity: 1; 852 | -webkit-transform: translate3d(25px, 0, 0); 853 | transform: translate3d(25px, 0, 0); 854 | } 855 | 856 | 75% { 857 | -webkit-transform: translate3d(-10px, 0, 0); 858 | transform: translate3d(-10px, 0, 0); 859 | } 860 | 861 | 90% { 862 | -webkit-transform: translate3d(5px, 0, 0); 863 | transform: translate3d(5px, 0, 0); 864 | } 865 | 866 | to { 867 | -webkit-transform: none; 868 | transform: none; 869 | } 870 | } 871 | 872 | .bounceInLeft { 873 | -webkit-animation-name: bounceInLeft; 874 | animation-name: bounceInLeft; 875 | } 876 | 877 | @-webkit-keyframes bounceInRight { 878 | from, 60%, 75%, 90%, to { 879 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 880 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 881 | } 882 | 883 | from { 884 | opacity: 0; 885 | -webkit-transform: translate3d(3000px, 0, 0); 886 | transform: translate3d(3000px, 0, 0); 887 | } 888 | 889 | 60% { 890 | opacity: 1; 891 | -webkit-transform: translate3d(-25px, 0, 0); 892 | transform: translate3d(-25px, 0, 0); 893 | } 894 | 895 | 75% { 896 | -webkit-transform: translate3d(10px, 0, 0); 897 | transform: translate3d(10px, 0, 0); 898 | } 899 | 900 | 90% { 901 | -webkit-transform: translate3d(-5px, 0, 0); 902 | transform: translate3d(-5px, 0, 0); 903 | } 904 | 905 | to { 906 | -webkit-transform: none; 907 | transform: none; 908 | } 909 | } 910 | 911 | @keyframes bounceInRight { 912 | from, 60%, 75%, 90%, to { 913 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 914 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 915 | } 916 | 917 | from { 918 | opacity: 0; 919 | -webkit-transform: translate3d(3000px, 0, 0); 920 | transform: translate3d(3000px, 0, 0); 921 | } 922 | 923 | 60% { 924 | opacity: 1; 925 | -webkit-transform: translate3d(-25px, 0, 0); 926 | transform: translate3d(-25px, 0, 0); 927 | } 928 | 929 | 75% { 930 | -webkit-transform: translate3d(10px, 0, 0); 931 | transform: translate3d(10px, 0, 0); 932 | } 933 | 934 | 90% { 935 | -webkit-transform: translate3d(-5px, 0, 0); 936 | transform: translate3d(-5px, 0, 0); 937 | } 938 | 939 | to { 940 | -webkit-transform: none; 941 | transform: none; 942 | } 943 | } 944 | 945 | .bounceInRight { 946 | -webkit-animation-name: bounceInRight; 947 | animation-name: bounceInRight; 948 | } 949 | 950 | @-webkit-keyframes bounceInUp { 951 | from, 60%, 75%, 90%, to { 952 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 953 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 954 | } 955 | 956 | from { 957 | opacity: 0; 958 | -webkit-transform: translate3d(0, 3000px, 0); 959 | transform: translate3d(0, 3000px, 0); 960 | } 961 | 962 | 60% { 963 | opacity: 1; 964 | -webkit-transform: translate3d(0, -20px, 0); 965 | transform: translate3d(0, -20px, 0); 966 | } 967 | 968 | 75% { 969 | -webkit-transform: translate3d(0, 10px, 0); 970 | transform: translate3d(0, 10px, 0); 971 | } 972 | 973 | 90% { 974 | -webkit-transform: translate3d(0, -5px, 0); 975 | transform: translate3d(0, -5px, 0); 976 | } 977 | 978 | to { 979 | -webkit-transform: translate3d(0, 0, 0); 980 | transform: translate3d(0, 0, 0); 981 | } 982 | } 983 | 984 | @keyframes bounceInUp { 985 | from, 60%, 75%, 90%, to { 986 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 987 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 988 | } 989 | 990 | from { 991 | opacity: 0; 992 | -webkit-transform: translate3d(0, 3000px, 0); 993 | transform: translate3d(0, 3000px, 0); 994 | } 995 | 996 | 60% { 997 | opacity: 1; 998 | -webkit-transform: translate3d(0, -20px, 0); 999 | transform: translate3d(0, -20px, 0); 1000 | } 1001 | 1002 | 75% { 1003 | -webkit-transform: translate3d(0, 10px, 0); 1004 | transform: translate3d(0, 10px, 0); 1005 | } 1006 | 1007 | 90% { 1008 | -webkit-transform: translate3d(0, -5px, 0); 1009 | transform: translate3d(0, -5px, 0); 1010 | } 1011 | 1012 | to { 1013 | -webkit-transform: translate3d(0, 0, 0); 1014 | transform: translate3d(0, 0, 0); 1015 | } 1016 | } 1017 | 1018 | .bounceInUp { 1019 | -webkit-animation-name: bounceInUp; 1020 | animation-name: bounceInUp; 1021 | } 1022 | 1023 | @-webkit-keyframes bounceOut { 1024 | 20% { 1025 | -webkit-transform: scale3d(.9, .9, .9); 1026 | transform: scale3d(.9, .9, .9); 1027 | } 1028 | 1029 | 50%, 55% { 1030 | opacity: 1; 1031 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 1032 | transform: scale3d(1.1, 1.1, 1.1); 1033 | } 1034 | 1035 | to { 1036 | opacity: 0; 1037 | -webkit-transform: scale3d(.3, .3, .3); 1038 | transform: scale3d(.3, .3, .3); 1039 | } 1040 | } 1041 | 1042 | @keyframes bounceOut { 1043 | 20% { 1044 | -webkit-transform: scale3d(.9, .9, .9); 1045 | transform: scale3d(.9, .9, .9); 1046 | } 1047 | 1048 | 50%, 55% { 1049 | opacity: 1; 1050 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 1051 | transform: scale3d(1.1, 1.1, 1.1); 1052 | } 1053 | 1054 | to { 1055 | opacity: 0; 1056 | -webkit-transform: scale3d(.3, .3, .3); 1057 | transform: scale3d(.3, .3, .3); 1058 | } 1059 | } 1060 | 1061 | .bounceOut { 1062 | -webkit-animation-name: bounceOut; 1063 | animation-name: bounceOut; 1064 | } 1065 | 1066 | @-webkit-keyframes bounceOutDown { 1067 | 20% { 1068 | -webkit-transform: translate3d(0, 10px, 0); 1069 | transform: translate3d(0, 10px, 0); 1070 | } 1071 | 1072 | 40%, 45% { 1073 | opacity: 1; 1074 | -webkit-transform: translate3d(0, -20px, 0); 1075 | transform: translate3d(0, -20px, 0); 1076 | } 1077 | 1078 | to { 1079 | opacity: 0; 1080 | -webkit-transform: translate3d(0, 2000px, 0); 1081 | transform: translate3d(0, 2000px, 0); 1082 | } 1083 | } 1084 | 1085 | @keyframes bounceOutDown { 1086 | 20% { 1087 | -webkit-transform: translate3d(0, 10px, 0); 1088 | transform: translate3d(0, 10px, 0); 1089 | } 1090 | 1091 | 40%, 45% { 1092 | opacity: 1; 1093 | -webkit-transform: translate3d(0, -20px, 0); 1094 | transform: translate3d(0, -20px, 0); 1095 | } 1096 | 1097 | to { 1098 | opacity: 0; 1099 | -webkit-transform: translate3d(0, 2000px, 0); 1100 | transform: translate3d(0, 2000px, 0); 1101 | } 1102 | } 1103 | 1104 | .bounceOutDown { 1105 | -webkit-animation-name: bounceOutDown; 1106 | animation-name: bounceOutDown; 1107 | } 1108 | 1109 | @-webkit-keyframes bounceOutLeft { 1110 | 20% { 1111 | opacity: 1; 1112 | -webkit-transform: translate3d(20px, 0, 0); 1113 | transform: translate3d(20px, 0, 0); 1114 | } 1115 | 1116 | to { 1117 | opacity: 0; 1118 | -webkit-transform: translate3d(-2000px, 0, 0); 1119 | transform: translate3d(-2000px, 0, 0); 1120 | } 1121 | } 1122 | 1123 | @keyframes bounceOutLeft { 1124 | 20% { 1125 | opacity: 1; 1126 | -webkit-transform: translate3d(20px, 0, 0); 1127 | transform: translate3d(20px, 0, 0); 1128 | } 1129 | 1130 | to { 1131 | opacity: 0; 1132 | -webkit-transform: translate3d(-2000px, 0, 0); 1133 | transform: translate3d(-2000px, 0, 0); 1134 | } 1135 | } 1136 | 1137 | .bounceOutLeft { 1138 | -webkit-animation-name: bounceOutLeft; 1139 | animation-name: bounceOutLeft; 1140 | } 1141 | 1142 | @-webkit-keyframes bounceOutRight { 1143 | 20% { 1144 | opacity: 1; 1145 | -webkit-transform: translate3d(-20px, 0, 0); 1146 | transform: translate3d(-20px, 0, 0); 1147 | } 1148 | 1149 | to { 1150 | opacity: 0; 1151 | -webkit-transform: translate3d(2000px, 0, 0); 1152 | transform: translate3d(2000px, 0, 0); 1153 | } 1154 | } 1155 | 1156 | @keyframes bounceOutRight { 1157 | 20% { 1158 | opacity: 1; 1159 | -webkit-transform: translate3d(-20px, 0, 0); 1160 | transform: translate3d(-20px, 0, 0); 1161 | } 1162 | 1163 | to { 1164 | opacity: 0; 1165 | -webkit-transform: translate3d(2000px, 0, 0); 1166 | transform: translate3d(2000px, 0, 0); 1167 | } 1168 | } 1169 | 1170 | .bounceOutRight { 1171 | -webkit-animation-name: bounceOutRight; 1172 | animation-name: bounceOutRight; 1173 | } 1174 | 1175 | @-webkit-keyframes bounceOutUp { 1176 | 20% { 1177 | -webkit-transform: translate3d(0, -10px, 0); 1178 | transform: translate3d(0, -10px, 0); 1179 | } 1180 | 1181 | 40%, 45% { 1182 | opacity: 1; 1183 | -webkit-transform: translate3d(0, 20px, 0); 1184 | transform: translate3d(0, 20px, 0); 1185 | } 1186 | 1187 | to { 1188 | opacity: 0; 1189 | -webkit-transform: translate3d(0, -2000px, 0); 1190 | transform: translate3d(0, -2000px, 0); 1191 | } 1192 | } 1193 | 1194 | @keyframes bounceOutUp { 1195 | 20% { 1196 | -webkit-transform: translate3d(0, -10px, 0); 1197 | transform: translate3d(0, -10px, 0); 1198 | } 1199 | 1200 | 40%, 45% { 1201 | opacity: 1; 1202 | -webkit-transform: translate3d(0, 20px, 0); 1203 | transform: translate3d(0, 20px, 0); 1204 | } 1205 | 1206 | to { 1207 | opacity: 0; 1208 | -webkit-transform: translate3d(0, -2000px, 0); 1209 | transform: translate3d(0, -2000px, 0); 1210 | } 1211 | } 1212 | 1213 | .bounceOutUp { 1214 | -webkit-animation-name: bounceOutUp; 1215 | animation-name: bounceOutUp; 1216 | } 1217 | 1218 | @-webkit-keyframes fadeIn { 1219 | from { 1220 | opacity: 0; 1221 | } 1222 | 1223 | to { 1224 | opacity: 1; 1225 | } 1226 | } 1227 | 1228 | @keyframes fadeIn { 1229 | from { 1230 | opacity: 0; 1231 | } 1232 | 1233 | to { 1234 | opacity: 1; 1235 | } 1236 | } 1237 | 1238 | .fadeIn { 1239 | -webkit-animation-name: fadeIn; 1240 | animation-name: fadeIn; 1241 | } 1242 | 1243 | @-webkit-keyframes fadeInDown { 1244 | from { 1245 | opacity: 0; 1246 | -webkit-transform: translate3d(0, -100%, 0); 1247 | transform: translate3d(0, -100%, 0); 1248 | } 1249 | 1250 | to { 1251 | opacity: 1; 1252 | -webkit-transform: none; 1253 | transform: none; 1254 | } 1255 | } 1256 | 1257 | @keyframes fadeInDown { 1258 | from { 1259 | opacity: 0; 1260 | -webkit-transform: translate3d(0, -100%, 0); 1261 | transform: translate3d(0, -100%, 0); 1262 | } 1263 | 1264 | to { 1265 | opacity: 1; 1266 | -webkit-transform: none; 1267 | transform: none; 1268 | } 1269 | } 1270 | 1271 | .fadeInDown { 1272 | -webkit-animation-name: fadeInDown; 1273 | animation-name: fadeInDown; 1274 | } 1275 | 1276 | @-webkit-keyframes fadeInDownBig { 1277 | from { 1278 | opacity: 0; 1279 | -webkit-transform: translate3d(0, -2000px, 0); 1280 | transform: translate3d(0, -2000px, 0); 1281 | } 1282 | 1283 | to { 1284 | opacity: 1; 1285 | -webkit-transform: none; 1286 | transform: none; 1287 | } 1288 | } 1289 | 1290 | @keyframes fadeInDownBig { 1291 | from { 1292 | opacity: 0; 1293 | -webkit-transform: translate3d(0, -2000px, 0); 1294 | transform: translate3d(0, -2000px, 0); 1295 | } 1296 | 1297 | to { 1298 | opacity: 1; 1299 | -webkit-transform: none; 1300 | transform: none; 1301 | } 1302 | } 1303 | 1304 | .fadeInDownBig { 1305 | -webkit-animation-name: fadeInDownBig; 1306 | animation-name: fadeInDownBig; 1307 | } 1308 | 1309 | @-webkit-keyframes fadeInLeft { 1310 | from { 1311 | opacity: 0; 1312 | -webkit-transform: translate3d(-100%, 0, 0); 1313 | transform: translate3d(-100%, 0, 0); 1314 | } 1315 | 1316 | to { 1317 | opacity: 1; 1318 | -webkit-transform: none; 1319 | transform: none; 1320 | } 1321 | } 1322 | 1323 | @keyframes fadeInLeft { 1324 | from { 1325 | opacity: 0; 1326 | -webkit-transform: translate3d(-100%, 0, 0); 1327 | transform: translate3d(-100%, 0, 0); 1328 | } 1329 | 1330 | to { 1331 | opacity: 1; 1332 | -webkit-transform: none; 1333 | transform: none; 1334 | } 1335 | } 1336 | 1337 | .fadeInLeft { 1338 | -webkit-animation-name: fadeInLeft; 1339 | animation-name: fadeInLeft; 1340 | } 1341 | 1342 | @-webkit-keyframes fadeInLeftBig { 1343 | from { 1344 | opacity: 0; 1345 | -webkit-transform: translate3d(-2000px, 0, 0); 1346 | transform: translate3d(-2000px, 0, 0); 1347 | } 1348 | 1349 | to { 1350 | opacity: 1; 1351 | -webkit-transform: none; 1352 | transform: none; 1353 | } 1354 | } 1355 | 1356 | @keyframes fadeInLeftBig { 1357 | from { 1358 | opacity: 0; 1359 | -webkit-transform: translate3d(-2000px, 0, 0); 1360 | transform: translate3d(-2000px, 0, 0); 1361 | } 1362 | 1363 | to { 1364 | opacity: 1; 1365 | -webkit-transform: none; 1366 | transform: none; 1367 | } 1368 | } 1369 | 1370 | .fadeInLeftBig { 1371 | -webkit-animation-name: fadeInLeftBig; 1372 | animation-name: fadeInLeftBig; 1373 | } 1374 | 1375 | @-webkit-keyframes fadeInRight { 1376 | from { 1377 | opacity: 0; 1378 | -webkit-transform: translate3d(100%, 0, 0); 1379 | transform: translate3d(100%, 0, 0); 1380 | } 1381 | 1382 | to { 1383 | opacity: 1; 1384 | -webkit-transform: none; 1385 | transform: none; 1386 | } 1387 | } 1388 | 1389 | @keyframes fadeInRight { 1390 | from { 1391 | opacity: 0; 1392 | -webkit-transform: translate3d(100%, 0, 0); 1393 | transform: translate3d(100%, 0, 0); 1394 | } 1395 | 1396 | to { 1397 | opacity: 1; 1398 | -webkit-transform: none; 1399 | transform: none; 1400 | } 1401 | } 1402 | 1403 | .fadeInRight { 1404 | -webkit-animation-name: fadeInRight; 1405 | animation-name: fadeInRight; 1406 | } 1407 | 1408 | @-webkit-keyframes fadeInRightBig { 1409 | from { 1410 | opacity: 0; 1411 | -webkit-transform: translate3d(2000px, 0, 0); 1412 | transform: translate3d(2000px, 0, 0); 1413 | } 1414 | 1415 | to { 1416 | opacity: 1; 1417 | -webkit-transform: none; 1418 | transform: none; 1419 | } 1420 | } 1421 | 1422 | @keyframes fadeInRightBig { 1423 | from { 1424 | opacity: 0; 1425 | -webkit-transform: translate3d(2000px, 0, 0); 1426 | transform: translate3d(2000px, 0, 0); 1427 | } 1428 | 1429 | to { 1430 | opacity: 1; 1431 | -webkit-transform: none; 1432 | transform: none; 1433 | } 1434 | } 1435 | 1436 | .fadeInRightBig { 1437 | -webkit-animation-name: fadeInRightBig; 1438 | animation-name: fadeInRightBig; 1439 | } 1440 | 1441 | @-webkit-keyframes fadeInUp { 1442 | from { 1443 | opacity: 0; 1444 | -webkit-transform: translate3d(0, 100%, 0); 1445 | transform: translate3d(0, 100%, 0); 1446 | } 1447 | 1448 | to { 1449 | opacity: 1; 1450 | -webkit-transform: none; 1451 | transform: none; 1452 | } 1453 | } 1454 | 1455 | @keyframes fadeInUp { 1456 | from { 1457 | opacity: 0; 1458 | -webkit-transform: translate3d(0, 100%, 0); 1459 | transform: translate3d(0, 100%, 0); 1460 | } 1461 | 1462 | to { 1463 | opacity: 1; 1464 | -webkit-transform: none; 1465 | transform: none; 1466 | } 1467 | } 1468 | 1469 | .fadeInUp { 1470 | -webkit-animation-name: fadeInUp; 1471 | animation-name: fadeInUp; 1472 | } 1473 | 1474 | @-webkit-keyframes fadeInUpBig { 1475 | from { 1476 | opacity: 0; 1477 | -webkit-transform: translate3d(0, 2000px, 0); 1478 | transform: translate3d(0, 2000px, 0); 1479 | } 1480 | 1481 | to { 1482 | opacity: 1; 1483 | -webkit-transform: none; 1484 | transform: none; 1485 | } 1486 | } 1487 | 1488 | @keyframes fadeInUpBig { 1489 | from { 1490 | opacity: 0; 1491 | -webkit-transform: translate3d(0, 2000px, 0); 1492 | transform: translate3d(0, 2000px, 0); 1493 | } 1494 | 1495 | to { 1496 | opacity: 1; 1497 | -webkit-transform: none; 1498 | transform: none; 1499 | } 1500 | } 1501 | 1502 | .fadeInUpBig { 1503 | -webkit-animation-name: fadeInUpBig; 1504 | animation-name: fadeInUpBig; 1505 | } 1506 | 1507 | @-webkit-keyframes fadeOut { 1508 | from { 1509 | opacity: 1; 1510 | } 1511 | 1512 | to { 1513 | opacity: 0; 1514 | } 1515 | } 1516 | 1517 | @keyframes fadeOut { 1518 | from { 1519 | opacity: 1; 1520 | } 1521 | 1522 | to { 1523 | opacity: 0; 1524 | } 1525 | } 1526 | 1527 | .fadeOut { 1528 | -webkit-animation-name: fadeOut; 1529 | animation-name: fadeOut; 1530 | } 1531 | 1532 | @-webkit-keyframes fadeOutDown { 1533 | from { 1534 | opacity: 1; 1535 | } 1536 | 1537 | to { 1538 | opacity: 0; 1539 | -webkit-transform: translate3d(0, 100%, 0); 1540 | transform: translate3d(0, 100%, 0); 1541 | } 1542 | } 1543 | 1544 | @keyframes fadeOutDown { 1545 | from { 1546 | opacity: 1; 1547 | } 1548 | 1549 | to { 1550 | opacity: 0; 1551 | -webkit-transform: translate3d(0, 100%, 0); 1552 | transform: translate3d(0, 100%, 0); 1553 | } 1554 | } 1555 | 1556 | .fadeOutDown { 1557 | -webkit-animation-name: fadeOutDown; 1558 | animation-name: fadeOutDown; 1559 | } 1560 | 1561 | @-webkit-keyframes fadeOutDownBig { 1562 | from { 1563 | opacity: 1; 1564 | } 1565 | 1566 | to { 1567 | opacity: 0; 1568 | -webkit-transform: translate3d(0, 2000px, 0); 1569 | transform: translate3d(0, 2000px, 0); 1570 | } 1571 | } 1572 | 1573 | @keyframes fadeOutDownBig { 1574 | from { 1575 | opacity: 1; 1576 | } 1577 | 1578 | to { 1579 | opacity: 0; 1580 | -webkit-transform: translate3d(0, 2000px, 0); 1581 | transform: translate3d(0, 2000px, 0); 1582 | } 1583 | } 1584 | 1585 | .fadeOutDownBig { 1586 | -webkit-animation-name: fadeOutDownBig; 1587 | animation-name: fadeOutDownBig; 1588 | } 1589 | 1590 | @-webkit-keyframes fadeOutLeft { 1591 | from { 1592 | opacity: 1; 1593 | } 1594 | 1595 | to { 1596 | opacity: 0; 1597 | -webkit-transform: translate3d(-100%, 0, 0); 1598 | transform: translate3d(-100%, 0, 0); 1599 | } 1600 | } 1601 | 1602 | @keyframes fadeOutLeft { 1603 | from { 1604 | opacity: 1; 1605 | } 1606 | 1607 | to { 1608 | opacity: 0; 1609 | -webkit-transform: translate3d(-100%, 0, 0); 1610 | transform: translate3d(-100%, 0, 0); 1611 | } 1612 | } 1613 | 1614 | .fadeOutLeft { 1615 | -webkit-animation-name: fadeOutLeft; 1616 | animation-name: fadeOutLeft; 1617 | } 1618 | 1619 | @-webkit-keyframes fadeOutLeftBig { 1620 | from { 1621 | opacity: 1; 1622 | } 1623 | 1624 | to { 1625 | opacity: 0; 1626 | -webkit-transform: translate3d(-2000px, 0, 0); 1627 | transform: translate3d(-2000px, 0, 0); 1628 | } 1629 | } 1630 | 1631 | @keyframes fadeOutLeftBig { 1632 | from { 1633 | opacity: 1; 1634 | } 1635 | 1636 | to { 1637 | opacity: 0; 1638 | -webkit-transform: translate3d(-2000px, 0, 0); 1639 | transform: translate3d(-2000px, 0, 0); 1640 | } 1641 | } 1642 | 1643 | .fadeOutLeftBig { 1644 | -webkit-animation-name: fadeOutLeftBig; 1645 | animation-name: fadeOutLeftBig; 1646 | } 1647 | 1648 | @-webkit-keyframes fadeOutRight { 1649 | from { 1650 | opacity: 1; 1651 | } 1652 | 1653 | to { 1654 | opacity: 0; 1655 | -webkit-transform: translate3d(100%, 0, 0); 1656 | transform: translate3d(100%, 0, 0); 1657 | } 1658 | } 1659 | 1660 | @keyframes fadeOutRight { 1661 | from { 1662 | opacity: 1; 1663 | } 1664 | 1665 | to { 1666 | opacity: 0; 1667 | -webkit-transform: translate3d(100%, 0, 0); 1668 | transform: translate3d(100%, 0, 0); 1669 | } 1670 | } 1671 | 1672 | .fadeOutRight { 1673 | -webkit-animation-name: fadeOutRight; 1674 | animation-name: fadeOutRight; 1675 | } 1676 | 1677 | @-webkit-keyframes fadeOutRightBig { 1678 | from { 1679 | opacity: 1; 1680 | } 1681 | 1682 | to { 1683 | opacity: 0; 1684 | -webkit-transform: translate3d(2000px, 0, 0); 1685 | transform: translate3d(2000px, 0, 0); 1686 | } 1687 | } 1688 | 1689 | @keyframes fadeOutRightBig { 1690 | from { 1691 | opacity: 1; 1692 | } 1693 | 1694 | to { 1695 | opacity: 0; 1696 | -webkit-transform: translate3d(2000px, 0, 0); 1697 | transform: translate3d(2000px, 0, 0); 1698 | } 1699 | } 1700 | 1701 | .fadeOutRightBig { 1702 | -webkit-animation-name: fadeOutRightBig; 1703 | animation-name: fadeOutRightBig; 1704 | } 1705 | 1706 | @-webkit-keyframes fadeOutUp { 1707 | from { 1708 | opacity: 1; 1709 | } 1710 | 1711 | to { 1712 | opacity: 0; 1713 | -webkit-transform: translate3d(0, -100%, 0); 1714 | transform: translate3d(0, -100%, 0); 1715 | } 1716 | } 1717 | 1718 | @keyframes fadeOutUp { 1719 | from { 1720 | opacity: 1; 1721 | } 1722 | 1723 | to { 1724 | opacity: 0; 1725 | -webkit-transform: translate3d(0, -100%, 0); 1726 | transform: translate3d(0, -100%, 0); 1727 | } 1728 | } 1729 | 1730 | .fadeOutUp { 1731 | -webkit-animation-name: fadeOutUp; 1732 | animation-name: fadeOutUp; 1733 | } 1734 | 1735 | @-webkit-keyframes fadeOutUpBig { 1736 | from { 1737 | opacity: 1; 1738 | } 1739 | 1740 | to { 1741 | opacity: 0; 1742 | -webkit-transform: translate3d(0, -2000px, 0); 1743 | transform: translate3d(0, -2000px, 0); 1744 | } 1745 | } 1746 | 1747 | @keyframes fadeOutUpBig { 1748 | from { 1749 | opacity: 1; 1750 | } 1751 | 1752 | to { 1753 | opacity: 0; 1754 | -webkit-transform: translate3d(0, -2000px, 0); 1755 | transform: translate3d(0, -2000px, 0); 1756 | } 1757 | } 1758 | 1759 | .fadeOutUpBig { 1760 | -webkit-animation-name: fadeOutUpBig; 1761 | animation-name: fadeOutUpBig; 1762 | } 1763 | 1764 | @-webkit-keyframes flip { 1765 | from { 1766 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1767 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1768 | -webkit-animation-timing-function: ease-out; 1769 | animation-timing-function: ease-out; 1770 | } 1771 | 1772 | 40% { 1773 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1774 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1775 | -webkit-animation-timing-function: ease-out; 1776 | animation-timing-function: ease-out; 1777 | } 1778 | 1779 | 50% { 1780 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1781 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1782 | -webkit-animation-timing-function: ease-in; 1783 | animation-timing-function: ease-in; 1784 | } 1785 | 1786 | 80% { 1787 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1788 | transform: perspective(400px) scale3d(.95, .95, .95); 1789 | -webkit-animation-timing-function: ease-in; 1790 | animation-timing-function: ease-in; 1791 | } 1792 | 1793 | to { 1794 | -webkit-transform: perspective(400px); 1795 | transform: perspective(400px); 1796 | -webkit-animation-timing-function: ease-in; 1797 | animation-timing-function: ease-in; 1798 | } 1799 | } 1800 | 1801 | @keyframes flip { 1802 | from { 1803 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1804 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1805 | -webkit-animation-timing-function: ease-out; 1806 | animation-timing-function: ease-out; 1807 | } 1808 | 1809 | 40% { 1810 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1811 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1812 | -webkit-animation-timing-function: ease-out; 1813 | animation-timing-function: ease-out; 1814 | } 1815 | 1816 | 50% { 1817 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1818 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1819 | -webkit-animation-timing-function: ease-in; 1820 | animation-timing-function: ease-in; 1821 | } 1822 | 1823 | 80% { 1824 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1825 | transform: perspective(400px) scale3d(.95, .95, .95); 1826 | -webkit-animation-timing-function: ease-in; 1827 | animation-timing-function: ease-in; 1828 | } 1829 | 1830 | to { 1831 | -webkit-transform: perspective(400px); 1832 | transform: perspective(400px); 1833 | -webkit-animation-timing-function: ease-in; 1834 | animation-timing-function: ease-in; 1835 | } 1836 | } 1837 | 1838 | .animated.flip { 1839 | -webkit-backface-visibility: visible; 1840 | backface-visibility: visible; 1841 | -webkit-animation-name: flip; 1842 | animation-name: flip; 1843 | } 1844 | 1845 | @-webkit-keyframes flipInX { 1846 | from { 1847 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1848 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1849 | -webkit-animation-timing-function: ease-in; 1850 | animation-timing-function: ease-in; 1851 | opacity: 0; 1852 | } 1853 | 1854 | 40% { 1855 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1856 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1857 | -webkit-animation-timing-function: ease-in; 1858 | animation-timing-function: ease-in; 1859 | } 1860 | 1861 | 60% { 1862 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1863 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1864 | opacity: 1; 1865 | } 1866 | 1867 | 80% { 1868 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1869 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1870 | } 1871 | 1872 | to { 1873 | -webkit-transform: perspective(400px); 1874 | transform: perspective(400px); 1875 | } 1876 | } 1877 | 1878 | @keyframes flipInX { 1879 | from { 1880 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1881 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1882 | -webkit-animation-timing-function: ease-in; 1883 | animation-timing-function: ease-in; 1884 | opacity: 0; 1885 | } 1886 | 1887 | 40% { 1888 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1889 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1890 | -webkit-animation-timing-function: ease-in; 1891 | animation-timing-function: ease-in; 1892 | } 1893 | 1894 | 60% { 1895 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1896 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1897 | opacity: 1; 1898 | } 1899 | 1900 | 80% { 1901 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1902 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1903 | } 1904 | 1905 | to { 1906 | -webkit-transform: perspective(400px); 1907 | transform: perspective(400px); 1908 | } 1909 | } 1910 | 1911 | .flipInX { 1912 | -webkit-backface-visibility: visible !important; 1913 | backface-visibility: visible !important; 1914 | -webkit-animation-name: flipInX; 1915 | animation-name: flipInX; 1916 | } 1917 | 1918 | @-webkit-keyframes flipInY { 1919 | from { 1920 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1921 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1922 | -webkit-animation-timing-function: ease-in; 1923 | animation-timing-function: ease-in; 1924 | opacity: 0; 1925 | } 1926 | 1927 | 40% { 1928 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1929 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1930 | -webkit-animation-timing-function: ease-in; 1931 | animation-timing-function: ease-in; 1932 | } 1933 | 1934 | 60% { 1935 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1936 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1937 | opacity: 1; 1938 | } 1939 | 1940 | 80% { 1941 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1942 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1943 | } 1944 | 1945 | to { 1946 | -webkit-transform: perspective(400px); 1947 | transform: perspective(400px); 1948 | } 1949 | } 1950 | 1951 | @keyframes flipInY { 1952 | from { 1953 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1954 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1955 | -webkit-animation-timing-function: ease-in; 1956 | animation-timing-function: ease-in; 1957 | opacity: 0; 1958 | } 1959 | 1960 | 40% { 1961 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1962 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1963 | -webkit-animation-timing-function: ease-in; 1964 | animation-timing-function: ease-in; 1965 | } 1966 | 1967 | 60% { 1968 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1969 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1970 | opacity: 1; 1971 | } 1972 | 1973 | 80% { 1974 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1975 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1976 | } 1977 | 1978 | to { 1979 | -webkit-transform: perspective(400px); 1980 | transform: perspective(400px); 1981 | } 1982 | } 1983 | 1984 | .flipInY { 1985 | -webkit-backface-visibility: visible !important; 1986 | backface-visibility: visible !important; 1987 | -webkit-animation-name: flipInY; 1988 | animation-name: flipInY; 1989 | } 1990 | 1991 | @-webkit-keyframes flipOutX { 1992 | from { 1993 | -webkit-transform: perspective(400px); 1994 | transform: perspective(400px); 1995 | } 1996 | 1997 | 30% { 1998 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1999 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2000 | opacity: 1; 2001 | } 2002 | 2003 | to { 2004 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2005 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2006 | opacity: 0; 2007 | } 2008 | } 2009 | 2010 | @keyframes flipOutX { 2011 | from { 2012 | -webkit-transform: perspective(400px); 2013 | transform: perspective(400px); 2014 | } 2015 | 2016 | 30% { 2017 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2018 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2019 | opacity: 1; 2020 | } 2021 | 2022 | to { 2023 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2024 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2025 | opacity: 0; 2026 | } 2027 | } 2028 | 2029 | .flipOutX { 2030 | -webkit-animation-name: flipOutX; 2031 | animation-name: flipOutX; 2032 | -webkit-backface-visibility: visible !important; 2033 | backface-visibility: visible !important; 2034 | } 2035 | 2036 | @-webkit-keyframes flipOutY { 2037 | from { 2038 | -webkit-transform: perspective(400px); 2039 | transform: perspective(400px); 2040 | } 2041 | 2042 | 30% { 2043 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2044 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2045 | opacity: 1; 2046 | } 2047 | 2048 | to { 2049 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2050 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2051 | opacity: 0; 2052 | } 2053 | } 2054 | 2055 | @keyframes flipOutY { 2056 | from { 2057 | -webkit-transform: perspective(400px); 2058 | transform: perspective(400px); 2059 | } 2060 | 2061 | 30% { 2062 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2063 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2064 | opacity: 1; 2065 | } 2066 | 2067 | to { 2068 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2069 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2070 | opacity: 0; 2071 | } 2072 | } 2073 | 2074 | .flipOutY { 2075 | -webkit-backface-visibility: visible !important; 2076 | backface-visibility: visible !important; 2077 | -webkit-animation-name: flipOutY; 2078 | animation-name: flipOutY; 2079 | } 2080 | 2081 | @-webkit-keyframes lightSpeedIn { 2082 | from { 2083 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2084 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2085 | opacity: 0; 2086 | } 2087 | 2088 | 60% { 2089 | -webkit-transform: skewX(20deg); 2090 | transform: skewX(20deg); 2091 | opacity: 1; 2092 | } 2093 | 2094 | 80% { 2095 | -webkit-transform: skewX(-5deg); 2096 | transform: skewX(-5deg); 2097 | opacity: 1; 2098 | } 2099 | 2100 | to { 2101 | -webkit-transform: none; 2102 | transform: none; 2103 | opacity: 1; 2104 | } 2105 | } 2106 | 2107 | @keyframes lightSpeedIn { 2108 | from { 2109 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2110 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2111 | opacity: 0; 2112 | } 2113 | 2114 | 60% { 2115 | -webkit-transform: skewX(20deg); 2116 | transform: skewX(20deg); 2117 | opacity: 1; 2118 | } 2119 | 2120 | 80% { 2121 | -webkit-transform: skewX(-5deg); 2122 | transform: skewX(-5deg); 2123 | opacity: 1; 2124 | } 2125 | 2126 | to { 2127 | -webkit-transform: none; 2128 | transform: none; 2129 | opacity: 1; 2130 | } 2131 | } 2132 | 2133 | .lightSpeedIn { 2134 | -webkit-animation-name: lightSpeedIn; 2135 | animation-name: lightSpeedIn; 2136 | -webkit-animation-timing-function: ease-out; 2137 | animation-timing-function: ease-out; 2138 | } 2139 | 2140 | @-webkit-keyframes lightSpeedOut { 2141 | from { 2142 | opacity: 1; 2143 | } 2144 | 2145 | to { 2146 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2147 | transform: translate3d(100%, 0, 0) skewX(30deg); 2148 | opacity: 0; 2149 | } 2150 | } 2151 | 2152 | @keyframes lightSpeedOut { 2153 | from { 2154 | opacity: 1; 2155 | } 2156 | 2157 | to { 2158 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2159 | transform: translate3d(100%, 0, 0) skewX(30deg); 2160 | opacity: 0; 2161 | } 2162 | } 2163 | 2164 | .lightSpeedOut { 2165 | -webkit-animation-name: lightSpeedOut; 2166 | animation-name: lightSpeedOut; 2167 | -webkit-animation-timing-function: ease-in; 2168 | animation-timing-function: ease-in; 2169 | } 2170 | 2171 | @-webkit-keyframes rotateIn { 2172 | from { 2173 | -webkit-transform-origin: center; 2174 | transform-origin: center; 2175 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2176 | transform: rotate3d(0, 0, 1, -200deg); 2177 | opacity: 0; 2178 | } 2179 | 2180 | to { 2181 | -webkit-transform-origin: center; 2182 | transform-origin: center; 2183 | -webkit-transform: none; 2184 | transform: none; 2185 | opacity: 1; 2186 | } 2187 | } 2188 | 2189 | @keyframes rotateIn { 2190 | from { 2191 | -webkit-transform-origin: center; 2192 | transform-origin: center; 2193 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2194 | transform: rotate3d(0, 0, 1, -200deg); 2195 | opacity: 0; 2196 | } 2197 | 2198 | to { 2199 | -webkit-transform-origin: center; 2200 | transform-origin: center; 2201 | -webkit-transform: none; 2202 | transform: none; 2203 | opacity: 1; 2204 | } 2205 | } 2206 | 2207 | .rotateIn { 2208 | -webkit-animation-name: rotateIn; 2209 | animation-name: rotateIn; 2210 | } 2211 | 2212 | @-webkit-keyframes rotateInDownLeft { 2213 | from { 2214 | -webkit-transform-origin: left bottom; 2215 | transform-origin: left bottom; 2216 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2217 | transform: rotate3d(0, 0, 1, -45deg); 2218 | opacity: 0; 2219 | } 2220 | 2221 | to { 2222 | -webkit-transform-origin: left bottom; 2223 | transform-origin: left bottom; 2224 | -webkit-transform: none; 2225 | transform: none; 2226 | opacity: 1; 2227 | } 2228 | } 2229 | 2230 | @keyframes rotateInDownLeft { 2231 | from { 2232 | -webkit-transform-origin: left bottom; 2233 | transform-origin: left bottom; 2234 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2235 | transform: rotate3d(0, 0, 1, -45deg); 2236 | opacity: 0; 2237 | } 2238 | 2239 | to { 2240 | -webkit-transform-origin: left bottom; 2241 | transform-origin: left bottom; 2242 | -webkit-transform: none; 2243 | transform: none; 2244 | opacity: 1; 2245 | } 2246 | } 2247 | 2248 | .rotateInDownLeft { 2249 | -webkit-animation-name: rotateInDownLeft; 2250 | animation-name: rotateInDownLeft; 2251 | } 2252 | 2253 | @-webkit-keyframes rotateInDownRight { 2254 | from { 2255 | -webkit-transform-origin: right bottom; 2256 | transform-origin: right bottom; 2257 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2258 | transform: rotate3d(0, 0, 1, 45deg); 2259 | opacity: 0; 2260 | } 2261 | 2262 | to { 2263 | -webkit-transform-origin: right bottom; 2264 | transform-origin: right bottom; 2265 | -webkit-transform: none; 2266 | transform: none; 2267 | opacity: 1; 2268 | } 2269 | } 2270 | 2271 | @keyframes rotateInDownRight { 2272 | from { 2273 | -webkit-transform-origin: right bottom; 2274 | transform-origin: right bottom; 2275 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2276 | transform: rotate3d(0, 0, 1, 45deg); 2277 | opacity: 0; 2278 | } 2279 | 2280 | to { 2281 | -webkit-transform-origin: right bottom; 2282 | transform-origin: right bottom; 2283 | -webkit-transform: none; 2284 | transform: none; 2285 | opacity: 1; 2286 | } 2287 | } 2288 | 2289 | .rotateInDownRight { 2290 | -webkit-animation-name: rotateInDownRight; 2291 | animation-name: rotateInDownRight; 2292 | } 2293 | 2294 | @-webkit-keyframes rotateInUpLeft { 2295 | from { 2296 | -webkit-transform-origin: left bottom; 2297 | transform-origin: left bottom; 2298 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2299 | transform: rotate3d(0, 0, 1, 45deg); 2300 | opacity: 0; 2301 | } 2302 | 2303 | to { 2304 | -webkit-transform-origin: left bottom; 2305 | transform-origin: left bottom; 2306 | -webkit-transform: none; 2307 | transform: none; 2308 | opacity: 1; 2309 | } 2310 | } 2311 | 2312 | @keyframes rotateInUpLeft { 2313 | from { 2314 | -webkit-transform-origin: left bottom; 2315 | transform-origin: left bottom; 2316 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2317 | transform: rotate3d(0, 0, 1, 45deg); 2318 | opacity: 0; 2319 | } 2320 | 2321 | to { 2322 | -webkit-transform-origin: left bottom; 2323 | transform-origin: left bottom; 2324 | -webkit-transform: none; 2325 | transform: none; 2326 | opacity: 1; 2327 | } 2328 | } 2329 | 2330 | .rotateInUpLeft { 2331 | -webkit-animation-name: rotateInUpLeft; 2332 | animation-name: rotateInUpLeft; 2333 | } 2334 | 2335 | @-webkit-keyframes rotateInUpRight { 2336 | from { 2337 | -webkit-transform-origin: right bottom; 2338 | transform-origin: right bottom; 2339 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2340 | transform: rotate3d(0, 0, 1, -90deg); 2341 | opacity: 0; 2342 | } 2343 | 2344 | to { 2345 | -webkit-transform-origin: right bottom; 2346 | transform-origin: right bottom; 2347 | -webkit-transform: none; 2348 | transform: none; 2349 | opacity: 1; 2350 | } 2351 | } 2352 | 2353 | @keyframes rotateInUpRight { 2354 | from { 2355 | -webkit-transform-origin: right bottom; 2356 | transform-origin: right bottom; 2357 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2358 | transform: rotate3d(0, 0, 1, -90deg); 2359 | opacity: 0; 2360 | } 2361 | 2362 | to { 2363 | -webkit-transform-origin: right bottom; 2364 | transform-origin: right bottom; 2365 | -webkit-transform: none; 2366 | transform: none; 2367 | opacity: 1; 2368 | } 2369 | } 2370 | 2371 | .rotateInUpRight { 2372 | -webkit-animation-name: rotateInUpRight; 2373 | animation-name: rotateInUpRight; 2374 | } 2375 | 2376 | @-webkit-keyframes rotateOut { 2377 | from { 2378 | -webkit-transform-origin: center; 2379 | transform-origin: center; 2380 | opacity: 1; 2381 | } 2382 | 2383 | to { 2384 | -webkit-transform-origin: center; 2385 | transform-origin: center; 2386 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2387 | transform: rotate3d(0, 0, 1, 200deg); 2388 | opacity: 0; 2389 | } 2390 | } 2391 | 2392 | @keyframes rotateOut { 2393 | from { 2394 | -webkit-transform-origin: center; 2395 | transform-origin: center; 2396 | opacity: 1; 2397 | } 2398 | 2399 | to { 2400 | -webkit-transform-origin: center; 2401 | transform-origin: center; 2402 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2403 | transform: rotate3d(0, 0, 1, 200deg); 2404 | opacity: 0; 2405 | } 2406 | } 2407 | 2408 | .rotateOut { 2409 | -webkit-animation-name: rotateOut; 2410 | animation-name: rotateOut; 2411 | } 2412 | 2413 | @-webkit-keyframes rotateOutDownLeft { 2414 | from { 2415 | -webkit-transform-origin: left bottom; 2416 | transform-origin: left bottom; 2417 | opacity: 1; 2418 | } 2419 | 2420 | to { 2421 | -webkit-transform-origin: left bottom; 2422 | transform-origin: left bottom; 2423 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2424 | transform: rotate3d(0, 0, 1, 45deg); 2425 | opacity: 0; 2426 | } 2427 | } 2428 | 2429 | @keyframes rotateOutDownLeft { 2430 | from { 2431 | -webkit-transform-origin: left bottom; 2432 | transform-origin: left bottom; 2433 | opacity: 1; 2434 | } 2435 | 2436 | to { 2437 | -webkit-transform-origin: left bottom; 2438 | transform-origin: left bottom; 2439 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2440 | transform: rotate3d(0, 0, 1, 45deg); 2441 | opacity: 0; 2442 | } 2443 | } 2444 | 2445 | .rotateOutDownLeft { 2446 | -webkit-animation-name: rotateOutDownLeft; 2447 | animation-name: rotateOutDownLeft; 2448 | } 2449 | 2450 | @-webkit-keyframes rotateOutDownRight { 2451 | from { 2452 | -webkit-transform-origin: right bottom; 2453 | transform-origin: right bottom; 2454 | opacity: 1; 2455 | } 2456 | 2457 | to { 2458 | -webkit-transform-origin: right bottom; 2459 | transform-origin: right bottom; 2460 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2461 | transform: rotate3d(0, 0, 1, -45deg); 2462 | opacity: 0; 2463 | } 2464 | } 2465 | 2466 | @keyframes rotateOutDownRight { 2467 | from { 2468 | -webkit-transform-origin: right bottom; 2469 | transform-origin: right bottom; 2470 | opacity: 1; 2471 | } 2472 | 2473 | to { 2474 | -webkit-transform-origin: right bottom; 2475 | transform-origin: right bottom; 2476 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2477 | transform: rotate3d(0, 0, 1, -45deg); 2478 | opacity: 0; 2479 | } 2480 | } 2481 | 2482 | .rotateOutDownRight { 2483 | -webkit-animation-name: rotateOutDownRight; 2484 | animation-name: rotateOutDownRight; 2485 | } 2486 | 2487 | @-webkit-keyframes rotateOutUpLeft { 2488 | from { 2489 | -webkit-transform-origin: left bottom; 2490 | transform-origin: left bottom; 2491 | opacity: 1; 2492 | } 2493 | 2494 | to { 2495 | -webkit-transform-origin: left bottom; 2496 | transform-origin: left bottom; 2497 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2498 | transform: rotate3d(0, 0, 1, -45deg); 2499 | opacity: 0; 2500 | } 2501 | } 2502 | 2503 | @keyframes rotateOutUpLeft { 2504 | from { 2505 | -webkit-transform-origin: left bottom; 2506 | transform-origin: left bottom; 2507 | opacity: 1; 2508 | } 2509 | 2510 | to { 2511 | -webkit-transform-origin: left bottom; 2512 | transform-origin: left bottom; 2513 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2514 | transform: rotate3d(0, 0, 1, -45deg); 2515 | opacity: 0; 2516 | } 2517 | } 2518 | 2519 | .rotateOutUpLeft { 2520 | -webkit-animation-name: rotateOutUpLeft; 2521 | animation-name: rotateOutUpLeft; 2522 | } 2523 | 2524 | @-webkit-keyframes rotateOutUpRight { 2525 | from { 2526 | -webkit-transform-origin: right bottom; 2527 | transform-origin: right bottom; 2528 | opacity: 1; 2529 | } 2530 | 2531 | to { 2532 | -webkit-transform-origin: right bottom; 2533 | transform-origin: right bottom; 2534 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2535 | transform: rotate3d(0, 0, 1, 90deg); 2536 | opacity: 0; 2537 | } 2538 | } 2539 | 2540 | @keyframes rotateOutUpRight { 2541 | from { 2542 | -webkit-transform-origin: right bottom; 2543 | transform-origin: right bottom; 2544 | opacity: 1; 2545 | } 2546 | 2547 | to { 2548 | -webkit-transform-origin: right bottom; 2549 | transform-origin: right bottom; 2550 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2551 | transform: rotate3d(0, 0, 1, 90deg); 2552 | opacity: 0; 2553 | } 2554 | } 2555 | 2556 | .rotateOutUpRight { 2557 | -webkit-animation-name: rotateOutUpRight; 2558 | animation-name: rotateOutUpRight; 2559 | } 2560 | 2561 | @-webkit-keyframes hinge { 2562 | 0% { 2563 | -webkit-transform-origin: top left; 2564 | transform-origin: top left; 2565 | -webkit-animation-timing-function: ease-in-out; 2566 | animation-timing-function: ease-in-out; 2567 | } 2568 | 2569 | 20%, 60% { 2570 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2571 | transform: rotate3d(0, 0, 1, 80deg); 2572 | -webkit-transform-origin: top left; 2573 | transform-origin: top left; 2574 | -webkit-animation-timing-function: ease-in-out; 2575 | animation-timing-function: ease-in-out; 2576 | } 2577 | 2578 | 40%, 80% { 2579 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2580 | transform: rotate3d(0, 0, 1, 60deg); 2581 | -webkit-transform-origin: top left; 2582 | transform-origin: top left; 2583 | -webkit-animation-timing-function: ease-in-out; 2584 | animation-timing-function: ease-in-out; 2585 | opacity: 1; 2586 | } 2587 | 2588 | to { 2589 | -webkit-transform: translate3d(0, 700px, 0); 2590 | transform: translate3d(0, 700px, 0); 2591 | opacity: 0; 2592 | } 2593 | } 2594 | 2595 | @keyframes hinge { 2596 | 0% { 2597 | -webkit-transform-origin: top left; 2598 | transform-origin: top left; 2599 | -webkit-animation-timing-function: ease-in-out; 2600 | animation-timing-function: ease-in-out; 2601 | } 2602 | 2603 | 20%, 60% { 2604 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2605 | transform: rotate3d(0, 0, 1, 80deg); 2606 | -webkit-transform-origin: top left; 2607 | transform-origin: top left; 2608 | -webkit-animation-timing-function: ease-in-out; 2609 | animation-timing-function: ease-in-out; 2610 | } 2611 | 2612 | 40%, 80% { 2613 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2614 | transform: rotate3d(0, 0, 1, 60deg); 2615 | -webkit-transform-origin: top left; 2616 | transform-origin: top left; 2617 | -webkit-animation-timing-function: ease-in-out; 2618 | animation-timing-function: ease-in-out; 2619 | opacity: 1; 2620 | } 2621 | 2622 | to { 2623 | -webkit-transform: translate3d(0, 700px, 0); 2624 | transform: translate3d(0, 700px, 0); 2625 | opacity: 0; 2626 | } 2627 | } 2628 | 2629 | .hinge { 2630 | -webkit-animation-name: hinge; 2631 | animation-name: hinge; 2632 | } 2633 | 2634 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2635 | 2636 | @-webkit-keyframes rollIn { 2637 | from { 2638 | opacity: 0; 2639 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2640 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2641 | } 2642 | 2643 | to { 2644 | opacity: 1; 2645 | -webkit-transform: none; 2646 | transform: none; 2647 | } 2648 | } 2649 | 2650 | @keyframes rollIn { 2651 | from { 2652 | opacity: 0; 2653 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2654 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2655 | } 2656 | 2657 | to { 2658 | opacity: 1; 2659 | -webkit-transform: none; 2660 | transform: none; 2661 | } 2662 | } 2663 | 2664 | .rollIn { 2665 | -webkit-animation-name: rollIn; 2666 | animation-name: rollIn; 2667 | } 2668 | 2669 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2670 | 2671 | @-webkit-keyframes rollOut { 2672 | from { 2673 | opacity: 1; 2674 | } 2675 | 2676 | to { 2677 | opacity: 0; 2678 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2679 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2680 | } 2681 | } 2682 | 2683 | @keyframes rollOut { 2684 | from { 2685 | opacity: 1; 2686 | } 2687 | 2688 | to { 2689 | opacity: 0; 2690 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2691 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2692 | } 2693 | } 2694 | 2695 | .rollOut { 2696 | -webkit-animation-name: rollOut; 2697 | animation-name: rollOut; 2698 | } 2699 | 2700 | @-webkit-keyframes zoomIn { 2701 | from { 2702 | opacity: 0; 2703 | -webkit-transform: scale3d(.3, .3, .3); 2704 | transform: scale3d(.3, .3, .3); 2705 | } 2706 | 2707 | 50% { 2708 | opacity: 1; 2709 | } 2710 | } 2711 | 2712 | @keyframes zoomIn { 2713 | from { 2714 | opacity: 0; 2715 | -webkit-transform: scale3d(.3, .3, .3); 2716 | transform: scale3d(.3, .3, .3); 2717 | } 2718 | 2719 | 50% { 2720 | opacity: 1; 2721 | } 2722 | } 2723 | 2724 | .zoomIn { 2725 | -webkit-animation-name: zoomIn; 2726 | animation-name: zoomIn; 2727 | } 2728 | 2729 | @-webkit-keyframes zoomInDown { 2730 | from { 2731 | opacity: 0; 2732 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2733 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2734 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2735 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2736 | } 2737 | 2738 | 60% { 2739 | opacity: 1; 2740 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2741 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2742 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2743 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2744 | } 2745 | } 2746 | 2747 | @keyframes zoomInDown { 2748 | from { 2749 | opacity: 0; 2750 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2751 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2752 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2753 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2754 | } 2755 | 2756 | 60% { 2757 | opacity: 1; 2758 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2759 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2760 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2761 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2762 | } 2763 | } 2764 | 2765 | .zoomInDown { 2766 | -webkit-animation-name: zoomInDown; 2767 | animation-name: zoomInDown; 2768 | } 2769 | 2770 | @-webkit-keyframes zoomInLeft { 2771 | from { 2772 | opacity: 0; 2773 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2774 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2775 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2776 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2777 | } 2778 | 2779 | 60% { 2780 | opacity: 1; 2781 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2782 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2783 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2784 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2785 | } 2786 | } 2787 | 2788 | @keyframes zoomInLeft { 2789 | from { 2790 | opacity: 0; 2791 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2792 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2793 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2794 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2795 | } 2796 | 2797 | 60% { 2798 | opacity: 1; 2799 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2800 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2801 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2802 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2803 | } 2804 | } 2805 | 2806 | .zoomInLeft { 2807 | -webkit-animation-name: zoomInLeft; 2808 | animation-name: zoomInLeft; 2809 | } 2810 | 2811 | @-webkit-keyframes zoomInRight { 2812 | from { 2813 | opacity: 0; 2814 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2815 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2816 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2817 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2818 | } 2819 | 2820 | 60% { 2821 | opacity: 1; 2822 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2823 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2824 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2825 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2826 | } 2827 | } 2828 | 2829 | @keyframes zoomInRight { 2830 | from { 2831 | opacity: 0; 2832 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2833 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2834 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2835 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2836 | } 2837 | 2838 | 60% { 2839 | opacity: 1; 2840 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2841 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2842 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2843 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2844 | } 2845 | } 2846 | 2847 | .zoomInRight { 2848 | -webkit-animation-name: zoomInRight; 2849 | animation-name: zoomInRight; 2850 | } 2851 | 2852 | @-webkit-keyframes zoomInUp { 2853 | from { 2854 | opacity: 0; 2855 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2856 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2857 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2858 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2859 | } 2860 | 2861 | 60% { 2862 | opacity: 1; 2863 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2864 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2865 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2866 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2867 | } 2868 | } 2869 | 2870 | @keyframes zoomInUp { 2871 | from { 2872 | opacity: 0; 2873 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2874 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2875 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2876 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2877 | } 2878 | 2879 | 60% { 2880 | opacity: 1; 2881 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2882 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2883 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2884 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2885 | } 2886 | } 2887 | 2888 | .zoomInUp { 2889 | -webkit-animation-name: zoomInUp; 2890 | animation-name: zoomInUp; 2891 | } 2892 | 2893 | @-webkit-keyframes zoomOut { 2894 | from { 2895 | opacity: 1; 2896 | } 2897 | 2898 | 50% { 2899 | opacity: 0; 2900 | -webkit-transform: scale3d(.3, .3, .3); 2901 | transform: scale3d(.3, .3, .3); 2902 | } 2903 | 2904 | to { 2905 | opacity: 0; 2906 | } 2907 | } 2908 | 2909 | @keyframes zoomOut { 2910 | from { 2911 | opacity: 1; 2912 | } 2913 | 2914 | 50% { 2915 | opacity: 0; 2916 | -webkit-transform: scale3d(.3, .3, .3); 2917 | transform: scale3d(.3, .3, .3); 2918 | } 2919 | 2920 | to { 2921 | opacity: 0; 2922 | } 2923 | } 2924 | 2925 | .zoomOut { 2926 | -webkit-animation-name: zoomOut; 2927 | animation-name: zoomOut; 2928 | } 2929 | 2930 | @-webkit-keyframes zoomOutDown { 2931 | 40% { 2932 | opacity: 1; 2933 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2934 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2935 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2936 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2937 | } 2938 | 2939 | to { 2940 | opacity: 0; 2941 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2942 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2943 | -webkit-transform-origin: center bottom; 2944 | transform-origin: center bottom; 2945 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2946 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2947 | } 2948 | } 2949 | 2950 | @keyframes zoomOutDown { 2951 | 40% { 2952 | opacity: 1; 2953 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2954 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2955 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2956 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2957 | } 2958 | 2959 | to { 2960 | opacity: 0; 2961 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2962 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2963 | -webkit-transform-origin: center bottom; 2964 | transform-origin: center bottom; 2965 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2966 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2967 | } 2968 | } 2969 | 2970 | .zoomOutDown { 2971 | -webkit-animation-name: zoomOutDown; 2972 | animation-name: zoomOutDown; 2973 | } 2974 | 2975 | @-webkit-keyframes zoomOutLeft { 2976 | 40% { 2977 | opacity: 1; 2978 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2979 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2980 | } 2981 | 2982 | to { 2983 | opacity: 0; 2984 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2985 | transform: scale(.1) translate3d(-2000px, 0, 0); 2986 | -webkit-transform-origin: left center; 2987 | transform-origin: left center; 2988 | } 2989 | } 2990 | 2991 | @keyframes zoomOutLeft { 2992 | 40% { 2993 | opacity: 1; 2994 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2995 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2996 | } 2997 | 2998 | to { 2999 | opacity: 0; 3000 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 3001 | transform: scale(.1) translate3d(-2000px, 0, 0); 3002 | -webkit-transform-origin: left center; 3003 | transform-origin: left center; 3004 | } 3005 | } 3006 | 3007 | .zoomOutLeft { 3008 | -webkit-animation-name: zoomOutLeft; 3009 | animation-name: zoomOutLeft; 3010 | } 3011 | 3012 | @-webkit-keyframes zoomOutRight { 3013 | 40% { 3014 | opacity: 1; 3015 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3016 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3017 | } 3018 | 3019 | to { 3020 | opacity: 0; 3021 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 3022 | transform: scale(.1) translate3d(2000px, 0, 0); 3023 | -webkit-transform-origin: right center; 3024 | transform-origin: right center; 3025 | } 3026 | } 3027 | 3028 | @keyframes zoomOutRight { 3029 | 40% { 3030 | opacity: 1; 3031 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3032 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3033 | } 3034 | 3035 | to { 3036 | opacity: 0; 3037 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 3038 | transform: scale(.1) translate3d(2000px, 0, 0); 3039 | -webkit-transform-origin: right center; 3040 | transform-origin: right center; 3041 | } 3042 | } 3043 | 3044 | .zoomOutRight { 3045 | -webkit-animation-name: zoomOutRight; 3046 | animation-name: zoomOutRight; 3047 | } 3048 | 3049 | @-webkit-keyframes zoomOutUp { 3050 | 40% { 3051 | opacity: 1; 3052 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3053 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3054 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3055 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3056 | } 3057 | 3058 | to { 3059 | opacity: 0; 3060 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3061 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3062 | -webkit-transform-origin: center bottom; 3063 | transform-origin: center bottom; 3064 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3065 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3066 | } 3067 | } 3068 | 3069 | @keyframes zoomOutUp { 3070 | 40% { 3071 | opacity: 1; 3072 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3073 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3074 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3075 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3076 | } 3077 | 3078 | to { 3079 | opacity: 0; 3080 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3081 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3082 | -webkit-transform-origin: center bottom; 3083 | transform-origin: center bottom; 3084 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3085 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3086 | } 3087 | } 3088 | 3089 | .zoomOutUp { 3090 | -webkit-animation-name: zoomOutUp; 3091 | animation-name: zoomOutUp; 3092 | } 3093 | 3094 | @-webkit-keyframes slideInDown { 3095 | from { 3096 | -webkit-transform: translate3d(0, -100%, 0); 3097 | transform: translate3d(0, -100%, 0); 3098 | visibility: visible; 3099 | } 3100 | 3101 | to { 3102 | -webkit-transform: translate3d(0, 0, 0); 3103 | transform: translate3d(0, 0, 0); 3104 | } 3105 | } 3106 | 3107 | @keyframes slideInDown { 3108 | from { 3109 | -webkit-transform: translate3d(0, -100%, 0); 3110 | transform: translate3d(0, -100%, 0); 3111 | visibility: visible; 3112 | } 3113 | 3114 | to { 3115 | -webkit-transform: translate3d(0, 0, 0); 3116 | transform: translate3d(0, 0, 0); 3117 | } 3118 | } 3119 | 3120 | .slideInDown { 3121 | -webkit-animation-name: slideInDown; 3122 | animation-name: slideInDown; 3123 | } 3124 | 3125 | @-webkit-keyframes slideInLeft { 3126 | from { 3127 | -webkit-transform: translate3d(-100%, 0, 0); 3128 | transform: translate3d(-100%, 0, 0); 3129 | visibility: visible; 3130 | } 3131 | 3132 | to { 3133 | -webkit-transform: translate3d(0, 0, 0); 3134 | transform: translate3d(0, 0, 0); 3135 | } 3136 | } 3137 | 3138 | @keyframes slideInLeft { 3139 | from { 3140 | -webkit-transform: translate3d(-100%, 0, 0); 3141 | transform: translate3d(-100%, 0, 0); 3142 | visibility: visible; 3143 | } 3144 | 3145 | to { 3146 | -webkit-transform: translate3d(0, 0, 0); 3147 | transform: translate3d(0, 0, 0); 3148 | } 3149 | } 3150 | 3151 | .slideInLeft { 3152 | -webkit-animation-name: slideInLeft; 3153 | animation-name: slideInLeft; 3154 | } 3155 | 3156 | @-webkit-keyframes slideInRight { 3157 | from { 3158 | -webkit-transform: translate3d(100%, 0, 0); 3159 | transform: translate3d(100%, 0, 0); 3160 | visibility: visible; 3161 | } 3162 | 3163 | to { 3164 | -webkit-transform: translate3d(0, 0, 0); 3165 | transform: translate3d(0, 0, 0); 3166 | } 3167 | } 3168 | 3169 | @keyframes slideInRight { 3170 | from { 3171 | -webkit-transform: translate3d(100%, 0, 0); 3172 | transform: translate3d(100%, 0, 0); 3173 | visibility: visible; 3174 | } 3175 | 3176 | to { 3177 | -webkit-transform: translate3d(0, 0, 0); 3178 | transform: translate3d(0, 0, 0); 3179 | } 3180 | } 3181 | 3182 | .slideInRight { 3183 | -webkit-animation-name: slideInRight; 3184 | animation-name: slideInRight; 3185 | } 3186 | 3187 | @-webkit-keyframes slideInUp { 3188 | from { 3189 | -webkit-transform: translate3d(0, 100%, 0); 3190 | transform: translate3d(0, 100%, 0); 3191 | visibility: visible; 3192 | } 3193 | 3194 | to { 3195 | -webkit-transform: translate3d(0, 0, 0); 3196 | transform: translate3d(0, 0, 0); 3197 | } 3198 | } 3199 | 3200 | @keyframes slideInUp { 3201 | from { 3202 | -webkit-transform: translate3d(0, 100%, 0); 3203 | transform: translate3d(0, 100%, 0); 3204 | visibility: visible; 3205 | } 3206 | 3207 | to { 3208 | -webkit-transform: translate3d(0, 0, 0); 3209 | transform: translate3d(0, 0, 0); 3210 | } 3211 | } 3212 | 3213 | .slideInUp { 3214 | -webkit-animation-name: slideInUp; 3215 | animation-name: slideInUp; 3216 | } 3217 | 3218 | @-webkit-keyframes slideOutDown { 3219 | from { 3220 | -webkit-transform: translate3d(0, 0, 0); 3221 | transform: translate3d(0, 0, 0); 3222 | } 3223 | 3224 | to { 3225 | visibility: hidden; 3226 | -webkit-transform: translate3d(0, 100%, 0); 3227 | transform: translate3d(0, 100%, 0); 3228 | } 3229 | } 3230 | 3231 | @keyframes slideOutDown { 3232 | from { 3233 | -webkit-transform: translate3d(0, 0, 0); 3234 | transform: translate3d(0, 0, 0); 3235 | } 3236 | 3237 | to { 3238 | visibility: hidden; 3239 | -webkit-transform: translate3d(0, 100%, 0); 3240 | transform: translate3d(0, 100%, 0); 3241 | } 3242 | } 3243 | 3244 | .slideOutDown { 3245 | -webkit-animation-name: slideOutDown; 3246 | animation-name: slideOutDown; 3247 | } 3248 | 3249 | @-webkit-keyframes slideOutLeft { 3250 | from { 3251 | -webkit-transform: translate3d(0, 0, 0); 3252 | transform: translate3d(0, 0, 0); 3253 | } 3254 | 3255 | to { 3256 | visibility: hidden; 3257 | -webkit-transform: translate3d(-100%, 0, 0); 3258 | transform: translate3d(-100%, 0, 0); 3259 | } 3260 | } 3261 | 3262 | @keyframes slideOutLeft { 3263 | from { 3264 | -webkit-transform: translate3d(0, 0, 0); 3265 | transform: translate3d(0, 0, 0); 3266 | } 3267 | 3268 | to { 3269 | visibility: hidden; 3270 | -webkit-transform: translate3d(-100%, 0, 0); 3271 | transform: translate3d(-100%, 0, 0); 3272 | } 3273 | } 3274 | 3275 | .slideOutLeft { 3276 | -webkit-animation-name: slideOutLeft; 3277 | animation-name: slideOutLeft; 3278 | } 3279 | 3280 | @-webkit-keyframes slideOutRight { 3281 | from { 3282 | -webkit-transform: translate3d(0, 0, 0); 3283 | transform: translate3d(0, 0, 0); 3284 | } 3285 | 3286 | to { 3287 | visibility: hidden; 3288 | -webkit-transform: translate3d(100%, 0, 0); 3289 | transform: translate3d(100%, 0, 0); 3290 | } 3291 | } 3292 | 3293 | @keyframes slideOutRight { 3294 | from { 3295 | -webkit-transform: translate3d(0, 0, 0); 3296 | transform: translate3d(0, 0, 0); 3297 | } 3298 | 3299 | to { 3300 | visibility: hidden; 3301 | -webkit-transform: translate3d(100%, 0, 0); 3302 | transform: translate3d(100%, 0, 0); 3303 | } 3304 | } 3305 | 3306 | .slideOutRight { 3307 | -webkit-animation-name: slideOutRight; 3308 | animation-name: slideOutRight; 3309 | } 3310 | 3311 | @-webkit-keyframes slideOutUp { 3312 | from { 3313 | -webkit-transform: translate3d(0, 0, 0); 3314 | transform: translate3d(0, 0, 0); 3315 | } 3316 | 3317 | to { 3318 | visibility: hidden; 3319 | -webkit-transform: translate3d(0, -100%, 0); 3320 | transform: translate3d(0, -100%, 0); 3321 | } 3322 | } 3323 | 3324 | @keyframes slideOutUp { 3325 | from { 3326 | -webkit-transform: translate3d(0, 0, 0); 3327 | transform: translate3d(0, 0, 0); 3328 | } 3329 | 3330 | to { 3331 | visibility: hidden; 3332 | -webkit-transform: translate3d(0, -100%, 0); 3333 | transform: translate3d(0, -100%, 0); 3334 | } 3335 | } 3336 | 3337 | .slideOutUp { 3338 | -webkit-animation-name: slideOutUp; 3339 | animation-name: slideOutUp; 3340 | } 3341 | --------------------------------------------------------------------------------