├── .gitignore ├── assets ├── logo.png ├── splash.png ├── insects │ ├── bee.gif │ ├── remove.png │ ├── ant_fire.gif │ ├── ant_slow.gif │ ├── ant_stun.gif │ ├── ant_tank.gif │ ├── ant_wall.gif │ ├── ant_hungry.gif │ ├── ant_ninja.gif │ ├── ant_queen.gif │ ├── ant_scuba.gif │ ├── ant_thrower.gif │ ├── ant_bodyguard.gif │ ├── ant_harvester.gif │ ├── ant_longthrower.gif │ └── ant_shortthrower.gif ├── tiles │ ├── sky │ │ ├── 1.png │ │ ├── 2.png │ │ └── 3.png │ └── ground │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ └── water.png ├── swirl_pattern.png ├── main-background.png ├── app.css ├── app.js ├── sweetalert.min.js ├── sweetalert.css └── animate.css ├── README.md ├── state.py ├── gui.html └── gui.py /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.swo 3 | *~ 4 | -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/logo.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/insects/bee.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/bee.gif -------------------------------------------------------------------------------- /assets/tiles/sky/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/tiles/sky/1.png -------------------------------------------------------------------------------- /assets/tiles/sky/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/tiles/sky/2.png -------------------------------------------------------------------------------- /assets/tiles/sky/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/tiles/sky/3.png -------------------------------------------------------------------------------- /assets/insects/remove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/remove.png -------------------------------------------------------------------------------- /assets/swirl_pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/swirl_pattern.png -------------------------------------------------------------------------------- /assets/tiles/ground/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/tiles/ground/1.png -------------------------------------------------------------------------------- /assets/tiles/ground/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/tiles/ground/2.png -------------------------------------------------------------------------------- /assets/tiles/ground/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/tiles/ground/3.png -------------------------------------------------------------------------------- /assets/insects/ant_fire.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_fire.gif -------------------------------------------------------------------------------- /assets/insects/ant_slow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_slow.gif -------------------------------------------------------------------------------- /assets/insects/ant_stun.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_stun.gif -------------------------------------------------------------------------------- /assets/insects/ant_tank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_tank.gif -------------------------------------------------------------------------------- /assets/insects/ant_wall.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_wall.gif -------------------------------------------------------------------------------- /assets/main-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/main-background.png -------------------------------------------------------------------------------- /assets/insects/ant_hungry.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_hungry.gif -------------------------------------------------------------------------------- /assets/insects/ant_ninja.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_ninja.gif -------------------------------------------------------------------------------- /assets/insects/ant_queen.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_queen.gif -------------------------------------------------------------------------------- /assets/insects/ant_scuba.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_scuba.gif -------------------------------------------------------------------------------- /assets/insects/ant_thrower.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_thrower.gif -------------------------------------------------------------------------------- /assets/tiles/ground/water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/tiles/ground/water.png -------------------------------------------------------------------------------- /assets/insects/ant_bodyguard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_bodyguard.gif -------------------------------------------------------------------------------- /assets/insects/ant_harvester.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_harvester.gif -------------------------------------------------------------------------------- /assets/insects/ant_longthrower.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_longthrower.gif -------------------------------------------------------------------------------- /assets/insects/ant_shortthrower.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colinschoen/Ants-Web-Viewer/HEAD/assets/insects/ant_shortthrower.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ants-Web-Viewer 2 | CS61A Ants Project Web GUI 3 | 4 | ## Contributors 5 | 6 | | Name | GitHub | 7 | | ---------------- | ----------------------------------- | 8 | | **Colin Schoen** | [colinschoen](https://github.com/colinschoen)| 9 | | **Matthew Soh** | [msohcw](https://github.com/msohcw)| 10 | -------------------------------------------------------------------------------- /state.py: -------------------------------------------------------------------------------- 1 | class State: 2 | """A State holds a current game state and all of its attributes""" 3 | 4 | def __init__(self): 5 | """Create a new gamestate""" 6 | self.gs = {} 7 | 8 | 9 | def getState(self, key=None): 10 | if key: 11 | return self.gs[key] 12 | return self.gs 13 | 14 | def updateState(self, key, val): 15 | self.gs[key] = val 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: url('swirl_pattern.png') 3 | } 4 | .hero-header { 5 | width: 100%; 6 | height: 780px; 7 | background-image: url('splash.png'); 8 | background-size: cover; 9 | } 10 | .header-text { 11 | color: #FFFFFF; 12 | text-shadow: 4px 4px 2px rgba(76, 74, 74, 1); 13 | } 14 | .logo { 15 | width: 60px; 16 | height: 60px; 17 | float: left; 18 | } 19 | .game-wrapper { 20 | color: #FFFFFF; 21 | width: 100%; 22 | margin-top: 0px; 23 | margin-bottom: -10px; 24 | min-height: 780px; 25 | background-image:url('main-background.png'); 26 | background-size: cover; 27 | } 28 | .game-wrapper h1 { 29 | color: #FFFFFF; 30 | } 31 | .game-wrapper > .container { 32 | margin-top: 50px; 33 | } 34 | 35 | .ants-table { 36 | background-color: #FFFFFF; 37 | } 38 | .ant-row { 39 | background-color: #FFFFFF; 40 | color: #000000; 41 | cursor: pointer; 42 | } 43 | .ant-img { 44 | height: 64px; 45 | width: 64px; 46 | } 47 | .exit-btn { 48 | margin-right: 10px; 49 | } 50 | .fork-frame { 51 | position: absolute; 52 | right: 0px; 53 | top: 20px; 54 | } 55 | .ant-row-divider { 56 | margin-top: 1px; 57 | margin-bottom: 1px; 58 | } 59 | .ant-cost { 60 | width: 64px; 61 | margin: 0 auto; 62 | } 63 | .ant-inactive { 64 | opacity: 0.2 65 | } 66 | .ant-selected { 67 | background-color: #f0ad4e; 68 | } 69 | .tunnel-div { 70 | height: 160px; 71 | width: 80px; 72 | } 73 | .tunnel-img-container { 74 | margin-top: 40px; 75 | margin-left: 10px; 76 | position: absolute; 77 | } 78 | .tunnel-goc-div { 79 | height: 80px; 80 | width: 80px; 81 | } 82 | .places-table { 83 | float: none; 84 | margin: 0 auto; 85 | margin-top: 40px; 86 | margin-bottom: 70px; 87 | } 88 | .hive-td, .places-td { 89 | cursor: pointer; 90 | border: 1px solid #4a474a; 91 | } 92 | .bee-img { 93 | width: 64px; 94 | height: 64px; 95 | } 96 | .active-ant { 97 | position: absolute; 98 | width: 64px; 99 | height: 64px; 100 | } 101 | 102 | .contained-ant{ 103 | position: absolute; 104 | width: 64px; 105 | height: 64px; 106 | } 107 | -------------------------------------------------------------------------------- /gui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Ants Web GUI 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 35 | 36 | 37 | 38 | 39 | 58 | 59 | 86 | 87 |
88 |
89 |
90 |

Ants Web Viewer

91 |

92 |
93 |
94 |
95 | 97 | 98 | 99 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /assets/app.js: -------------------------------------------------------------------------------- 1 | var gui; 2 | $.ajaxSetup({ 3 | async: false, 4 | cache: false, 5 | }); 6 | 7 | function GUI() { 8 | this.oldState; 9 | this.newState; 10 | this.stateInitialised = false; 11 | this.deadbees = []; 12 | this.deadinsects = []; 13 | this.locToAnt = []; 14 | } 15 | 16 | function updateControlPanel() { 17 | tr = $('#antsTableRow'); 18 | tr.find('td').each(function() { 19 | name = $(this).attr('data-name'); 20 | cost = $(this).attr('data-cost'); 21 | disabled = $(this).attr('data-disabled'); 22 | if (disabled == 1 && gui.get_food() >= cost) { 23 | $(this).attr("data-disabled", 0).removeClass("ant-inactive"); 24 | } 25 | else if (disabled == 0 && gui.get_food() < cost) { 26 | $(this).attr("data-disabled", 1).addClass("ant-inactive"); 27 | } 28 | }); 29 | } 30 | function drawControlPanel(food, places, ants) { 31 | tr = $('#antsTableRow'); 32 | for (var id in ants) { 33 | ant = ants[id]; 34 | if (ant["cost"] > food) 35 | tr.append(' ' + ant["name"] + '
' + ant["cost"] + ''); 36 | else 37 | tr.append(' ' + ant["name"] + '
' + ant["cost"] + ''); 38 | } 39 | updateFoodCount(); 40 | drawInitialPlaces(); 41 | } 42 | 43 | function drawInitialPlaces() { 44 | pTable = $('.places-table'); 45 | rows = gui.get_rows(); 46 | places = gui.get_places(); 47 | i = 0; 48 | tr = null; 49 | while (i <= rows) { 50 | pTable.append(''); 51 | tr = pTable.find('#pRow' + i); 52 | for (col in places[i]) { 53 | random_sky = Math.floor(Math.random() * 3) + 1; 54 | random_ground = Math.floor(Math.random() * 3) + 1; 55 | if (places[i][col]["water"] == 1) { 56 | random_ground = "water"; 57 | } 58 | tr.append('
'); 59 | } 60 | if (i == 0) { 61 | rowspan = rows + 1 62 | tr.append('') 63 | td = tr.find('.place-hive-td'); 64 | for (bee in places["Hive"]["insects"]) { 65 | td.append(''); 66 | } 67 | pTable.find('.place-hive-td').html() 68 | } 69 | i += 1; 70 | } 71 | } 72 | 73 | 74 | function updateFoodCount() { 75 | $('#foodCount').html(gui.get_food()); 76 | } 77 | 78 | function startGame() { 79 | gui = new GUI(); 80 | gui.startGame(); 81 | gui.get_gameState(false); 82 | drawControlPanel(gui.get_food(), gui.get_places(), gui.get_antTypes()); 83 | gui.strategyTime = gui.get_strategyTime(); 84 | gui.interval = setInterval(gui.update.bind(gui), 500); 85 | } 86 | 87 | GUI.prototype.startGame = function() { 88 | $.ajax({ 89 | type: 'POST', 90 | url: 'ajax/start/game', 91 | async: false, 92 | }); 93 | } 94 | GUI.prototype.get_localGameState = function() { 95 | return this.newState; 96 | } 97 | GUI.prototype.get_gameState = function() { 98 | t = this; 99 | $.ajax({ 100 | type: 'POST', 101 | url: 'ajax/fetch/state', 102 | async: false, 103 | success: function(state){ 104 | if(!gui.initialised) gui.initialised = true 105 | t.updateState(state); 106 | return state; 107 | } 108 | }) 109 | .fail(function(xhr, tStatus, e) { 110 | if(!gui.initialised){ 111 | setTimeout(gui.get_gameState(), 500) 112 | }else{ 113 | swal({ 114 | title: "Error", 115 | text: e, 116 | type: "error", 117 | showConfirmButton: false, 118 | }); 119 | } 120 | }); 121 | }; 122 | 123 | GUI.prototype.get_winner = function() { 124 | return this.newState["winner"]; 125 | } 126 | GUI.prototype.get_rows = function() { 127 | return this.newState["rows"]; 128 | } 129 | 130 | GUI.prototype.updateState = function(s) { 131 | this.oldState = this.newState; 132 | this.newState = s; 133 | } 134 | 135 | GUI.prototype.get_antTypes = function() { 136 | return this.newState["ant_types"]; 137 | } 138 | 139 | GUI.prototype.get_places = function() { 140 | return this.newState["places"]; 141 | } 142 | 143 | GUI.prototype.get_food = function() { 144 | return this.newState["food"]; 145 | } 146 | GUI.prototype.selectAnt = function(name, img) { 147 | this.selected_ant = { name: name, img: img }; 148 | } 149 | GUI.prototype.get_beeToId = function() { 150 | return this.newState["beeToId"]; 151 | } 152 | GUI.prototype.get_beeLocations = function() { 153 | return this.newState["beeLocations"]; 154 | } 155 | GUI.prototype.get_oldBeeLocations = function() { 156 | return this.oldState["beeLocations"]; 157 | } 158 | GUI.prototype.deselectAnt = function() { 159 | currentSelected = this.get_selectedAnt(); 160 | this.selected_ant = null; 161 | if (currentSelected) { 162 | $('#antsTableRow').find("[data-name = '" + currentSelected["name"] + "']").removeClass("ant-selected"); 163 | } 164 | } 165 | GUI.prototype.get_selectedAnt = function() { 166 | return this.selected_ant; 167 | } 168 | GUI.prototype.get_time = function() { 169 | return this.newState["time"]; 170 | } 171 | GUI.prototype.is_gameOver = function() { 172 | return this.newState["gameOver"]; 173 | } 174 | GUI.prototype.updateTime = function() { 175 | $('#timeCount').html(this.get_time()); 176 | } 177 | GUI.prototype.get_strategyTime = function() { 178 | return this.newState["strategyTime"]; 179 | } 180 | GUI.prototype.get_deadbees = function() { 181 | return this.newState["deadbees"]; 182 | } 183 | GUI.prototype.get_deadinsects = function() { 184 | return this.newState["deadinsects"]; 185 | } 186 | GUI.prototype.clearBoard = function(){ 187 | $(".places-table > tbody").empty(); 188 | } 189 | GUI.prototype.clearAntTypes = function(){ 190 | $("#antsTableRow").empty(); 191 | } 192 | 193 | GUI.prototype.restartGame = function(){ 194 | this.clearBoard(); 195 | this.clearAntTypes(); 196 | startGame(); 197 | } 198 | 199 | $('#antsTableRow').on('click', ".ant-row", function() { 200 | if ($(this).attr('data-disabled') == 1) { 201 | swal({ 202 | title: "Cannot Select " + $(this).attr('data-name') + " Ant", 203 | text: "You do not have enough food.", 204 | type: "error", 205 | }); 206 | return false; 207 | } 208 | currentSelected = gui.get_selectedAnt(); 209 | if (currentSelected) { 210 | $('#antsTableRow').find("[data-name = '" + currentSelected["name"] + "']").removeClass("ant-selected"); 211 | } 212 | $(this).addClass('ant-selected'); 213 | gui.selectAnt($(this).attr('data-name'), $(this).attr('data-img')); 214 | }); 215 | 216 | 217 | $("#playBtn").on('click', function() { 218 | $(this).addClass('animated fadeOutLeft'); 219 | $('#header-title').addClass('animated fadeOutUp'); 220 | $('#hero-head').addClass('animated bounceOutDown').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 221 | $('#hero-head').hide(); 222 | //Load the game wrapper and bg 223 | $('#gameWrapper').show().addClass('animated bounceInDown'); 224 | }); 225 | startGame(); 226 | }); 227 | 228 | $('#exitBtn').on('click', function() { 229 | clearInterval(gui.interval); 230 | $.post("ajax/exit"); 231 | swal({ 232 | title: "Terminated", 233 | text: "The Web GUI has been killed.", 234 | type: "warning", 235 | showConfirmButton: false, 236 | }); 237 | }); 238 | 239 | $('.places-table').on('click', '.places-td', function() { 240 | //Check to see if an insect is selected 241 | t = this 242 | selectedAnt = gui.get_selectedAnt(); 243 | //Deselect ant 244 | gui.deselectAnt(); 245 | if (!selectedAnt) { 246 | swal({ 247 | title: "Error", 248 | text: "You need to select an insect first.", 249 | type: "error", 250 | }); 251 | } 252 | if (selectedAnt["food"] > gui.get_food()) { 253 | swal({ 254 | title: "Error", 255 | text: "Not enough food remains to place " + selectedAnt["name"], 256 | type: "error", 257 | }); 258 | } 259 | $.ajax({ 260 | method: "POST", 261 | url: "ajax/deploy/ant", 262 | data: { pname: $(this).attr("data-name"), ant: selectedAnt["name"]}, 263 | }) 264 | .done(function(response) { 265 | if (response["error"]) { 266 | swal({ 267 | title: "Error", 268 | text: response["error"], 269 | type: "error", 270 | }); 271 | } 272 | else { 273 | //$(t).find('.tunnel-img-container').html(''); 274 | r = $(t).attr("data-row"); 275 | c = $(t).attr("data-col"); 276 | if (!gui.locToAnt[r]) gui.locToAnt[r] = []; 277 | if(!gui.locToAnt[r][c]){ 278 | gui.locToAnt[r][c] = [response["id"]]; 279 | }else{ 280 | // container 281 | gui.locToAnt[r][c].unshift(response["id"]); 282 | } 283 | gui.update(); 284 | } 285 | }); 286 | }); 287 | 288 | GUI.prototype.moveBees = function() { 289 | newLocation = this.get_beeLocations(); 290 | oldLocation = this.get_oldBeeLocations(); 291 | for (bee in oldLocation) { 292 | if (oldLocation[bee] != newLocation[bee]) { 293 | loc = $('.places-table').find('td[data-name="' + newLocation[bee] + '"]'); 294 | img = $('.bee-img[data-id="' + bee + '"]'); 295 | if (img.css("position") != "absolute") { 296 | $('.place-hive-td').css({width: $('.place-hive-td').width()}); 297 | currentLocTop = img.position().top; 298 | currentLocLeft = img.position().left; 299 | img.css({"margin-top": "40px", "top": currentLocTop, "left": currentLocLeft, "position": "absolute"}); 300 | } 301 | position = loc.position(); 302 | img.animate(position, 1000); 303 | } 304 | } 305 | db = this.get_deadbees(); 306 | for (b in db) { 307 | if ($.inArray(db[b], this.deadbees) == -1) { 308 | //We have some bee killing to do 309 | $('.bee-img[data-id="' + db[b] + '"]').hide("explode", {pieces: 16}, 1000); 310 | this.deadbees.push(db[b]); 311 | } 312 | } 313 | } 314 | 315 | GUI.prototype.removeAnts = function() { 316 | di = this.get_deadinsects(); 317 | for (a in di) { 318 | if ($.inArray(a, this.deadinsects) == -1) { 319 | //We have some ant killing to do lol -CS 320 | 321 | img = $('.places-table').find('.active-ant[data-id="' + di[a] + '"]') 322 | img.hide("explode", {pieces: 16}, 1000); 323 | if(img[0]){ 324 | td = img[0].closest("td"); 325 | r = $(td).attr("data-row"); 326 | c = $(td).attr("data-col"); 327 | gui.locToAnt[r][c].shift(); 328 | } 329 | this.deadinsects.push(di[a]); 330 | } 331 | } 332 | } 333 | GUI.prototype.update = function() { 334 | if (this.is_gameOver()) { 335 | clearInterval(this.interval); 336 | if (gui.get_winner()) { 337 | swal({ 338 | title: "Congratulations", 339 | text: "You successfully defeated the bees!", 340 | type: "success", 341 | confirmButtonColor: "#0b752b", 342 | confirmButtonText: "Restart?" 343 | }, 344 | this.restartGame.bind(this) 345 | ); 346 | } else { 347 | swal({ 348 | title: "Tough Luck", 349 | text: "You lost and the bees live on.", 350 | type: "warning", 351 | confirmButtonColor: "#0b752b", 352 | confirmButtonText: "Restart?" 353 | }, 354 | this.restartGame.bind(this) 355 | ); 356 | } 357 | return; 358 | } 359 | this.get_gameState(); 360 | updateControlPanel(); 361 | this.updateTime(); 362 | updateFoodCount(); 363 | this.moveBees(); 364 | this.removeAnts(); 365 | places = this.get_places(); 366 | for (r in places) { 367 | if (r == "Hive") { 368 | continue; 369 | } 370 | for (c in places[r]) { 371 | if ("type" in places[r][c]["insects"]) { 372 | ant = places[r][c]["insects"]; 373 | antImgTag = make_img_tag(ant["img"],{"data-id":gui.locToAnt[r][c][0], "class":"active-ant", "container":ant["container"]}) 374 | if(ant["container"] && ant["contains"]){ 375 | antImgTag = make_img_tag(places[r][c]["insects"]["contains"]["img"], {"class":"contained-ant"}) + antImgTag; 376 | } 377 | $('.places-table').find('.places-td[data-row="' + r + '"][data-col="' + c + '"]').find('.tunnel-img-container').html(antImgTag); 378 | } 379 | } 380 | } 381 | } 382 | 383 | GUI.prototype.fireOff = function(){ 384 | beeLocations = this.get_beeLocations(); 385 | beeGrid = [] 386 | places = this.oldState.places; 387 | height = keys(places).length - 1; 388 | width = keys(places['0'].length); 389 | ants = []; 390 | for(var i = 0; i < height; ++i){ 391 | beeGrid.push(new Array(width)); 392 | } 393 | for(var i = 0; i < beeLocations.length; ++i){ 394 | location = beeLocations[i].split('_'); 395 | beeGrid[ location[1] ][ location[2] ] = true; 396 | } 397 | for(var i = 0; i < height; ++i){ 398 | for(var j = 0; j < width; ++j){ 399 | ants = location[i+""][j+""]["insects"]; 400 | } 401 | } 402 | } 403 | 404 | // particles.js 405 | function shoot_from(a, b){ 406 | console.log("fired from " + a + " to " + b); 407 | } 408 | 409 | //utils.js 410 | function make_img_tag(src, attributes){ 411 | tag = "" 414 | return tag 415 | } 416 | -------------------------------------------------------------------------------- /assets/sweetalert.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t,n){"use strict";!function o(e,t,n){function a(s,l){if(!t[s]){if(!e[s]){var i="function"==typeof require&&require;if(!l&&i)return i(s,!0);if(r)return r(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var c=t[s]={exports:{}};e[s][0].call(c.exports,function(t){var n=e[s][1][t];return a(n?n:t)},c,c.exports,o,e,t,n)}return t[s].exports}for(var r="function"==typeof require&&require,s=0;s=0;)n=n.replace(" "+t+" "," ");e.className=n.replace(/^\s+|\s+$/g,"")}},i=function(e){var n=t.createElement("div");return n.appendChild(t.createTextNode(e)),n.innerHTML},u=function(e){e.style.opacity="",e.style.display="block"},c=function(e){if(e&&!e.length)return u(e);for(var t=0;t0?setTimeout(o,t):e.style.display="none"});o()},h=function(n){if("function"==typeof MouseEvent){var o=new MouseEvent("click",{view:e,bubbles:!1,cancelable:!0});n.dispatchEvent(o)}else if(t.createEvent){var a=t.createEvent("MouseEvents");a.initEvent("click",!1,!1),n.dispatchEvent(a)}else t.createEventObject?n.fireEvent("onclick"):"function"==typeof n.onclick&&n.onclick()},g=function(t){"function"==typeof t.stopPropagation?(t.stopPropagation(),t.preventDefault()):e.event&&e.event.hasOwnProperty("cancelBubble")&&(e.event.cancelBubble=!0)};a.hasClass=r,a.addClass=s,a.removeClass=l,a.escapeHtml=i,a._show=u,a.show=c,a._hide=d,a.hide=f,a.isDescendant=p,a.getTopMargin=m,a.fadeIn=v,a.fadeOut=y,a.fireClick=h,a.stopEventPropagation=g},{}],5:[function(t,o,a){Object.defineProperty(a,"__esModule",{value:!0});var r=t("./handle-dom"),s=t("./handle-swal-dom"),l=function(t,o,a){var l=t||e.event,i=l.keyCode||l.which,u=a.querySelector("button.confirm"),c=a.querySelector("button.cancel"),d=a.querySelectorAll("button[tabindex]");if(-1!==[9,13,32,27].indexOf(i)){for(var f=l.target||l.srcElement,p=-1,m=0;m"),i.innerHTML=e.html?e.text:s.escapeHtml(e.text||"").split("\n").join("
"),e.text&&s.show(i),e.customClass)s.addClass(t,e.customClass),t.setAttribute("data-custom-class",e.customClass);else{var d=t.getAttribute("data-custom-class");s.removeClass(t,d),t.setAttribute("data-custom-class","")}if(s.hide(t.querySelectorAll(".sa-icon")),e.type&&!a.isIE8()){var f=function(){for(var o=!1,a=0;ao;o++)n=parseInt(e.substr(2*o,2),16),n=Math.round(Math.min(Math.max(0,n+n*t),255)).toString(16),a+=("00"+n).substr(n.length);return a};o.extend=a,o.hexToRgb=r,o.isIE8=s,o.logStr=l,o.colorLuminance=i},{}]},{},[1]),"function"==typeof define&&define.amd?define(function(){return sweetAlert}):"undefined"!=typeof module&&module.exports&&(module.exports=sweetAlert)}(window,document); -------------------------------------------------------------------------------- /gui.py: -------------------------------------------------------------------------------- 1 | import ants 2 | import utils 3 | import state 4 | import json 5 | import distutils.core 6 | import urllib.request 7 | import os 8 | import shutil 9 | import zipfile 10 | import threading 11 | import importlib 12 | from time import sleep 13 | from ucb import * 14 | 15 | VERSION = 1.2 16 | ASSETS_DIR = "assets/" 17 | INSECT_DIR = "insects/" 18 | STRATEGY_SECONDS = 3 19 | INSECT_FILES = { 20 | 'Worker': ASSETS_DIR + INSECT_DIR + "ant_harvester.gif", 21 | 'Thrower': ASSETS_DIR + INSECT_DIR + "ant_thrower.gif", 22 | 'Long': ASSETS_DIR + INSECT_DIR + "ant_longthrower.gif", 23 | 'Short': ASSETS_DIR + INSECT_DIR + "ant_shortthrower.gif", 24 | 'Harvester': ASSETS_DIR + INSECT_DIR + "ant_harvester.gif", 25 | 'Fire': ASSETS_DIR + INSECT_DIR + "ant_fire.gif", 26 | 'Bodyguard': ASSETS_DIR + INSECT_DIR + "ant_bodyguard.gif", 27 | 'Hungry': ASSETS_DIR + INSECT_DIR + "ant_hungry.gif", 28 | 'Slow': ASSETS_DIR + INSECT_DIR + "ant_slow.gif", 29 | 'Stun': ASSETS_DIR + INSECT_DIR + "ant_stun.gif", 30 | 'Ninja': ASSETS_DIR + INSECT_DIR + "ant_ninja.gif", 31 | 'Wall': ASSETS_DIR + INSECT_DIR + "ant_wall.gif", 32 | 'Scuba': ASSETS_DIR + INSECT_DIR + "ant_scuba.gif", 33 | 'Queen': ASSETS_DIR + INSECT_DIR + "ant_queen.gif", 34 | 'Tank': ASSETS_DIR + INSECT_DIR + "ant_tank.gif", 35 | 'Bee': ASSETS_DIR + INSECT_DIR + "bee.gif", 36 | 'Remover': ASSETS_DIR + INSECT_DIR + "remove.png", 37 | } 38 | 39 | class GUI: 40 | """Browser based GUI that communicates with Python game engine""" 41 | 42 | def __init__(self): 43 | self.active = True 44 | self.cleanState(); 45 | 46 | def cleanState(self): 47 | self.initialized = False 48 | self.state = state.State() 49 | self.gameOver = False 50 | self.colony = None 51 | self.currentBeeId = 0 52 | self.currentInsectId = 0 53 | self.insects = [] 54 | self.bees = [] 55 | self.deadbees = [] 56 | self.deadinsects = [] 57 | self.insectToId = {} 58 | self.beeToId = {} 59 | self.beeLocations = {} 60 | 61 | def makeHooks(self): 62 | ants.Insect.reduce_armor = utils.class_method_wrapper(ants.Insect.reduce_armor, post=dead_insects) 63 | ants.AntColony.remove_ant = utils.class_method_wrapper(ants.AntColony.remove_ant, post=removed_ant) 64 | 65 | 66 | def newGameThread(self): 67 | print("Trying to start new game") 68 | self.cleanState() # resets GUI state 69 | importlib.reload(ants) # resets ants, e.g. with newly implemented Ants 70 | self.makeHooks() 71 | 72 | self.winner = ants.start_with_strategy(gui.args, gui.strategy) 73 | self.gameOver = True 74 | self.saveState("winner", self.winner) 75 | self.saveState("gameOver", self.gameOver) 76 | # self.killGUI() 77 | update() 78 | 79 | def killGUI(self): 80 | self.active = False 81 | 82 | def startGame(self, data=None): 83 | threading.Thread(target=self.newGameThread).start() 84 | print("Game started") 85 | 86 | def exit(self, data=None): 87 | self.active = False 88 | 89 | def initialize_colony_graphics(self, colony): 90 | self.colony = colony 91 | self.ant_type_selected = -1 92 | self.saveState("strategyTime", STRATEGY_SECONDS) 93 | self.saveState("food", self.colony.food) 94 | self.ant_types = self.get_ant_types() 95 | self._init_places(colony) 96 | self.saveState("places", self.places) 97 | #Finally log that we are initialized 98 | self.initialized = True 99 | 100 | def get_ant_types(self, noSave=False): 101 | ant_types = []; 102 | for name, ant_type in self.colony.ant_types.items(): 103 | ant_types.append({"name": name, "cost": ant_type.food_cost, "img": self.get_insect_img_file(name)}) 104 | 105 | #Sort by cost 106 | ant_types.sort(key=lambda item: item["cost"]) 107 | 108 | if not noSave: 109 | self.saveState("ant_types", ant_types) 110 | return ant_types 111 | 112 | def get_insect_img_file(self, name): 113 | return INSECT_FILES[name] 114 | 115 | def getState(self, data=None): 116 | """Get our message from JSON""" 117 | return self.state.getState() 118 | 119 | def saveState(self, key, val): 120 | """Saves our game object to JSON file""" 121 | self.state.updateState(key, val) 122 | 123 | def strategy(self, colony): 124 | """The strategy function is called by ants.AntColony each turn""" 125 | #Have we initialized our graphics yet? 126 | if not self.initialized: 127 | #No, so do that now 128 | self.initialize_colony_graphics(colony) 129 | elapsed = 0 #Physical time elapsed this turn 130 | self.saveState("time", int(elapsed)) 131 | while elapsed < STRATEGY_SECONDS: 132 | self.saveState("time", colony.time) 133 | self._update_control_panel(colony) 134 | sleep(0.25) 135 | elapsed += 0.25 136 | 137 | def get_place_row(self, name): 138 | return name.split("_")[1] 139 | 140 | def get_place_column(self, name): 141 | return name.split("_")[2] 142 | 143 | def _init_places(self, colony): 144 | """Calculate all of our place data""" 145 | self.places = {}; 146 | self.images = { 'AntQueen': dict() } 147 | rows = 0 148 | cols = 0 149 | for name, place in colony.places.items(): 150 | if place.name == 'Hive': 151 | continue 152 | pCol = self.get_place_column(name) 153 | pRow = self.get_place_row(name) 154 | if place.exit.name == 'AntQueen': 155 | rows += 1 156 | if not pRow in self.places: 157 | self.places[pRow] = {} 158 | self.places[pRow][pCol] = { "name": name, "type": "tunnel", "water": 0, "insects": {} } 159 | if "water" in name: 160 | self.places[pRow][pCol]["water"] = 1 161 | self.images[name] = dict() 162 | #Add the Hive 163 | self.places[colony.hive.name] = { "name": name, "type": "hive", "water": 0, "insects": {} } 164 | self.places[colony.hive.name]["insects"] = [] 165 | for bee in colony.hive.bees: 166 | self.places[colony.hive.name]["insects"].append({"id": self.currentBeeId, "type": "bee"}) 167 | self.beeToId[bee] = self.currentBeeId 168 | self.currentBeeId += 1 169 | self.saveState("rows", rows) 170 | self.saveState("places", self.places); 171 | 172 | 173 | def update_food(self): 174 | self.saveState("food", self.colony.food) 175 | 176 | def _update_control_panel(self, colony): 177 | """Reflect the game state in the play area.""" 178 | self.update_food() 179 | old_insects = self.insects[:] 180 | old_bees = self.bees[:] 181 | self.bees, self.insects = [], [] 182 | for name, place in colony.places.items(): 183 | if place.name == 'Hive': 184 | continue 185 | pCol = self.get_place_column(name) 186 | pRow = self.get_place_row(name) 187 | if place.ant is not None: 188 | if self.insectToId[place.ant] not in self.insects: 189 | #Add this ant to our internal list of insects 190 | self.insects.append(self.insectToId[place.ant]) 191 | #Ok there is an ant that needs to be drawn here 192 | self.places[pRow][pCol]["insects"] = { 193 | "id": self.insectToId[place.ant], 194 | "type": place.ant.name, 195 | "img": self.get_insect_img_file(place.ant.name) 196 | } 197 | # Check if it's a container ant 198 | if hasattr(place.ant, "container"): 199 | self.places[pRow][pCol]["insects"]["container"] = place.ant.container 200 | if place.ant.container and place.ant.ant: 201 | self.places[pRow][pCol]["insects"]["contains"] = { 202 | "type": place.ant.ant.name, 203 | "img": self.get_insect_img_file(place.ant.ant.name) 204 | } 205 | else: 206 | self.places[pRow][pCol]["insects"] = {} 207 | #Loop through our bees 208 | for bee in place.bees: 209 | self.beeLocations[self.beeToId[bee]] = name 210 | if self.beeToId[bee] not in self.bees: 211 | self.bees.append(self.beeToId[bee]) 212 | #Save our new bee locations to our game state 213 | self.saveState("beeLocations", self.beeLocations) 214 | 215 | def deployAnt(self, data): 216 | #Check to see if the ant is a remover. If so we need to remove the ant in pname 217 | pname, ant = data["pname"], data["ant"] 218 | if ant == "Remover": 219 | existing_ant = self.colony.places[pname].ant 220 | if existing_ant is not None: 221 | print("colony.remove_ant('{0}')".format(pname)) 222 | self.colony.remove_ant(pname) 223 | return 224 | insect = None 225 | try: 226 | print("colony.deploy_ant('{0}', '{1}')".format(pname, ant)) 227 | insect = self.colony.deploy_ant(pname, ant); 228 | except Exception as e: 229 | print(e) 230 | return { "error": str(e) } 231 | if not insect: 232 | return { "error" : "Unable to deploy ant" } 233 | id = self.currentInsectId 234 | self.insects.append(id) 235 | self.insectToId[insect] = id 236 | self.currentInsectId += 1 237 | self._update_control_panel(self.colony); 238 | return { "success": 1, "id": id } 239 | 240 | import http.server 241 | import cgi 242 | class HttpHandler(http.server.SimpleHTTPRequestHandler): 243 | #Override the default do_POST method 244 | def log_message(self, format, *args): 245 | #I hate this console output so simply do nothing. 246 | return 247 | def cgiFieldStorageToDict(self, fieldStorage): 248 | """ Get a plain dictionary rather than the '.value' system used by the 249 | cgi module's native fieldStorage class. """ 250 | params = {} 251 | for key in fieldStorage.keys(): 252 | params[key] = fieldStorage[key].value 253 | return params 254 | 255 | def do_POST(self): 256 | path = self.path 257 | action = { 258 | '/ajax/fetch/state': gui.getState, 259 | '/ajax/start/game': gui.startGame, 260 | '/ajax/exit': gui.exit, 261 | '/ajax/deploy/ant': gui.deployAnt, 262 | }.get(path) 263 | if not action: 264 | #We could not find a valid route 265 | return 266 | form = cgi.FieldStorage( 267 | fp=self.rfile, 268 | headers=self.headers, 269 | environ={'REQUEST_METHOD':'POST', 270 | 'CONTENT_TYPE':self.headers['Content-Type'], 271 | }) 272 | data = self.cgiFieldStorageToDict(form) 273 | response = action(data) 274 | self.send_response(200) 275 | if response: 276 | self.send_header('Content-Type', 'application/json') 277 | self.end_headers() 278 | response = json.dumps(response) 279 | self.wfile.write(response.encode('ascii')) 280 | 281 | def dead_insects(self, rv, *args): 282 | if self.armor <= 0 and self: 283 | print('{0} ran out of armor and expired'.format(self)) 284 | if self in gui.insectToId: 285 | gui.deadinsects.append(gui.insectToId[self]) 286 | gui.saveState("deadinsects", gui.deadinsects) 287 | elif self in gui.beeToId: 288 | gui.deadbees.append(gui.beeToId[self]) 289 | gui.saveState("deadbees", gui.deadbees) 290 | def removed_ant(self, rv, *args): 291 | r = gui.get_place_row(args[0]) 292 | c = gui.get_place_column(args[0]) 293 | if c in gui.places[r]: 294 | if "id" in gui.places[r][c]["insects"]: 295 | gui.deadinsects.append(gui.places[r][c]["insects"]["id"]) 296 | gui.saveState("deadinsects", gui.deadinsects) 297 | 298 | def update(): 299 | request = urllib.request.Request("https://api.github.com/repos/colinschoen/Ants-Web-Viewer/releases/latest") 300 | data = None 301 | print("Checking for updates...") 302 | try: 303 | response = urllib.request.urlopen(request) 304 | data = json.loads(response.read().decode('utf-8')) 305 | except urllib.request.URLError as e: 306 | print('Unable to check for updates') 307 | 308 | if data: 309 | release_version = float(data["name"]) 310 | if release_version > VERSION: 311 | print("Local version of", VERSION, "is behind remote version of", release_version) 312 | get_update(data["zipball_url"], data["name"]) 313 | else: 314 | print("Local version of", VERSION, "is current with or ahead of remote version of", release_version) 315 | 316 | def get_update(url, version): 317 | request = urllib.request.Request(url) 318 | data = None 319 | print("Downloading new version...") 320 | try: 321 | response = urllib.request.urlopen(request) 322 | with open(version + ".zip", 'wb') as f: 323 | f.write(response.read()) 324 | f = zipfile.ZipFile(version + ".zip") 325 | f.extractall(version) 326 | #Delete original archive 327 | os.remove(version + ".zip") 328 | os.chdir(version) 329 | os.chdir(os.listdir()[0]) 330 | files = os.listdir() 331 | dirs = [] 332 | for f in files: 333 | #Skip hidden files and .md files 334 | if f[0] == "." or f[-3:] == ".md": 335 | continue 336 | if os.path.isdir(f): 337 | dirs.append(f) 338 | continue 339 | #Copy the files up two directories 340 | shutil.copy(f, "../../" + f) 341 | for d in dirs: 342 | distutils.dir_util.copy_tree(d, "../../" + d) 343 | #Delete our temp directory 344 | os.chdir('../..') 345 | print("Cleaning up...") 346 | shutil.rmtree(version) 347 | print("Update complete") 348 | 349 | 350 | except Exception as e: 351 | print("Error:", e) 352 | 353 | 354 | 355 | 356 | 357 | import socketserver, socket 358 | class CustomThreadingTCPServer(socketserver.ThreadingTCPServer): 359 | def server_bind(self): 360 | self.socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) 361 | self.socket.bind(self.server_address) 362 | 363 | @main 364 | def run(*args): 365 | #Start webserver 366 | import socketserver 367 | import webbrowser 368 | PORT = 8000 369 | global gui 370 | gui = GUI() 371 | gui.args = args 372 | #Basic HTTP Handler 373 | #Handler = http.server.SimpleHTTPRequestHandler 374 | httpd = CustomThreadingTCPServer(("", PORT), HttpHandler) 375 | print("Web Server started @ localhost:" + str(PORT)) 376 | def start_http(): 377 | while gui.active: 378 | httpd.handle_request() 379 | print("Web server terminated") 380 | threading.Thread(target=start_http).start() 381 | try: 382 | webbrowser.open("http://localhost:" + str(PORT) + '/gui.html', 2) 383 | except Exception: 384 | print("Unable to automatically open web browser.") 385 | print("Point your browser to http://localhost:" + str(PORT) + '/gui.html') 386 | 387 | -------------------------------------------------------------------------------- /assets/sweetalert.css: -------------------------------------------------------------------------------- 1 | body.stop-scrolling { 2 | height: 100%; 3 | overflow: hidden; } 4 | 5 | .sweet-overlay { 6 | background-color: black; 7 | /* IE8 */ 8 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 9 | /* IE8 */ 10 | background-color: rgba(0, 0, 0, 0.4); 11 | position: fixed; 12 | left: 0; 13 | right: 0; 14 | top: 0; 15 | bottom: 0; 16 | display: none; 17 | z-index: 10000; } 18 | 19 | .sweet-alert { 20 | background-color: white; 21 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 22 | width: 478px; 23 | padding: 17px; 24 | border-radius: 5px; 25 | text-align: center; 26 | position: fixed; 27 | left: 50%; 28 | top: 50%; 29 | margin-left: -256px; 30 | margin-top: -200px; 31 | overflow: hidden; 32 | display: none; 33 | z-index: 99999; } 34 | @media all and (max-width: 540px) { 35 | .sweet-alert { 36 | width: auto; 37 | margin-left: 0; 38 | margin-right: 0; 39 | left: 15px; 40 | right: 15px; } } 41 | .sweet-alert h2 { 42 | color: #575757; 43 | font-size: 30px; 44 | text-align: center; 45 | font-weight: 600; 46 | text-transform: none; 47 | position: relative; 48 | margin: 25px 0; 49 | padding: 0; 50 | line-height: 40px; 51 | display: block; } 52 | .sweet-alert p { 53 | color: #797979; 54 | font-size: 16px; 55 | text-align: center; 56 | font-weight: 300; 57 | position: relative; 58 | text-align: inherit; 59 | float: none; 60 | margin: 0; 61 | padding: 0; 62 | line-height: normal; } 63 | .sweet-alert fieldset { 64 | border: none; 65 | position: relative; } 66 | .sweet-alert .sa-error-container { 67 | background-color: #f1f1f1; 68 | margin-left: -17px; 69 | margin-right: -17px; 70 | overflow: hidden; 71 | padding: 0 10px; 72 | max-height: 0; 73 | webkit-transition: padding 0.15s, max-height 0.15s; 74 | transition: padding 0.15s, max-height 0.15s; } 75 | .sweet-alert .sa-error-container.show { 76 | padding: 10px 0; 77 | max-height: 100px; 78 | webkit-transition: padding 0.2s, max-height 0.2s; 79 | transition: padding 0.25s, max-height 0.25s; } 80 | .sweet-alert .sa-error-container .icon { 81 | display: inline-block; 82 | width: 24px; 83 | height: 24px; 84 | border-radius: 50%; 85 | background-color: #ea7d7d; 86 | color: white; 87 | line-height: 24px; 88 | text-align: center; 89 | margin-right: 3px; } 90 | .sweet-alert .sa-error-container p { 91 | display: inline-block; } 92 | .sweet-alert .sa-input-error { 93 | position: absolute; 94 | top: 29px; 95 | right: 26px; 96 | width: 20px; 97 | height: 20px; 98 | opacity: 0; 99 | -webkit-transform: scale(0.5); 100 | transform: scale(0.5); 101 | -webkit-transform-origin: 50% 50%; 102 | transform-origin: 50% 50%; 103 | -webkit-transition: all 0.1s; 104 | transition: all 0.1s; } 105 | .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after { 106 | content: ""; 107 | width: 20px; 108 | height: 6px; 109 | background-color: #f06e57; 110 | border-radius: 3px; 111 | position: absolute; 112 | top: 50%; 113 | margin-top: -4px; 114 | left: 50%; 115 | margin-left: -9px; } 116 | .sweet-alert .sa-input-error::before { 117 | -webkit-transform: rotate(-45deg); 118 | transform: rotate(-45deg); } 119 | .sweet-alert .sa-input-error::after { 120 | -webkit-transform: rotate(45deg); 121 | transform: rotate(45deg); } 122 | .sweet-alert .sa-input-error.show { 123 | opacity: 1; 124 | -webkit-transform: scale(1); 125 | transform: scale(1); } 126 | .sweet-alert input { 127 | width: 100%; 128 | box-sizing: border-box; 129 | border-radius: 3px; 130 | border: 1px solid #d7d7d7; 131 | height: 43px; 132 | margin-top: 10px; 133 | margin-bottom: 17px; 134 | font-size: 18px; 135 | box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06); 136 | padding: 0 12px; 137 | display: none; 138 | -webkit-transition: all 0.3s; 139 | transition: all 0.3s; } 140 | .sweet-alert input:focus { 141 | outline: none; 142 | box-shadow: 0px 0px 3px #c4e6f5; 143 | border: 1px solid #b4dbed; } 144 | .sweet-alert input:focus::-moz-placeholder { 145 | transition: opacity 0.3s 0.03s ease; 146 | opacity: 0.5; } 147 | .sweet-alert input:focus:-ms-input-placeholder { 148 | transition: opacity 0.3s 0.03s ease; 149 | opacity: 0.5; } 150 | .sweet-alert input:focus::-webkit-input-placeholder { 151 | transition: opacity 0.3s 0.03s ease; 152 | opacity: 0.5; } 153 | .sweet-alert input::-moz-placeholder { 154 | color: #bdbdbd; } 155 | .sweet-alert input:-ms-input-placeholder { 156 | color: #bdbdbd; } 157 | .sweet-alert input::-webkit-input-placeholder { 158 | color: #bdbdbd; } 159 | .sweet-alert.show-input input { 160 | display: block; } 161 | .sweet-alert button { 162 | background-color: #AEDEF4; 163 | color: white; 164 | border: none; 165 | box-shadow: none; 166 | font-size: 17px; 167 | font-weight: 500; 168 | -webkit-border-radius: 4px; 169 | border-radius: 5px; 170 | padding: 10px 32px; 171 | margin: 26px 5px 0 5px; 172 | cursor: pointer; } 173 | .sweet-alert button:focus { 174 | outline: none; 175 | box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); } 176 | .sweet-alert button:hover { 177 | background-color: #a1d9f2; } 178 | .sweet-alert button:active { 179 | background-color: #81ccee; } 180 | .sweet-alert button.cancel { 181 | background-color: #D0D0D0; } 182 | .sweet-alert button.cancel:hover { 183 | background-color: #c8c8c8; } 184 | .sweet-alert button.cancel:active { 185 | background-color: #b6b6b6; } 186 | .sweet-alert button.cancel:focus { 187 | box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; } 188 | .sweet-alert button::-moz-focus-inner { 189 | border: 0; } 190 | .sweet-alert[data-has-cancel-button=false] button { 191 | box-shadow: none !important; } 192 | .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] { 193 | padding-bottom: 40px; } 194 | .sweet-alert .sa-icon { 195 | width: 80px; 196 | height: 80px; 197 | border: 4px solid gray; 198 | -webkit-border-radius: 40px; 199 | border-radius: 40px; 200 | border-radius: 50%; 201 | margin: 20px auto; 202 | padding: 0; 203 | position: relative; 204 | box-sizing: content-box; } 205 | .sweet-alert .sa-icon.sa-error { 206 | border-color: #F27474; } 207 | .sweet-alert .sa-icon.sa-error .sa-x-mark { 208 | position: relative; 209 | display: block; } 210 | .sweet-alert .sa-icon.sa-error .sa-line { 211 | position: absolute; 212 | height: 5px; 213 | width: 47px; 214 | background-color: #F27474; 215 | display: block; 216 | top: 37px; 217 | border-radius: 2px; } 218 | .sweet-alert .sa-icon.sa-error .sa-line.sa-left { 219 | -webkit-transform: rotate(45deg); 220 | transform: rotate(45deg); 221 | left: 17px; } 222 | .sweet-alert .sa-icon.sa-error .sa-line.sa-right { 223 | -webkit-transform: rotate(-45deg); 224 | transform: rotate(-45deg); 225 | right: 16px; } 226 | .sweet-alert .sa-icon.sa-warning { 227 | border-color: #F8BB86; } 228 | .sweet-alert .sa-icon.sa-warning .sa-body { 229 | position: absolute; 230 | width: 5px; 231 | height: 47px; 232 | left: 50%; 233 | top: 10px; 234 | -webkit-border-radius: 2px; 235 | border-radius: 2px; 236 | margin-left: -2px; 237 | background-color: #F8BB86; } 238 | .sweet-alert .sa-icon.sa-warning .sa-dot { 239 | position: absolute; 240 | width: 7px; 241 | height: 7px; 242 | -webkit-border-radius: 50%; 243 | border-radius: 50%; 244 | margin-left: -3px; 245 | left: 50%; 246 | bottom: 10px; 247 | background-color: #F8BB86; } 248 | .sweet-alert .sa-icon.sa-info { 249 | border-color: #C9DAE1; } 250 | .sweet-alert .sa-icon.sa-info::before { 251 | content: ""; 252 | position: absolute; 253 | width: 5px; 254 | height: 29px; 255 | left: 50%; 256 | bottom: 17px; 257 | border-radius: 2px; 258 | margin-left: -2px; 259 | background-color: #C9DAE1; } 260 | .sweet-alert .sa-icon.sa-info::after { 261 | content: ""; 262 | position: absolute; 263 | width: 7px; 264 | height: 7px; 265 | border-radius: 50%; 266 | margin-left: -3px; 267 | top: 19px; 268 | background-color: #C9DAE1; } 269 | .sweet-alert .sa-icon.sa-success { 270 | border-color: #A5DC86; } 271 | .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after { 272 | content: ''; 273 | -webkit-border-radius: 40px; 274 | border-radius: 40px; 275 | border-radius: 50%; 276 | position: absolute; 277 | width: 60px; 278 | height: 120px; 279 | background: white; 280 | -webkit-transform: rotate(45deg); 281 | transform: rotate(45deg); } 282 | .sweet-alert .sa-icon.sa-success::before { 283 | -webkit-border-radius: 120px 0 0 120px; 284 | border-radius: 120px 0 0 120px; 285 | top: -7px; 286 | left: -33px; 287 | -webkit-transform: rotate(-45deg); 288 | transform: rotate(-45deg); 289 | -webkit-transform-origin: 60px 60px; 290 | transform-origin: 60px 60px; } 291 | .sweet-alert .sa-icon.sa-success::after { 292 | -webkit-border-radius: 0 120px 120px 0; 293 | border-radius: 0 120px 120px 0; 294 | top: -11px; 295 | left: 30px; 296 | -webkit-transform: rotate(-45deg); 297 | transform: rotate(-45deg); 298 | -webkit-transform-origin: 0px 60px; 299 | transform-origin: 0px 60px; } 300 | .sweet-alert .sa-icon.sa-success .sa-placeholder { 301 | width: 80px; 302 | height: 80px; 303 | border: 4px solid rgba(165, 220, 134, 0.2); 304 | -webkit-border-radius: 40px; 305 | border-radius: 40px; 306 | border-radius: 50%; 307 | box-sizing: content-box; 308 | position: absolute; 309 | left: -4px; 310 | top: -4px; 311 | z-index: 2; } 312 | .sweet-alert .sa-icon.sa-success .sa-fix { 313 | width: 5px; 314 | height: 90px; 315 | background-color: white; 316 | position: absolute; 317 | left: 28px; 318 | top: 8px; 319 | z-index: 1; 320 | -webkit-transform: rotate(-45deg); 321 | transform: rotate(-45deg); } 322 | .sweet-alert .sa-icon.sa-success .sa-line { 323 | height: 5px; 324 | background-color: #A5DC86; 325 | display: block; 326 | border-radius: 2px; 327 | position: absolute; 328 | z-index: 2; } 329 | .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { 330 | width: 25px; 331 | left: 14px; 332 | top: 46px; 333 | -webkit-transform: rotate(45deg); 334 | transform: rotate(45deg); } 335 | .sweet-alert .sa-icon.sa-success .sa-line.sa-long { 336 | width: 47px; 337 | right: 8px; 338 | top: 38px; 339 | -webkit-transform: rotate(-45deg); 340 | transform: rotate(-45deg); } 341 | .sweet-alert .sa-icon.sa-custom { 342 | background-size: contain; 343 | border-radius: 0; 344 | border: none; 345 | background-position: center center; 346 | background-repeat: no-repeat; } 347 | 348 | /* 349 | * Animations 350 | */ 351 | @-webkit-keyframes showSweetAlert { 352 | 0% { 353 | transform: scale(0.7); 354 | -webkit-transform: scale(0.7); } 355 | 45% { 356 | transform: scale(1.05); 357 | -webkit-transform: scale(1.05); } 358 | 80% { 359 | transform: scale(0.95); 360 | -webkit-transform: scale(0.95); } 361 | 100% { 362 | transform: scale(1); 363 | -webkit-transform: scale(1); } } 364 | 365 | @keyframes showSweetAlert { 366 | 0% { 367 | transform: scale(0.7); 368 | -webkit-transform: scale(0.7); } 369 | 45% { 370 | transform: scale(1.05); 371 | -webkit-transform: scale(1.05); } 372 | 80% { 373 | transform: scale(0.95); 374 | -webkit-transform: scale(0.95); } 375 | 100% { 376 | transform: scale(1); 377 | -webkit-transform: scale(1); } } 378 | 379 | @-webkit-keyframes hideSweetAlert { 380 | 0% { 381 | transform: scale(1); 382 | -webkit-transform: scale(1); } 383 | 100% { 384 | transform: scale(0.5); 385 | -webkit-transform: scale(0.5); } } 386 | 387 | @keyframes hideSweetAlert { 388 | 0% { 389 | transform: scale(1); 390 | -webkit-transform: scale(1); } 391 | 100% { 392 | transform: scale(0.5); 393 | -webkit-transform: scale(0.5); } } 394 | 395 | @-webkit-keyframes slideFromTop { 396 | 0% { 397 | top: 0%; } 398 | 100% { 399 | top: 50%; } } 400 | 401 | @keyframes slideFromTop { 402 | 0% { 403 | top: 0%; } 404 | 100% { 405 | top: 50%; } } 406 | 407 | @-webkit-keyframes slideToTop { 408 | 0% { 409 | top: 50%; } 410 | 100% { 411 | top: 0%; } } 412 | 413 | @keyframes slideToTop { 414 | 0% { 415 | top: 50%; } 416 | 100% { 417 | top: 0%; } } 418 | 419 | @-webkit-keyframes slideFromBottom { 420 | 0% { 421 | top: 70%; } 422 | 100% { 423 | top: 50%; } } 424 | 425 | @keyframes slideFromBottom { 426 | 0% { 427 | top: 70%; } 428 | 100% { 429 | top: 50%; } } 430 | 431 | @-webkit-keyframes slideToBottom { 432 | 0% { 433 | top: 50%; } 434 | 100% { 435 | top: 70%; } } 436 | 437 | @keyframes slideToBottom { 438 | 0% { 439 | top: 50%; } 440 | 100% { 441 | top: 70%; } } 442 | 443 | .showSweetAlert[data-animation=pop] { 444 | -webkit-animation: showSweetAlert 0.3s; 445 | animation: showSweetAlert 0.3s; } 446 | 447 | .showSweetAlert[data-animation=none] { 448 | -webkit-animation: none; 449 | animation: none; } 450 | 451 | .showSweetAlert[data-animation=slide-from-top] { 452 | -webkit-animation: slideFromTop 0.3s; 453 | animation: slideFromTop 0.3s; } 454 | 455 | .showSweetAlert[data-animation=slide-from-bottom] { 456 | -webkit-animation: slideFromBottom 0.3s; 457 | animation: slideFromBottom 0.3s; } 458 | 459 | .hideSweetAlert[data-animation=pop] { 460 | -webkit-animation: hideSweetAlert 0.2s; 461 | animation: hideSweetAlert 0.2s; } 462 | 463 | .hideSweetAlert[data-animation=none] { 464 | -webkit-animation: none; 465 | animation: none; } 466 | 467 | .hideSweetAlert[data-animation=slide-from-top] { 468 | -webkit-animation: slideToTop 0.4s; 469 | animation: slideToTop 0.4s; } 470 | 471 | .hideSweetAlert[data-animation=slide-from-bottom] { 472 | -webkit-animation: slideToBottom 0.3s; 473 | animation: slideToBottom 0.3s; } 474 | 475 | @-webkit-keyframes animateSuccessTip { 476 | 0% { 477 | width: 0; 478 | left: 1px; 479 | top: 19px; } 480 | 54% { 481 | width: 0; 482 | left: 1px; 483 | top: 19px; } 484 | 70% { 485 | width: 50px; 486 | left: -8px; 487 | top: 37px; } 488 | 84% { 489 | width: 17px; 490 | left: 21px; 491 | top: 48px; } 492 | 100% { 493 | width: 25px; 494 | left: 14px; 495 | top: 45px; } } 496 | 497 | @keyframes animateSuccessTip { 498 | 0% { 499 | width: 0; 500 | left: 1px; 501 | top: 19px; } 502 | 54% { 503 | width: 0; 504 | left: 1px; 505 | top: 19px; } 506 | 70% { 507 | width: 50px; 508 | left: -8px; 509 | top: 37px; } 510 | 84% { 511 | width: 17px; 512 | left: 21px; 513 | top: 48px; } 514 | 100% { 515 | width: 25px; 516 | left: 14px; 517 | top: 45px; } } 518 | 519 | @-webkit-keyframes animateSuccessLong { 520 | 0% { 521 | width: 0; 522 | right: 46px; 523 | top: 54px; } 524 | 65% { 525 | width: 0; 526 | right: 46px; 527 | top: 54px; } 528 | 84% { 529 | width: 55px; 530 | right: 0px; 531 | top: 35px; } 532 | 100% { 533 | width: 47px; 534 | right: 8px; 535 | top: 38px; } } 536 | 537 | @keyframes animateSuccessLong { 538 | 0% { 539 | width: 0; 540 | right: 46px; 541 | top: 54px; } 542 | 65% { 543 | width: 0; 544 | right: 46px; 545 | top: 54px; } 546 | 84% { 547 | width: 55px; 548 | right: 0px; 549 | top: 35px; } 550 | 100% { 551 | width: 47px; 552 | right: 8px; 553 | top: 38px; } } 554 | 555 | @-webkit-keyframes rotatePlaceholder { 556 | 0% { 557 | transform: rotate(-45deg); 558 | -webkit-transform: rotate(-45deg); } 559 | 5% { 560 | transform: rotate(-45deg); 561 | -webkit-transform: rotate(-45deg); } 562 | 12% { 563 | transform: rotate(-405deg); 564 | -webkit-transform: rotate(-405deg); } 565 | 100% { 566 | transform: rotate(-405deg); 567 | -webkit-transform: rotate(-405deg); } } 568 | 569 | @keyframes rotatePlaceholder { 570 | 0% { 571 | transform: rotate(-45deg); 572 | -webkit-transform: rotate(-45deg); } 573 | 5% { 574 | transform: rotate(-45deg); 575 | -webkit-transform: rotate(-45deg); } 576 | 12% { 577 | transform: rotate(-405deg); 578 | -webkit-transform: rotate(-405deg); } 579 | 100% { 580 | transform: rotate(-405deg); 581 | -webkit-transform: rotate(-405deg); } } 582 | 583 | .animateSuccessTip { 584 | -webkit-animation: animateSuccessTip 0.75s; 585 | animation: animateSuccessTip 0.75s; } 586 | 587 | .animateSuccessLong { 588 | -webkit-animation: animateSuccessLong 0.75s; 589 | animation: animateSuccessLong 0.75s; } 590 | 591 | .sa-icon.sa-success.animate::after { 592 | -webkit-animation: rotatePlaceholder 4.25s ease-in; 593 | animation: rotatePlaceholder 4.25s ease-in; } 594 | 595 | @-webkit-keyframes animateErrorIcon { 596 | 0% { 597 | transform: rotateX(100deg); 598 | -webkit-transform: rotateX(100deg); 599 | opacity: 0; } 600 | 100% { 601 | transform: rotateX(0deg); 602 | -webkit-transform: rotateX(0deg); 603 | opacity: 1; } } 604 | 605 | @keyframes animateErrorIcon { 606 | 0% { 607 | transform: rotateX(100deg); 608 | -webkit-transform: rotateX(100deg); 609 | opacity: 0; } 610 | 100% { 611 | transform: rotateX(0deg); 612 | -webkit-transform: rotateX(0deg); 613 | opacity: 1; } } 614 | 615 | .animateErrorIcon { 616 | -webkit-animation: animateErrorIcon 0.5s; 617 | animation: animateErrorIcon 0.5s; } 618 | 619 | @-webkit-keyframes animateXMark { 620 | 0% { 621 | transform: scale(0.4); 622 | -webkit-transform: scale(0.4); 623 | margin-top: 26px; 624 | opacity: 0; } 625 | 50% { 626 | transform: scale(0.4); 627 | -webkit-transform: scale(0.4); 628 | margin-top: 26px; 629 | opacity: 0; } 630 | 80% { 631 | transform: scale(1.15); 632 | -webkit-transform: scale(1.15); 633 | margin-top: -6px; } 634 | 100% { 635 | transform: scale(1); 636 | -webkit-transform: scale(1); 637 | margin-top: 0; 638 | opacity: 1; } } 639 | 640 | @keyframes animateXMark { 641 | 0% { 642 | transform: scale(0.4); 643 | -webkit-transform: scale(0.4); 644 | margin-top: 26px; 645 | opacity: 0; } 646 | 50% { 647 | transform: scale(0.4); 648 | -webkit-transform: scale(0.4); 649 | margin-top: 26px; 650 | opacity: 0; } 651 | 80% { 652 | transform: scale(1.15); 653 | -webkit-transform: scale(1.15); 654 | margin-top: -6px; } 655 | 100% { 656 | transform: scale(1); 657 | -webkit-transform: scale(1); 658 | margin-top: 0; 659 | opacity: 1; } } 660 | 661 | .animateXMark { 662 | -webkit-animation: animateXMark 0.5s; 663 | animation: animateXMark 0.5s; } 664 | 665 | @-webkit-keyframes pulseWarning { 666 | 0% { 667 | border-color: #F8D486; } 668 | 100% { 669 | border-color: #F8BB86; } } 670 | 671 | @keyframes pulseWarning { 672 | 0% { 673 | border-color: #F8D486; } 674 | 100% { 675 | border-color: #F8BB86; } } 676 | 677 | .pulseWarning { 678 | -webkit-animation: pulseWarning 0.75s infinite alternate; 679 | animation: pulseWarning 0.75s infinite alternate; } 680 | 681 | @-webkit-keyframes pulseWarningIns { 682 | 0% { 683 | background-color: #F8D486; } 684 | 100% { 685 | background-color: #F8BB86; } } 686 | 687 | @keyframes pulseWarningIns { 688 | 0% { 689 | background-color: #F8D486; } 690 | 100% { 691 | background-color: #F8BB86; } } 692 | 693 | .pulseWarningIns { 694 | -webkit-animation: pulseWarningIns 0.75s infinite alternate; 695 | animation: pulseWarningIns 0.75s infinite alternate; } 696 | 697 | /* Internet Explorer 9 has some special quirks that are fixed here */ 698 | /* The icons are not animated. */ 699 | /* This file is automatically merged into sweet-alert.min.js through Gulp */ 700 | /* Error icon */ 701 | .sweet-alert .sa-icon.sa-error .sa-line.sa-left { 702 | -ms-transform: rotate(45deg) \9; } 703 | 704 | .sweet-alert .sa-icon.sa-error .sa-line.sa-right { 705 | -ms-transform: rotate(-45deg) \9; } 706 | 707 | /* Success icon */ 708 | .sweet-alert .sa-icon.sa-success { 709 | border-color: transparent\9; } 710 | 711 | .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { 712 | -ms-transform: rotate(45deg) \9; } 713 | 714 | .sweet-alert .sa-icon.sa-success .sa-line.sa-long { 715 | -ms-transform: rotate(-45deg) \9; } 716 | -------------------------------------------------------------------------------- /assets/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | Animate.css - http://daneden.me/animate 5 | Licensed under the MIT license - http://opensource.org/licenses/MIT 6 | 7 | Copyright (c) 2015 Daniel Eden 8 | */ 9 | 10 | .animated { 11 | -webkit-animation-duration: 1s; 12 | animation-duration: 1s; 13 | -webkit-animation-fill-mode: both; 14 | animation-fill-mode: both; 15 | } 16 | 17 | .animated.infinite { 18 | -webkit-animation-iteration-count: infinite; 19 | animation-iteration-count: infinite; 20 | } 21 | 22 | .animated.hinge { 23 | -webkit-animation-duration: 2s; 24 | animation-duration: 2s; 25 | } 26 | 27 | .animated.bounceIn, 28 | .animated.bounceOut { 29 | -webkit-animation-duration: .75s; 30 | animation-duration: .75s; 31 | } 32 | 33 | .animated.flipOutX, 34 | .animated.flipOutY { 35 | -webkit-animation-duration: .75s; 36 | animation-duration: .75s; 37 | } 38 | 39 | @-webkit-keyframes bounce { 40 | 0%, 20%, 53%, 80%, 100% { 41 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 42 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 43 | -webkit-transform: translate3d(0,0,0); 44 | transform: translate3d(0,0,0); 45 | } 46 | 47 | 40%, 43% { 48 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 49 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 50 | -webkit-transform: translate3d(0, -30px, 0); 51 | transform: translate3d(0, -30px, 0); 52 | } 53 | 54 | 70% { 55 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 56 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 57 | -webkit-transform: translate3d(0, -15px, 0); 58 | transform: translate3d(0, -15px, 0); 59 | } 60 | 61 | 90% { 62 | -webkit-transform: translate3d(0,-4px,0); 63 | transform: translate3d(0,-4px,0); 64 | } 65 | } 66 | 67 | @keyframes bounce { 68 | 0%, 20%, 53%, 80%, 100% { 69 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 70 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 71 | -webkit-transform: translate3d(0,0,0); 72 | transform: translate3d(0,0,0); 73 | } 74 | 75 | 40%, 43% { 76 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 77 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 78 | -webkit-transform: translate3d(0, -30px, 0); 79 | transform: translate3d(0, -30px, 0); 80 | } 81 | 82 | 70% { 83 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 84 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 85 | -webkit-transform: translate3d(0, -15px, 0); 86 | transform: translate3d(0, -15px, 0); 87 | } 88 | 89 | 90% { 90 | -webkit-transform: translate3d(0,-4px,0); 91 | transform: translate3d(0,-4px,0); 92 | } 93 | } 94 | 95 | .bounce { 96 | -webkit-animation-name: bounce; 97 | animation-name: bounce; 98 | -webkit-transform-origin: center bottom; 99 | transform-origin: center bottom; 100 | } 101 | 102 | @-webkit-keyframes flash { 103 | 0%, 50%, 100% { 104 | opacity: 1; 105 | } 106 | 107 | 25%, 75% { 108 | opacity: 0; 109 | } 110 | } 111 | 112 | @keyframes flash { 113 | 0%, 50%, 100% { 114 | opacity: 1; 115 | } 116 | 117 | 25%, 75% { 118 | opacity: 0; 119 | } 120 | } 121 | 122 | .flash { 123 | -webkit-animation-name: flash; 124 | animation-name: flash; 125 | } 126 | 127 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 128 | 129 | @-webkit-keyframes pulse { 130 | 0% { 131 | -webkit-transform: scale3d(1, 1, 1); 132 | transform: scale3d(1, 1, 1); 133 | } 134 | 135 | 50% { 136 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 137 | transform: scale3d(1.05, 1.05, 1.05); 138 | } 139 | 140 | 100% { 141 | -webkit-transform: scale3d(1, 1, 1); 142 | transform: scale3d(1, 1, 1); 143 | } 144 | } 145 | 146 | @keyframes pulse { 147 | 0% { 148 | -webkit-transform: scale3d(1, 1, 1); 149 | transform: scale3d(1, 1, 1); 150 | } 151 | 152 | 50% { 153 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 154 | transform: scale3d(1.05, 1.05, 1.05); 155 | } 156 | 157 | 100% { 158 | -webkit-transform: scale3d(1, 1, 1); 159 | transform: scale3d(1, 1, 1); 160 | } 161 | } 162 | 163 | .pulse { 164 | -webkit-animation-name: pulse; 165 | animation-name: pulse; 166 | } 167 | 168 | @-webkit-keyframes rubberBand { 169 | 0% { 170 | -webkit-transform: scale3d(1, 1, 1); 171 | transform: scale3d(1, 1, 1); 172 | } 173 | 174 | 30% { 175 | -webkit-transform: scale3d(1.25, 0.75, 1); 176 | transform: scale3d(1.25, 0.75, 1); 177 | } 178 | 179 | 40% { 180 | -webkit-transform: scale3d(0.75, 1.25, 1); 181 | transform: scale3d(0.75, 1.25, 1); 182 | } 183 | 184 | 50% { 185 | -webkit-transform: scale3d(1.15, 0.85, 1); 186 | transform: scale3d(1.15, 0.85, 1); 187 | } 188 | 189 | 65% { 190 | -webkit-transform: scale3d(.95, 1.05, 1); 191 | transform: scale3d(.95, 1.05, 1); 192 | } 193 | 194 | 75% { 195 | -webkit-transform: scale3d(1.05, .95, 1); 196 | transform: scale3d(1.05, .95, 1); 197 | } 198 | 199 | 100% { 200 | -webkit-transform: scale3d(1, 1, 1); 201 | transform: scale3d(1, 1, 1); 202 | } 203 | } 204 | 205 | @keyframes rubberBand { 206 | 0% { 207 | -webkit-transform: scale3d(1, 1, 1); 208 | transform: scale3d(1, 1, 1); 209 | } 210 | 211 | 30% { 212 | -webkit-transform: scale3d(1.25, 0.75, 1); 213 | transform: scale3d(1.25, 0.75, 1); 214 | } 215 | 216 | 40% { 217 | -webkit-transform: scale3d(0.75, 1.25, 1); 218 | transform: scale3d(0.75, 1.25, 1); 219 | } 220 | 221 | 50% { 222 | -webkit-transform: scale3d(1.15, 0.85, 1); 223 | transform: scale3d(1.15, 0.85, 1); 224 | } 225 | 226 | 65% { 227 | -webkit-transform: scale3d(.95, 1.05, 1); 228 | transform: scale3d(.95, 1.05, 1); 229 | } 230 | 231 | 75% { 232 | -webkit-transform: scale3d(1.05, .95, 1); 233 | transform: scale3d(1.05, .95, 1); 234 | } 235 | 236 | 100% { 237 | -webkit-transform: scale3d(1, 1, 1); 238 | transform: scale3d(1, 1, 1); 239 | } 240 | } 241 | 242 | .rubberBand { 243 | -webkit-animation-name: rubberBand; 244 | animation-name: rubberBand; 245 | } 246 | 247 | @-webkit-keyframes shake { 248 | 0%, 100% { 249 | -webkit-transform: translate3d(0, 0, 0); 250 | transform: translate3d(0, 0, 0); 251 | } 252 | 253 | 10%, 30%, 50%, 70%, 90% { 254 | -webkit-transform: translate3d(-10px, 0, 0); 255 | transform: translate3d(-10px, 0, 0); 256 | } 257 | 258 | 20%, 40%, 60%, 80% { 259 | -webkit-transform: translate3d(10px, 0, 0); 260 | transform: translate3d(10px, 0, 0); 261 | } 262 | } 263 | 264 | @keyframes shake { 265 | 0%, 100% { 266 | -webkit-transform: translate3d(0, 0, 0); 267 | transform: translate3d(0, 0, 0); 268 | } 269 | 270 | 10%, 30%, 50%, 70%, 90% { 271 | -webkit-transform: translate3d(-10px, 0, 0); 272 | transform: translate3d(-10px, 0, 0); 273 | } 274 | 275 | 20%, 40%, 60%, 80% { 276 | -webkit-transform: translate3d(10px, 0, 0); 277 | transform: translate3d(10px, 0, 0); 278 | } 279 | } 280 | 281 | .shake { 282 | -webkit-animation-name: shake; 283 | animation-name: shake; 284 | } 285 | 286 | @-webkit-keyframes swing { 287 | 20% { 288 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 289 | transform: rotate3d(0, 0, 1, 15deg); 290 | } 291 | 292 | 40% { 293 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 294 | transform: rotate3d(0, 0, 1, -10deg); 295 | } 296 | 297 | 60% { 298 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 299 | transform: rotate3d(0, 0, 1, 5deg); 300 | } 301 | 302 | 80% { 303 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 304 | transform: rotate3d(0, 0, 1, -5deg); 305 | } 306 | 307 | 100% { 308 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 309 | transform: rotate3d(0, 0, 1, 0deg); 310 | } 311 | } 312 | 313 | @keyframes swing { 314 | 20% { 315 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 316 | transform: rotate3d(0, 0, 1, 15deg); 317 | } 318 | 319 | 40% { 320 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 321 | transform: rotate3d(0, 0, 1, -10deg); 322 | } 323 | 324 | 60% { 325 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 326 | transform: rotate3d(0, 0, 1, 5deg); 327 | } 328 | 329 | 80% { 330 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 331 | transform: rotate3d(0, 0, 1, -5deg); 332 | } 333 | 334 | 100% { 335 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 336 | transform: rotate3d(0, 0, 1, 0deg); 337 | } 338 | } 339 | 340 | .swing { 341 | -webkit-transform-origin: top center; 342 | transform-origin: top center; 343 | -webkit-animation-name: swing; 344 | animation-name: swing; 345 | } 346 | 347 | @-webkit-keyframes tada { 348 | 0% { 349 | -webkit-transform: scale3d(1, 1, 1); 350 | transform: scale3d(1, 1, 1); 351 | } 352 | 353 | 10%, 20% { 354 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 355 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 356 | } 357 | 358 | 30%, 50%, 70%, 90% { 359 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 360 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 361 | } 362 | 363 | 40%, 60%, 80% { 364 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 365 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 366 | } 367 | 368 | 100% { 369 | -webkit-transform: scale3d(1, 1, 1); 370 | transform: scale3d(1, 1, 1); 371 | } 372 | } 373 | 374 | @keyframes tada { 375 | 0% { 376 | -webkit-transform: scale3d(1, 1, 1); 377 | transform: scale3d(1, 1, 1); 378 | } 379 | 380 | 10%, 20% { 381 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 382 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 383 | } 384 | 385 | 30%, 50%, 70%, 90% { 386 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 387 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 388 | } 389 | 390 | 40%, 60%, 80% { 391 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 392 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 393 | } 394 | 395 | 100% { 396 | -webkit-transform: scale3d(1, 1, 1); 397 | transform: scale3d(1, 1, 1); 398 | } 399 | } 400 | 401 | .tada { 402 | -webkit-animation-name: tada; 403 | animation-name: tada; 404 | } 405 | 406 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 407 | 408 | @-webkit-keyframes wobble { 409 | 0% { 410 | -webkit-transform: none; 411 | transform: none; 412 | } 413 | 414 | 15% { 415 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 416 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 417 | } 418 | 419 | 30% { 420 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 421 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 422 | } 423 | 424 | 45% { 425 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 426 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 427 | } 428 | 429 | 60% { 430 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 431 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 432 | } 433 | 434 | 75% { 435 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 436 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 437 | } 438 | 439 | 100% { 440 | -webkit-transform: none; 441 | transform: none; 442 | } 443 | } 444 | 445 | @keyframes wobble { 446 | 0% { 447 | -webkit-transform: none; 448 | transform: none; 449 | } 450 | 451 | 15% { 452 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 453 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 454 | } 455 | 456 | 30% { 457 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 458 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 459 | } 460 | 461 | 45% { 462 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 463 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 464 | } 465 | 466 | 60% { 467 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 468 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 469 | } 470 | 471 | 75% { 472 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 473 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 474 | } 475 | 476 | 100% { 477 | -webkit-transform: none; 478 | transform: none; 479 | } 480 | } 481 | 482 | .wobble { 483 | -webkit-animation-name: wobble; 484 | animation-name: wobble; 485 | } 486 | 487 | @-webkit-keyframes jello { 488 | 11.1% { 489 | -webkit-transform: none; 490 | transform: none 491 | } 492 | 493 | 22.2% { 494 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 495 | transform: skewX(-12.5deg) skewY(-12.5deg) 496 | } 497 | 33.3% { 498 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 499 | transform: skewX(6.25deg) skewY(6.25deg) 500 | } 501 | 44.4% { 502 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 503 | transform: skewX(-3.125deg) skewY(-3.125deg) 504 | } 505 | 55.5% { 506 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 507 | transform: skewX(1.5625deg) skewY(1.5625deg) 508 | } 509 | 66.6% { 510 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 511 | transform: skewX(-0.78125deg) skewY(-0.78125deg) 512 | } 513 | 77.7% { 514 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 515 | transform: skewX(0.390625deg) skewY(0.390625deg) 516 | } 517 | 88.8% { 518 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 519 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg) 520 | } 521 | 100% { 522 | -webkit-transform: none; 523 | transform: none 524 | } 525 | } 526 | 527 | @keyframes jello { 528 | 11.1% { 529 | -webkit-transform: none; 530 | transform: none 531 | } 532 | 533 | 22.2% { 534 | 535 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 536 | transform: skewX(-12.5deg) skewY(-12.5deg) 537 | } 538 | 33.3% { 539 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 540 | transform: skewX(6.25deg) skewY(6.25deg) 541 | } 542 | 44.4% { 543 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 544 | transform: skewX(-3.125deg) skewY(-3.125deg) 545 | } 546 | 55.5% { 547 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 548 | transform: skewX(1.5625deg) skewY(1.5625deg) 549 | } 550 | 66.6% { 551 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 552 | transform: skewX(-0.78125deg) skewY(-0.78125deg) 553 | } 554 | 77.7% { 555 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 556 | transform: skewX(0.390625deg) skewY(0.390625deg) 557 | } 558 | 88.8% { 559 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 560 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg) 561 | } 562 | 100% { 563 | -webkit-transform: none; 564 | transform: none 565 | } 566 | } 567 | 568 | 569 | 570 | .jello{ 571 | -webkit-animation-name:jello; 572 | animation-name:jello; 573 | -webkit-transform-origin: center; 574 | 575 | transform-origin: center 576 | } 577 | 578 | @-webkit-keyframes bounceIn { 579 | 0%, 20%, 40%, 60%, 80%, 100% { 580 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 581 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 582 | } 583 | 584 | 0% { 585 | opacity: 0; 586 | -webkit-transform: scale3d(.3, .3, .3); 587 | transform: scale3d(.3, .3, .3); 588 | } 589 | 590 | 20% { 591 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 592 | transform: scale3d(1.1, 1.1, 1.1); 593 | } 594 | 595 | 40% { 596 | -webkit-transform: scale3d(.9, .9, .9); 597 | transform: scale3d(.9, .9, .9); 598 | } 599 | 600 | 60% { 601 | opacity: 1; 602 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 603 | transform: scale3d(1.03, 1.03, 1.03); 604 | } 605 | 606 | 80% { 607 | -webkit-transform: scale3d(.97, .97, .97); 608 | transform: scale3d(.97, .97, .97); 609 | } 610 | 611 | 100% { 612 | opacity: 1; 613 | -webkit-transform: scale3d(1, 1, 1); 614 | transform: scale3d(1, 1, 1); 615 | } 616 | } 617 | 618 | @keyframes bounceIn { 619 | 0%, 20%, 40%, 60%, 80%, 100% { 620 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 621 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 622 | } 623 | 624 | 0% { 625 | opacity: 0; 626 | -webkit-transform: scale3d(.3, .3, .3); 627 | transform: scale3d(.3, .3, .3); 628 | } 629 | 630 | 20% { 631 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 632 | transform: scale3d(1.1, 1.1, 1.1); 633 | } 634 | 635 | 40% { 636 | -webkit-transform: scale3d(.9, .9, .9); 637 | transform: scale3d(.9, .9, .9); 638 | } 639 | 640 | 60% { 641 | opacity: 1; 642 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 643 | transform: scale3d(1.03, 1.03, 1.03); 644 | } 645 | 646 | 80% { 647 | -webkit-transform: scale3d(.97, .97, .97); 648 | transform: scale3d(.97, .97, .97); 649 | } 650 | 651 | 100% { 652 | opacity: 1; 653 | -webkit-transform: scale3d(1, 1, 1); 654 | transform: scale3d(1, 1, 1); 655 | } 656 | } 657 | 658 | .bounceIn { 659 | -webkit-animation-name: bounceIn; 660 | animation-name: bounceIn; 661 | } 662 | 663 | @-webkit-keyframes bounceInDown { 664 | 0%, 60%, 75%, 90%, 100% { 665 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 666 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 667 | } 668 | 669 | 0% { 670 | opacity: 0; 671 | -webkit-transform: translate3d(0, -3000px, 0); 672 | transform: translate3d(0, -3000px, 0); 673 | } 674 | 675 | 60% { 676 | opacity: 1; 677 | -webkit-transform: translate3d(0, 25px, 0); 678 | transform: translate3d(0, 25px, 0); 679 | } 680 | 681 | 75% { 682 | -webkit-transform: translate3d(0, -10px, 0); 683 | transform: translate3d(0, -10px, 0); 684 | } 685 | 686 | 90% { 687 | -webkit-transform: translate3d(0, 5px, 0); 688 | transform: translate3d(0, 5px, 0); 689 | } 690 | 691 | 100% { 692 | -webkit-transform: none; 693 | transform: none; 694 | } 695 | } 696 | 697 | @keyframes bounceInDown { 698 | 0%, 60%, 75%, 90%, 100% { 699 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 700 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 701 | } 702 | 703 | 0% { 704 | opacity: 0; 705 | -webkit-transform: translate3d(0, -3000px, 0); 706 | transform: translate3d(0, -3000px, 0); 707 | } 708 | 709 | 60% { 710 | opacity: 1; 711 | -webkit-transform: translate3d(0, 25px, 0); 712 | transform: translate3d(0, 25px, 0); 713 | } 714 | 715 | 75% { 716 | -webkit-transform: translate3d(0, -10px, 0); 717 | transform: translate3d(0, -10px, 0); 718 | } 719 | 720 | 90% { 721 | -webkit-transform: translate3d(0, 5px, 0); 722 | transform: translate3d(0, 5px, 0); 723 | } 724 | 725 | 100% { 726 | -webkit-transform: none; 727 | transform: none; 728 | } 729 | } 730 | 731 | .bounceInDown { 732 | -webkit-animation-name: bounceInDown; 733 | animation-name: bounceInDown; 734 | } 735 | 736 | @-webkit-keyframes bounceInLeft { 737 | 0%, 60%, 75%, 90%, 100% { 738 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 739 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 740 | } 741 | 742 | 0% { 743 | opacity: 0; 744 | -webkit-transform: translate3d(-3000px, 0, 0); 745 | transform: translate3d(-3000px, 0, 0); 746 | } 747 | 748 | 60% { 749 | opacity: 1; 750 | -webkit-transform: translate3d(25px, 0, 0); 751 | transform: translate3d(25px, 0, 0); 752 | } 753 | 754 | 75% { 755 | -webkit-transform: translate3d(-10px, 0, 0); 756 | transform: translate3d(-10px, 0, 0); 757 | } 758 | 759 | 90% { 760 | -webkit-transform: translate3d(5px, 0, 0); 761 | transform: translate3d(5px, 0, 0); 762 | } 763 | 764 | 100% { 765 | -webkit-transform: none; 766 | transform: none; 767 | } 768 | } 769 | 770 | @keyframes bounceInLeft { 771 | 0%, 60%, 75%, 90%, 100% { 772 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 773 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 774 | } 775 | 776 | 0% { 777 | opacity: 0; 778 | -webkit-transform: translate3d(-3000px, 0, 0); 779 | transform: translate3d(-3000px, 0, 0); 780 | } 781 | 782 | 60% { 783 | opacity: 1; 784 | -webkit-transform: translate3d(25px, 0, 0); 785 | transform: translate3d(25px, 0, 0); 786 | } 787 | 788 | 75% { 789 | -webkit-transform: translate3d(-10px, 0, 0); 790 | transform: translate3d(-10px, 0, 0); 791 | } 792 | 793 | 90% { 794 | -webkit-transform: translate3d(5px, 0, 0); 795 | transform: translate3d(5px, 0, 0); 796 | } 797 | 798 | 100% { 799 | -webkit-transform: none; 800 | transform: none; 801 | } 802 | } 803 | 804 | .bounceInLeft { 805 | -webkit-animation-name: bounceInLeft; 806 | animation-name: bounceInLeft; 807 | } 808 | 809 | @-webkit-keyframes bounceInRight { 810 | 0%, 60%, 75%, 90%, 100% { 811 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 812 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 813 | } 814 | 815 | 0% { 816 | opacity: 0; 817 | -webkit-transform: translate3d(3000px, 0, 0); 818 | transform: translate3d(3000px, 0, 0); 819 | } 820 | 821 | 60% { 822 | opacity: 1; 823 | -webkit-transform: translate3d(-25px, 0, 0); 824 | transform: translate3d(-25px, 0, 0); 825 | } 826 | 827 | 75% { 828 | -webkit-transform: translate3d(10px, 0, 0); 829 | transform: translate3d(10px, 0, 0); 830 | } 831 | 832 | 90% { 833 | -webkit-transform: translate3d(-5px, 0, 0); 834 | transform: translate3d(-5px, 0, 0); 835 | } 836 | 837 | 100% { 838 | -webkit-transform: none; 839 | transform: none; 840 | } 841 | } 842 | 843 | @keyframes bounceInRight { 844 | 0%, 60%, 75%, 90%, 100% { 845 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 846 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 847 | } 848 | 849 | 0% { 850 | opacity: 0; 851 | -webkit-transform: translate3d(3000px, 0, 0); 852 | transform: translate3d(3000px, 0, 0); 853 | } 854 | 855 | 60% { 856 | opacity: 1; 857 | -webkit-transform: translate3d(-25px, 0, 0); 858 | transform: translate3d(-25px, 0, 0); 859 | } 860 | 861 | 75% { 862 | -webkit-transform: translate3d(10px, 0, 0); 863 | transform: translate3d(10px, 0, 0); 864 | } 865 | 866 | 90% { 867 | -webkit-transform: translate3d(-5px, 0, 0); 868 | transform: translate3d(-5px, 0, 0); 869 | } 870 | 871 | 100% { 872 | -webkit-transform: none; 873 | transform: none; 874 | } 875 | } 876 | 877 | .bounceInRight { 878 | -webkit-animation-name: bounceInRight; 879 | animation-name: bounceInRight; 880 | } 881 | 882 | @-webkit-keyframes bounceInUp { 883 | 0%, 60%, 75%, 90%, 100% { 884 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 885 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 886 | } 887 | 888 | 0% { 889 | opacity: 0; 890 | -webkit-transform: translate3d(0, 3000px, 0); 891 | transform: translate3d(0, 3000px, 0); 892 | } 893 | 894 | 60% { 895 | opacity: 1; 896 | -webkit-transform: translate3d(0, -20px, 0); 897 | transform: translate3d(0, -20px, 0); 898 | } 899 | 900 | 75% { 901 | -webkit-transform: translate3d(0, 10px, 0); 902 | transform: translate3d(0, 10px, 0); 903 | } 904 | 905 | 90% { 906 | -webkit-transform: translate3d(0, -5px, 0); 907 | transform: translate3d(0, -5px, 0); 908 | } 909 | 910 | 100% { 911 | -webkit-transform: translate3d(0, 0, 0); 912 | transform: translate3d(0, 0, 0); 913 | } 914 | } 915 | 916 | @keyframes bounceInUp { 917 | 0%, 60%, 75%, 90%, 100% { 918 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 919 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 920 | } 921 | 922 | 0% { 923 | opacity: 0; 924 | -webkit-transform: translate3d(0, 3000px, 0); 925 | transform: translate3d(0, 3000px, 0); 926 | } 927 | 928 | 60% { 929 | opacity: 1; 930 | -webkit-transform: translate3d(0, -20px, 0); 931 | transform: translate3d(0, -20px, 0); 932 | } 933 | 934 | 75% { 935 | -webkit-transform: translate3d(0, 10px, 0); 936 | transform: translate3d(0, 10px, 0); 937 | } 938 | 939 | 90% { 940 | -webkit-transform: translate3d(0, -5px, 0); 941 | transform: translate3d(0, -5px, 0); 942 | } 943 | 944 | 100% { 945 | -webkit-transform: translate3d(0, 0, 0); 946 | transform: translate3d(0, 0, 0); 947 | } 948 | } 949 | 950 | .bounceInUp { 951 | -webkit-animation-name: bounceInUp; 952 | animation-name: bounceInUp; 953 | } 954 | 955 | @-webkit-keyframes bounceOut { 956 | 20% { 957 | -webkit-transform: scale3d(.9, .9, .9); 958 | transform: scale3d(.9, .9, .9); 959 | } 960 | 961 | 50%, 55% { 962 | opacity: 1; 963 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 964 | transform: scale3d(1.1, 1.1, 1.1); 965 | } 966 | 967 | 100% { 968 | opacity: 0; 969 | -webkit-transform: scale3d(.3, .3, .3); 970 | transform: scale3d(.3, .3, .3); 971 | } 972 | } 973 | 974 | @keyframes bounceOut { 975 | 20% { 976 | -webkit-transform: scale3d(.9, .9, .9); 977 | transform: scale3d(.9, .9, .9); 978 | } 979 | 980 | 50%, 55% { 981 | opacity: 1; 982 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 983 | transform: scale3d(1.1, 1.1, 1.1); 984 | } 985 | 986 | 100% { 987 | opacity: 0; 988 | -webkit-transform: scale3d(.3, .3, .3); 989 | transform: scale3d(.3, .3, .3); 990 | } 991 | } 992 | 993 | .bounceOut { 994 | -webkit-animation-name: bounceOut; 995 | animation-name: bounceOut; 996 | } 997 | 998 | @-webkit-keyframes bounceOutDown { 999 | 20% { 1000 | -webkit-transform: translate3d(0, 10px, 0); 1001 | transform: translate3d(0, 10px, 0); 1002 | } 1003 | 1004 | 40%, 45% { 1005 | opacity: 1; 1006 | -webkit-transform: translate3d(0, -20px, 0); 1007 | transform: translate3d(0, -20px, 0); 1008 | } 1009 | 1010 | 100% { 1011 | opacity: 0; 1012 | -webkit-transform: translate3d(0, 2000px, 0); 1013 | transform: translate3d(0, 2000px, 0); 1014 | } 1015 | } 1016 | 1017 | @keyframes bounceOutDown { 1018 | 20% { 1019 | -webkit-transform: translate3d(0, 10px, 0); 1020 | transform: translate3d(0, 10px, 0); 1021 | } 1022 | 1023 | 40%, 45% { 1024 | opacity: 1; 1025 | -webkit-transform: translate3d(0, -20px, 0); 1026 | transform: translate3d(0, -20px, 0); 1027 | } 1028 | 1029 | 100% { 1030 | opacity: 0; 1031 | -webkit-transform: translate3d(0, 2000px, 0); 1032 | transform: translate3d(0, 2000px, 0); 1033 | } 1034 | } 1035 | 1036 | .bounceOutDown { 1037 | -webkit-animation-name: bounceOutDown; 1038 | animation-name: bounceOutDown; 1039 | } 1040 | 1041 | @-webkit-keyframes bounceOutLeft { 1042 | 20% { 1043 | opacity: 1; 1044 | -webkit-transform: translate3d(20px, 0, 0); 1045 | transform: translate3d(20px, 0, 0); 1046 | } 1047 | 1048 | 100% { 1049 | opacity: 0; 1050 | -webkit-transform: translate3d(-2000px, 0, 0); 1051 | transform: translate3d(-2000px, 0, 0); 1052 | } 1053 | } 1054 | 1055 | @keyframes bounceOutLeft { 1056 | 20% { 1057 | opacity: 1; 1058 | -webkit-transform: translate3d(20px, 0, 0); 1059 | transform: translate3d(20px, 0, 0); 1060 | } 1061 | 1062 | 100% { 1063 | opacity: 0; 1064 | -webkit-transform: translate3d(-2000px, 0, 0); 1065 | transform: translate3d(-2000px, 0, 0); 1066 | } 1067 | } 1068 | 1069 | .bounceOutLeft { 1070 | -webkit-animation-name: bounceOutLeft; 1071 | animation-name: bounceOutLeft; 1072 | } 1073 | 1074 | @-webkit-keyframes bounceOutRight { 1075 | 20% { 1076 | opacity: 1; 1077 | -webkit-transform: translate3d(-20px, 0, 0); 1078 | transform: translate3d(-20px, 0, 0); 1079 | } 1080 | 1081 | 100% { 1082 | opacity: 0; 1083 | -webkit-transform: translate3d(2000px, 0, 0); 1084 | transform: translate3d(2000px, 0, 0); 1085 | } 1086 | } 1087 | 1088 | @keyframes bounceOutRight { 1089 | 20% { 1090 | opacity: 1; 1091 | -webkit-transform: translate3d(-20px, 0, 0); 1092 | transform: translate3d(-20px, 0, 0); 1093 | } 1094 | 1095 | 100% { 1096 | opacity: 0; 1097 | -webkit-transform: translate3d(2000px, 0, 0); 1098 | transform: translate3d(2000px, 0, 0); 1099 | } 1100 | } 1101 | 1102 | .bounceOutRight { 1103 | -webkit-animation-name: bounceOutRight; 1104 | animation-name: bounceOutRight; 1105 | } 1106 | 1107 | @-webkit-keyframes bounceOutUp { 1108 | 20% { 1109 | -webkit-transform: translate3d(0, -10px, 0); 1110 | transform: translate3d(0, -10px, 0); 1111 | } 1112 | 1113 | 40%, 45% { 1114 | opacity: 1; 1115 | -webkit-transform: translate3d(0, 20px, 0); 1116 | transform: translate3d(0, 20px, 0); 1117 | } 1118 | 1119 | 100% { 1120 | opacity: 0; 1121 | -webkit-transform: translate3d(0, -2000px, 0); 1122 | transform: translate3d(0, -2000px, 0); 1123 | } 1124 | } 1125 | 1126 | @keyframes bounceOutUp { 1127 | 20% { 1128 | -webkit-transform: translate3d(0, -10px, 0); 1129 | transform: translate3d(0, -10px, 0); 1130 | } 1131 | 1132 | 40%, 45% { 1133 | opacity: 1; 1134 | -webkit-transform: translate3d(0, 20px, 0); 1135 | transform: translate3d(0, 20px, 0); 1136 | } 1137 | 1138 | 100% { 1139 | opacity: 0; 1140 | -webkit-transform: translate3d(0, -2000px, 0); 1141 | transform: translate3d(0, -2000px, 0); 1142 | } 1143 | } 1144 | 1145 | .bounceOutUp { 1146 | -webkit-animation-name: bounceOutUp; 1147 | animation-name: bounceOutUp; 1148 | } 1149 | 1150 | @-webkit-keyframes fadeIn { 1151 | 0% { 1152 | opacity: 0; 1153 | } 1154 | 1155 | 100% { 1156 | opacity: 1; 1157 | } 1158 | } 1159 | 1160 | @keyframes fadeIn { 1161 | 0% { 1162 | opacity: 0; 1163 | } 1164 | 1165 | 100% { 1166 | opacity: 1; 1167 | } 1168 | } 1169 | 1170 | .fadeIn { 1171 | -webkit-animation-name: fadeIn; 1172 | animation-name: fadeIn; 1173 | } 1174 | 1175 | @-webkit-keyframes fadeInDown { 1176 | 0% { 1177 | opacity: 0; 1178 | -webkit-transform: translate3d(0, -100%, 0); 1179 | transform: translate3d(0, -100%, 0); 1180 | } 1181 | 1182 | 100% { 1183 | opacity: 1; 1184 | -webkit-transform: none; 1185 | transform: none; 1186 | } 1187 | } 1188 | 1189 | @keyframes fadeInDown { 1190 | 0% { 1191 | opacity: 0; 1192 | -webkit-transform: translate3d(0, -100%, 0); 1193 | transform: translate3d(0, -100%, 0); 1194 | } 1195 | 1196 | 100% { 1197 | opacity: 1; 1198 | -webkit-transform: none; 1199 | transform: none; 1200 | } 1201 | } 1202 | 1203 | .fadeInDown { 1204 | -webkit-animation-name: fadeInDown; 1205 | animation-name: fadeInDown; 1206 | } 1207 | 1208 | @-webkit-keyframes fadeInDownBig { 1209 | 0% { 1210 | opacity: 0; 1211 | -webkit-transform: translate3d(0, -2000px, 0); 1212 | transform: translate3d(0, -2000px, 0); 1213 | } 1214 | 1215 | 100% { 1216 | opacity: 1; 1217 | -webkit-transform: none; 1218 | transform: none; 1219 | } 1220 | } 1221 | 1222 | @keyframes fadeInDownBig { 1223 | 0% { 1224 | opacity: 0; 1225 | -webkit-transform: translate3d(0, -2000px, 0); 1226 | transform: translate3d(0, -2000px, 0); 1227 | } 1228 | 1229 | 100% { 1230 | opacity: 1; 1231 | -webkit-transform: none; 1232 | transform: none; 1233 | } 1234 | } 1235 | 1236 | .fadeInDownBig { 1237 | -webkit-animation-name: fadeInDownBig; 1238 | animation-name: fadeInDownBig; 1239 | } 1240 | 1241 | @-webkit-keyframes fadeInLeft { 1242 | 0% { 1243 | opacity: 0; 1244 | -webkit-transform: translate3d(-100%, 0, 0); 1245 | transform: translate3d(-100%, 0, 0); 1246 | } 1247 | 1248 | 100% { 1249 | opacity: 1; 1250 | -webkit-transform: none; 1251 | transform: none; 1252 | } 1253 | } 1254 | 1255 | @keyframes fadeInLeft { 1256 | 0% { 1257 | opacity: 0; 1258 | -webkit-transform: translate3d(-100%, 0, 0); 1259 | transform: translate3d(-100%, 0, 0); 1260 | } 1261 | 1262 | 100% { 1263 | opacity: 1; 1264 | -webkit-transform: none; 1265 | transform: none; 1266 | } 1267 | } 1268 | 1269 | .fadeInLeft { 1270 | -webkit-animation-name: fadeInLeft; 1271 | animation-name: fadeInLeft; 1272 | } 1273 | 1274 | @-webkit-keyframes fadeInLeftBig { 1275 | 0% { 1276 | opacity: 0; 1277 | -webkit-transform: translate3d(-2000px, 0, 0); 1278 | transform: translate3d(-2000px, 0, 0); 1279 | } 1280 | 1281 | 100% { 1282 | opacity: 1; 1283 | -webkit-transform: none; 1284 | transform: none; 1285 | } 1286 | } 1287 | 1288 | @keyframes fadeInLeftBig { 1289 | 0% { 1290 | opacity: 0; 1291 | -webkit-transform: translate3d(-2000px, 0, 0); 1292 | transform: translate3d(-2000px, 0, 0); 1293 | } 1294 | 1295 | 100% { 1296 | opacity: 1; 1297 | -webkit-transform: none; 1298 | transform: none; 1299 | } 1300 | } 1301 | 1302 | .fadeInLeftBig { 1303 | -webkit-animation-name: fadeInLeftBig; 1304 | animation-name: fadeInLeftBig; 1305 | } 1306 | 1307 | @-webkit-keyframes fadeInRight { 1308 | 0% { 1309 | opacity: 0; 1310 | -webkit-transform: translate3d(100%, 0, 0); 1311 | transform: translate3d(100%, 0, 0); 1312 | } 1313 | 1314 | 100% { 1315 | opacity: 1; 1316 | -webkit-transform: none; 1317 | transform: none; 1318 | } 1319 | } 1320 | 1321 | @keyframes fadeInRight { 1322 | 0% { 1323 | opacity: 0; 1324 | -webkit-transform: translate3d(100%, 0, 0); 1325 | transform: translate3d(100%, 0, 0); 1326 | } 1327 | 1328 | 100% { 1329 | opacity: 1; 1330 | -webkit-transform: none; 1331 | transform: none; 1332 | } 1333 | } 1334 | 1335 | .fadeInRight { 1336 | -webkit-animation-name: fadeInRight; 1337 | animation-name: fadeInRight; 1338 | } 1339 | 1340 | @-webkit-keyframes fadeInRightBig { 1341 | 0% { 1342 | opacity: 0; 1343 | -webkit-transform: translate3d(2000px, 0, 0); 1344 | transform: translate3d(2000px, 0, 0); 1345 | } 1346 | 1347 | 100% { 1348 | opacity: 1; 1349 | -webkit-transform: none; 1350 | transform: none; 1351 | } 1352 | } 1353 | 1354 | @keyframes fadeInRightBig { 1355 | 0% { 1356 | opacity: 0; 1357 | -webkit-transform: translate3d(2000px, 0, 0); 1358 | transform: translate3d(2000px, 0, 0); 1359 | } 1360 | 1361 | 100% { 1362 | opacity: 1; 1363 | -webkit-transform: none; 1364 | transform: none; 1365 | } 1366 | } 1367 | 1368 | .fadeInRightBig { 1369 | -webkit-animation-name: fadeInRightBig; 1370 | animation-name: fadeInRightBig; 1371 | } 1372 | 1373 | @-webkit-keyframes fadeInUp { 1374 | 0% { 1375 | opacity: 0; 1376 | -webkit-transform: translate3d(0, 100%, 0); 1377 | transform: translate3d(0, 100%, 0); 1378 | } 1379 | 1380 | 100% { 1381 | opacity: 1; 1382 | -webkit-transform: none; 1383 | transform: none; 1384 | } 1385 | } 1386 | 1387 | @keyframes fadeInUp { 1388 | 0% { 1389 | opacity: 0; 1390 | -webkit-transform: translate3d(0, 100%, 0); 1391 | transform: translate3d(0, 100%, 0); 1392 | } 1393 | 1394 | 100% { 1395 | opacity: 1; 1396 | -webkit-transform: none; 1397 | transform: none; 1398 | } 1399 | } 1400 | 1401 | .fadeInUp { 1402 | -webkit-animation-name: fadeInUp; 1403 | animation-name: fadeInUp; 1404 | } 1405 | 1406 | @-webkit-keyframes fadeInUpBig { 1407 | 0% { 1408 | opacity: 0; 1409 | -webkit-transform: translate3d(0, 2000px, 0); 1410 | transform: translate3d(0, 2000px, 0); 1411 | } 1412 | 1413 | 100% { 1414 | opacity: 1; 1415 | -webkit-transform: none; 1416 | transform: none; 1417 | } 1418 | } 1419 | 1420 | @keyframes fadeInUpBig { 1421 | 0% { 1422 | opacity: 0; 1423 | -webkit-transform: translate3d(0, 2000px, 0); 1424 | transform: translate3d(0, 2000px, 0); 1425 | } 1426 | 1427 | 100% { 1428 | opacity: 1; 1429 | -webkit-transform: none; 1430 | transform: none; 1431 | } 1432 | } 1433 | 1434 | .fadeInUpBig { 1435 | -webkit-animation-name: fadeInUpBig; 1436 | animation-name: fadeInUpBig; 1437 | } 1438 | 1439 | @-webkit-keyframes fadeOut { 1440 | 0% { 1441 | opacity: 1; 1442 | } 1443 | 1444 | 100% { 1445 | opacity: 0; 1446 | } 1447 | } 1448 | 1449 | @keyframes fadeOut { 1450 | 0% { 1451 | opacity: 1; 1452 | } 1453 | 1454 | 100% { 1455 | opacity: 0; 1456 | } 1457 | } 1458 | 1459 | .fadeOut { 1460 | -webkit-animation-name: fadeOut; 1461 | animation-name: fadeOut; 1462 | } 1463 | 1464 | @-webkit-keyframes fadeOutDown { 1465 | 0% { 1466 | opacity: 1; 1467 | } 1468 | 1469 | 100% { 1470 | opacity: 0; 1471 | -webkit-transform: translate3d(0, 100%, 0); 1472 | transform: translate3d(0, 100%, 0); 1473 | } 1474 | } 1475 | 1476 | @keyframes fadeOutDown { 1477 | 0% { 1478 | opacity: 1; 1479 | } 1480 | 1481 | 100% { 1482 | opacity: 0; 1483 | -webkit-transform: translate3d(0, 100%, 0); 1484 | transform: translate3d(0, 100%, 0); 1485 | } 1486 | } 1487 | 1488 | .fadeOutDown { 1489 | -webkit-animation-name: fadeOutDown; 1490 | animation-name: fadeOutDown; 1491 | } 1492 | 1493 | @-webkit-keyframes fadeOutDownBig { 1494 | 0% { 1495 | opacity: 1; 1496 | } 1497 | 1498 | 100% { 1499 | opacity: 0; 1500 | -webkit-transform: translate3d(0, 2000px, 0); 1501 | transform: translate3d(0, 2000px, 0); 1502 | } 1503 | } 1504 | 1505 | @keyframes fadeOutDownBig { 1506 | 0% { 1507 | opacity: 1; 1508 | } 1509 | 1510 | 100% { 1511 | opacity: 0; 1512 | -webkit-transform: translate3d(0, 2000px, 0); 1513 | transform: translate3d(0, 2000px, 0); 1514 | } 1515 | } 1516 | 1517 | .fadeOutDownBig { 1518 | -webkit-animation-name: fadeOutDownBig; 1519 | animation-name: fadeOutDownBig; 1520 | } 1521 | 1522 | @-webkit-keyframes fadeOutLeft { 1523 | 0% { 1524 | opacity: 1; 1525 | } 1526 | 1527 | 100% { 1528 | opacity: 0; 1529 | -webkit-transform: translate3d(-100%, 0, 0); 1530 | transform: translate3d(-100%, 0, 0); 1531 | } 1532 | } 1533 | 1534 | @keyframes fadeOutLeft { 1535 | 0% { 1536 | opacity: 1; 1537 | } 1538 | 1539 | 100% { 1540 | opacity: 0; 1541 | -webkit-transform: translate3d(-100%, 0, 0); 1542 | transform: translate3d(-100%, 0, 0); 1543 | } 1544 | } 1545 | 1546 | .fadeOutLeft { 1547 | -webkit-animation-name: fadeOutLeft; 1548 | animation-name: fadeOutLeft; 1549 | } 1550 | 1551 | @-webkit-keyframes fadeOutLeftBig { 1552 | 0% { 1553 | opacity: 1; 1554 | } 1555 | 1556 | 100% { 1557 | opacity: 0; 1558 | -webkit-transform: translate3d(-2000px, 0, 0); 1559 | transform: translate3d(-2000px, 0, 0); 1560 | } 1561 | } 1562 | 1563 | @keyframes fadeOutLeftBig { 1564 | 0% { 1565 | opacity: 1; 1566 | } 1567 | 1568 | 100% { 1569 | opacity: 0; 1570 | -webkit-transform: translate3d(-2000px, 0, 0); 1571 | transform: translate3d(-2000px, 0, 0); 1572 | } 1573 | } 1574 | 1575 | .fadeOutLeftBig { 1576 | -webkit-animation-name: fadeOutLeftBig; 1577 | animation-name: fadeOutLeftBig; 1578 | } 1579 | 1580 | @-webkit-keyframes fadeOutRight { 1581 | 0% { 1582 | opacity: 1; 1583 | } 1584 | 1585 | 100% { 1586 | opacity: 0; 1587 | -webkit-transform: translate3d(100%, 0, 0); 1588 | transform: translate3d(100%, 0, 0); 1589 | } 1590 | } 1591 | 1592 | @keyframes fadeOutRight { 1593 | 0% { 1594 | opacity: 1; 1595 | } 1596 | 1597 | 100% { 1598 | opacity: 0; 1599 | -webkit-transform: translate3d(100%, 0, 0); 1600 | transform: translate3d(100%, 0, 0); 1601 | } 1602 | } 1603 | 1604 | .fadeOutRight { 1605 | -webkit-animation-name: fadeOutRight; 1606 | animation-name: fadeOutRight; 1607 | } 1608 | 1609 | @-webkit-keyframes fadeOutRightBig { 1610 | 0% { 1611 | opacity: 1; 1612 | } 1613 | 1614 | 100% { 1615 | opacity: 0; 1616 | -webkit-transform: translate3d(2000px, 0, 0); 1617 | transform: translate3d(2000px, 0, 0); 1618 | } 1619 | } 1620 | 1621 | @keyframes fadeOutRightBig { 1622 | 0% { 1623 | opacity: 1; 1624 | } 1625 | 1626 | 100% { 1627 | opacity: 0; 1628 | -webkit-transform: translate3d(2000px, 0, 0); 1629 | transform: translate3d(2000px, 0, 0); 1630 | } 1631 | } 1632 | 1633 | .fadeOutRightBig { 1634 | -webkit-animation-name: fadeOutRightBig; 1635 | animation-name: fadeOutRightBig; 1636 | } 1637 | 1638 | @-webkit-keyframes fadeOutUp { 1639 | 0% { 1640 | opacity: 1; 1641 | } 1642 | 1643 | 100% { 1644 | opacity: 0; 1645 | -webkit-transform: translate3d(0, -100%, 0); 1646 | transform: translate3d(0, -100%, 0); 1647 | } 1648 | } 1649 | 1650 | @keyframes fadeOutUp { 1651 | 0% { 1652 | opacity: 1; 1653 | } 1654 | 1655 | 100% { 1656 | opacity: 0; 1657 | -webkit-transform: translate3d(0, -100%, 0); 1658 | transform: translate3d(0, -100%, 0); 1659 | } 1660 | } 1661 | 1662 | .fadeOutUp { 1663 | -webkit-animation-name: fadeOutUp; 1664 | animation-name: fadeOutUp; 1665 | } 1666 | 1667 | @-webkit-keyframes fadeOutUpBig { 1668 | 0% { 1669 | opacity: 1; 1670 | } 1671 | 1672 | 100% { 1673 | opacity: 0; 1674 | -webkit-transform: translate3d(0, -2000px, 0); 1675 | transform: translate3d(0, -2000px, 0); 1676 | } 1677 | } 1678 | 1679 | @keyframes fadeOutUpBig { 1680 | 0% { 1681 | opacity: 1; 1682 | } 1683 | 1684 | 100% { 1685 | opacity: 0; 1686 | -webkit-transform: translate3d(0, -2000px, 0); 1687 | transform: translate3d(0, -2000px, 0); 1688 | } 1689 | } 1690 | 1691 | .fadeOutUpBig { 1692 | -webkit-animation-name: fadeOutUpBig; 1693 | animation-name: fadeOutUpBig; 1694 | } 1695 | 1696 | @-webkit-keyframes flip { 1697 | 0% { 1698 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1699 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1700 | -webkit-animation-timing-function: ease-out; 1701 | animation-timing-function: ease-out; 1702 | } 1703 | 1704 | 40% { 1705 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1706 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1707 | -webkit-animation-timing-function: ease-out; 1708 | animation-timing-function: ease-out; 1709 | } 1710 | 1711 | 50% { 1712 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1713 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1714 | -webkit-animation-timing-function: ease-in; 1715 | animation-timing-function: ease-in; 1716 | } 1717 | 1718 | 80% { 1719 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1720 | transform: perspective(400px) scale3d(.95, .95, .95); 1721 | -webkit-animation-timing-function: ease-in; 1722 | animation-timing-function: ease-in; 1723 | } 1724 | 1725 | 100% { 1726 | -webkit-transform: perspective(400px); 1727 | transform: perspective(400px); 1728 | -webkit-animation-timing-function: ease-in; 1729 | animation-timing-function: ease-in; 1730 | } 1731 | } 1732 | 1733 | @keyframes flip { 1734 | 0% { 1735 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1736 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1737 | -webkit-animation-timing-function: ease-out; 1738 | animation-timing-function: ease-out; 1739 | } 1740 | 1741 | 40% { 1742 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1743 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1744 | -webkit-animation-timing-function: ease-out; 1745 | animation-timing-function: ease-out; 1746 | } 1747 | 1748 | 50% { 1749 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1750 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1751 | -webkit-animation-timing-function: ease-in; 1752 | animation-timing-function: ease-in; 1753 | } 1754 | 1755 | 80% { 1756 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1757 | transform: perspective(400px) scale3d(.95, .95, .95); 1758 | -webkit-animation-timing-function: ease-in; 1759 | animation-timing-function: ease-in; 1760 | } 1761 | 1762 | 100% { 1763 | -webkit-transform: perspective(400px); 1764 | transform: perspective(400px); 1765 | -webkit-animation-timing-function: ease-in; 1766 | animation-timing-function: ease-in; 1767 | } 1768 | } 1769 | 1770 | .animated.flip { 1771 | -webkit-backface-visibility: visible; 1772 | backface-visibility: visible; 1773 | -webkit-animation-name: flip; 1774 | animation-name: flip; 1775 | } 1776 | 1777 | @-webkit-keyframes flipInX { 1778 | 0% { 1779 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1780 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1781 | -webkit-animation-timing-function: ease-in; 1782 | animation-timing-function: ease-in; 1783 | opacity: 0; 1784 | } 1785 | 1786 | 40% { 1787 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1788 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1789 | -webkit-animation-timing-function: ease-in; 1790 | animation-timing-function: ease-in; 1791 | } 1792 | 1793 | 60% { 1794 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1795 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1796 | opacity: 1; 1797 | } 1798 | 1799 | 80% { 1800 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1801 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1802 | } 1803 | 1804 | 100% { 1805 | -webkit-transform: perspective(400px); 1806 | transform: perspective(400px); 1807 | } 1808 | } 1809 | 1810 | @keyframes flipInX { 1811 | 0% { 1812 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1813 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1814 | -webkit-animation-timing-function: ease-in; 1815 | animation-timing-function: ease-in; 1816 | opacity: 0; 1817 | } 1818 | 1819 | 40% { 1820 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1821 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1822 | -webkit-animation-timing-function: ease-in; 1823 | animation-timing-function: ease-in; 1824 | } 1825 | 1826 | 60% { 1827 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1828 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1829 | opacity: 1; 1830 | } 1831 | 1832 | 80% { 1833 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1834 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1835 | } 1836 | 1837 | 100% { 1838 | -webkit-transform: perspective(400px); 1839 | transform: perspective(400px); 1840 | } 1841 | } 1842 | 1843 | .flipInX { 1844 | -webkit-backface-visibility: visible !important; 1845 | backface-visibility: visible !important; 1846 | -webkit-animation-name: flipInX; 1847 | animation-name: flipInX; 1848 | } 1849 | 1850 | @-webkit-keyframes flipInY { 1851 | 0% { 1852 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1853 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1854 | -webkit-animation-timing-function: ease-in; 1855 | animation-timing-function: ease-in; 1856 | opacity: 0; 1857 | } 1858 | 1859 | 40% { 1860 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1861 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1862 | -webkit-animation-timing-function: ease-in; 1863 | animation-timing-function: ease-in; 1864 | } 1865 | 1866 | 60% { 1867 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1868 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1869 | opacity: 1; 1870 | } 1871 | 1872 | 80% { 1873 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1874 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1875 | } 1876 | 1877 | 100% { 1878 | -webkit-transform: perspective(400px); 1879 | transform: perspective(400px); 1880 | } 1881 | } 1882 | 1883 | @keyframes flipInY { 1884 | 0% { 1885 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1886 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1887 | -webkit-animation-timing-function: ease-in; 1888 | animation-timing-function: ease-in; 1889 | opacity: 0; 1890 | } 1891 | 1892 | 40% { 1893 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1894 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1895 | -webkit-animation-timing-function: ease-in; 1896 | animation-timing-function: ease-in; 1897 | } 1898 | 1899 | 60% { 1900 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1901 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1902 | opacity: 1; 1903 | } 1904 | 1905 | 80% { 1906 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1907 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1908 | } 1909 | 1910 | 100% { 1911 | -webkit-transform: perspective(400px); 1912 | transform: perspective(400px); 1913 | } 1914 | } 1915 | 1916 | .flipInY { 1917 | -webkit-backface-visibility: visible !important; 1918 | backface-visibility: visible !important; 1919 | -webkit-animation-name: flipInY; 1920 | animation-name: flipInY; 1921 | } 1922 | 1923 | @-webkit-keyframes flipOutX { 1924 | 0% { 1925 | -webkit-transform: perspective(400px); 1926 | transform: perspective(400px); 1927 | } 1928 | 1929 | 30% { 1930 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1931 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1932 | opacity: 1; 1933 | } 1934 | 1935 | 100% { 1936 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1937 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1938 | opacity: 0; 1939 | } 1940 | } 1941 | 1942 | @keyframes flipOutX { 1943 | 0% { 1944 | -webkit-transform: perspective(400px); 1945 | transform: perspective(400px); 1946 | } 1947 | 1948 | 30% { 1949 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1950 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1951 | opacity: 1; 1952 | } 1953 | 1954 | 100% { 1955 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1956 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1957 | opacity: 0; 1958 | } 1959 | } 1960 | 1961 | .flipOutX { 1962 | -webkit-animation-name: flipOutX; 1963 | animation-name: flipOutX; 1964 | -webkit-backface-visibility: visible !important; 1965 | backface-visibility: visible !important; 1966 | } 1967 | 1968 | @-webkit-keyframes flipOutY { 1969 | 0% { 1970 | -webkit-transform: perspective(400px); 1971 | transform: perspective(400px); 1972 | } 1973 | 1974 | 30% { 1975 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1976 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1977 | opacity: 1; 1978 | } 1979 | 1980 | 100% { 1981 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1982 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1983 | opacity: 0; 1984 | } 1985 | } 1986 | 1987 | @keyframes flipOutY { 1988 | 0% { 1989 | -webkit-transform: perspective(400px); 1990 | transform: perspective(400px); 1991 | } 1992 | 1993 | 30% { 1994 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1995 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1996 | opacity: 1; 1997 | } 1998 | 1999 | 100% { 2000 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2001 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2002 | opacity: 0; 2003 | } 2004 | } 2005 | 2006 | .flipOutY { 2007 | -webkit-backface-visibility: visible !important; 2008 | backface-visibility: visible !important; 2009 | -webkit-animation-name: flipOutY; 2010 | animation-name: flipOutY; 2011 | } 2012 | 2013 | @-webkit-keyframes lightSpeedIn { 2014 | 0% { 2015 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2016 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2017 | opacity: 0; 2018 | } 2019 | 2020 | 60% { 2021 | -webkit-transform: skewX(20deg); 2022 | transform: skewX(20deg); 2023 | opacity: 1; 2024 | } 2025 | 2026 | 80% { 2027 | -webkit-transform: skewX(-5deg); 2028 | transform: skewX(-5deg); 2029 | opacity: 1; 2030 | } 2031 | 2032 | 100% { 2033 | -webkit-transform: none; 2034 | transform: none; 2035 | opacity: 1; 2036 | } 2037 | } 2038 | 2039 | @keyframes lightSpeedIn { 2040 | 0% { 2041 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2042 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2043 | opacity: 0; 2044 | } 2045 | 2046 | 60% { 2047 | -webkit-transform: skewX(20deg); 2048 | transform: skewX(20deg); 2049 | opacity: 1; 2050 | } 2051 | 2052 | 80% { 2053 | -webkit-transform: skewX(-5deg); 2054 | transform: skewX(-5deg); 2055 | opacity: 1; 2056 | } 2057 | 2058 | 100% { 2059 | -webkit-transform: none; 2060 | transform: none; 2061 | opacity: 1; 2062 | } 2063 | } 2064 | 2065 | .lightSpeedIn { 2066 | -webkit-animation-name: lightSpeedIn; 2067 | animation-name: lightSpeedIn; 2068 | -webkit-animation-timing-function: ease-out; 2069 | animation-timing-function: ease-out; 2070 | } 2071 | 2072 | @-webkit-keyframes lightSpeedOut { 2073 | 0% { 2074 | opacity: 1; 2075 | } 2076 | 2077 | 100% { 2078 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2079 | transform: translate3d(100%, 0, 0) skewX(30deg); 2080 | opacity: 0; 2081 | } 2082 | } 2083 | 2084 | @keyframes lightSpeedOut { 2085 | 0% { 2086 | opacity: 1; 2087 | } 2088 | 2089 | 100% { 2090 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2091 | transform: translate3d(100%, 0, 0) skewX(30deg); 2092 | opacity: 0; 2093 | } 2094 | } 2095 | 2096 | .lightSpeedOut { 2097 | -webkit-animation-name: lightSpeedOut; 2098 | animation-name: lightSpeedOut; 2099 | -webkit-animation-timing-function: ease-in; 2100 | animation-timing-function: ease-in; 2101 | } 2102 | 2103 | @-webkit-keyframes rotateIn { 2104 | 0% { 2105 | -webkit-transform-origin: center; 2106 | transform-origin: center; 2107 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2108 | transform: rotate3d(0, 0, 1, -200deg); 2109 | opacity: 0; 2110 | } 2111 | 2112 | 100% { 2113 | -webkit-transform-origin: center; 2114 | transform-origin: center; 2115 | -webkit-transform: none; 2116 | transform: none; 2117 | opacity: 1; 2118 | } 2119 | } 2120 | 2121 | @keyframes rotateIn { 2122 | 0% { 2123 | -webkit-transform-origin: center; 2124 | transform-origin: center; 2125 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2126 | transform: rotate3d(0, 0, 1, -200deg); 2127 | opacity: 0; 2128 | } 2129 | 2130 | 100% { 2131 | -webkit-transform-origin: center; 2132 | transform-origin: center; 2133 | -webkit-transform: none; 2134 | transform: none; 2135 | opacity: 1; 2136 | } 2137 | } 2138 | 2139 | .rotateIn { 2140 | -webkit-animation-name: rotateIn; 2141 | animation-name: rotateIn; 2142 | } 2143 | 2144 | @-webkit-keyframes rotateInDownLeft { 2145 | 0% { 2146 | -webkit-transform-origin: left bottom; 2147 | transform-origin: left bottom; 2148 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2149 | transform: rotate3d(0, 0, 1, -45deg); 2150 | opacity: 0; 2151 | } 2152 | 2153 | 100% { 2154 | -webkit-transform-origin: left bottom; 2155 | transform-origin: left bottom; 2156 | -webkit-transform: none; 2157 | transform: none; 2158 | opacity: 1; 2159 | } 2160 | } 2161 | 2162 | @keyframes rotateInDownLeft { 2163 | 0% { 2164 | -webkit-transform-origin: left bottom; 2165 | transform-origin: left bottom; 2166 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2167 | transform: rotate3d(0, 0, 1, -45deg); 2168 | opacity: 0; 2169 | } 2170 | 2171 | 100% { 2172 | -webkit-transform-origin: left bottom; 2173 | transform-origin: left bottom; 2174 | -webkit-transform: none; 2175 | transform: none; 2176 | opacity: 1; 2177 | } 2178 | } 2179 | 2180 | .rotateInDownLeft { 2181 | -webkit-animation-name: rotateInDownLeft; 2182 | animation-name: rotateInDownLeft; 2183 | } 2184 | 2185 | @-webkit-keyframes rotateInDownRight { 2186 | 0% { 2187 | -webkit-transform-origin: right bottom; 2188 | transform-origin: right bottom; 2189 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2190 | transform: rotate3d(0, 0, 1, 45deg); 2191 | opacity: 0; 2192 | } 2193 | 2194 | 100% { 2195 | -webkit-transform-origin: right bottom; 2196 | transform-origin: right bottom; 2197 | -webkit-transform: none; 2198 | transform: none; 2199 | opacity: 1; 2200 | } 2201 | } 2202 | 2203 | @keyframes rotateInDownRight { 2204 | 0% { 2205 | -webkit-transform-origin: right bottom; 2206 | transform-origin: right bottom; 2207 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2208 | transform: rotate3d(0, 0, 1, 45deg); 2209 | opacity: 0; 2210 | } 2211 | 2212 | 100% { 2213 | -webkit-transform-origin: right bottom; 2214 | transform-origin: right bottom; 2215 | -webkit-transform: none; 2216 | transform: none; 2217 | opacity: 1; 2218 | } 2219 | } 2220 | 2221 | .rotateInDownRight { 2222 | -webkit-animation-name: rotateInDownRight; 2223 | animation-name: rotateInDownRight; 2224 | } 2225 | 2226 | @-webkit-keyframes rotateInUpLeft { 2227 | 0% { 2228 | -webkit-transform-origin: left bottom; 2229 | transform-origin: left bottom; 2230 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2231 | transform: rotate3d(0, 0, 1, 45deg); 2232 | opacity: 0; 2233 | } 2234 | 2235 | 100% { 2236 | -webkit-transform-origin: left bottom; 2237 | transform-origin: left bottom; 2238 | -webkit-transform: none; 2239 | transform: none; 2240 | opacity: 1; 2241 | } 2242 | } 2243 | 2244 | @keyframes rotateInUpLeft { 2245 | 0% { 2246 | -webkit-transform-origin: left bottom; 2247 | transform-origin: left bottom; 2248 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2249 | transform: rotate3d(0, 0, 1, 45deg); 2250 | opacity: 0; 2251 | } 2252 | 2253 | 100% { 2254 | -webkit-transform-origin: left bottom; 2255 | transform-origin: left bottom; 2256 | -webkit-transform: none; 2257 | transform: none; 2258 | opacity: 1; 2259 | } 2260 | } 2261 | 2262 | .rotateInUpLeft { 2263 | -webkit-animation-name: rotateInUpLeft; 2264 | animation-name: rotateInUpLeft; 2265 | } 2266 | 2267 | @-webkit-keyframes rotateInUpRight { 2268 | 0% { 2269 | -webkit-transform-origin: right bottom; 2270 | transform-origin: right bottom; 2271 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2272 | transform: rotate3d(0, 0, 1, -90deg); 2273 | opacity: 0; 2274 | } 2275 | 2276 | 100% { 2277 | -webkit-transform-origin: right bottom; 2278 | transform-origin: right bottom; 2279 | -webkit-transform: none; 2280 | transform: none; 2281 | opacity: 1; 2282 | } 2283 | } 2284 | 2285 | @keyframes rotateInUpRight { 2286 | 0% { 2287 | -webkit-transform-origin: right bottom; 2288 | transform-origin: right bottom; 2289 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2290 | transform: rotate3d(0, 0, 1, -90deg); 2291 | opacity: 0; 2292 | } 2293 | 2294 | 100% { 2295 | -webkit-transform-origin: right bottom; 2296 | transform-origin: right bottom; 2297 | -webkit-transform: none; 2298 | transform: none; 2299 | opacity: 1; 2300 | } 2301 | } 2302 | 2303 | .rotateInUpRight { 2304 | -webkit-animation-name: rotateInUpRight; 2305 | animation-name: rotateInUpRight; 2306 | } 2307 | 2308 | @-webkit-keyframes rotateOut { 2309 | 0% { 2310 | -webkit-transform-origin: center; 2311 | transform-origin: center; 2312 | opacity: 1; 2313 | } 2314 | 2315 | 100% { 2316 | -webkit-transform-origin: center; 2317 | transform-origin: center; 2318 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2319 | transform: rotate3d(0, 0, 1, 200deg); 2320 | opacity: 0; 2321 | } 2322 | } 2323 | 2324 | @keyframes rotateOut { 2325 | 0% { 2326 | -webkit-transform-origin: center; 2327 | transform-origin: center; 2328 | opacity: 1; 2329 | } 2330 | 2331 | 100% { 2332 | -webkit-transform-origin: center; 2333 | transform-origin: center; 2334 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2335 | transform: rotate3d(0, 0, 1, 200deg); 2336 | opacity: 0; 2337 | } 2338 | } 2339 | 2340 | .rotateOut { 2341 | -webkit-animation-name: rotateOut; 2342 | animation-name: rotateOut; 2343 | } 2344 | 2345 | @-webkit-keyframes rotateOutDownLeft { 2346 | 0% { 2347 | -webkit-transform-origin: left bottom; 2348 | transform-origin: left bottom; 2349 | opacity: 1; 2350 | } 2351 | 2352 | 100% { 2353 | -webkit-transform-origin: left bottom; 2354 | transform-origin: left bottom; 2355 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2356 | transform: rotate3d(0, 0, 1, 45deg); 2357 | opacity: 0; 2358 | } 2359 | } 2360 | 2361 | @keyframes rotateOutDownLeft { 2362 | 0% { 2363 | -webkit-transform-origin: left bottom; 2364 | transform-origin: left bottom; 2365 | opacity: 1; 2366 | } 2367 | 2368 | 100% { 2369 | -webkit-transform-origin: left bottom; 2370 | transform-origin: left bottom; 2371 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2372 | transform: rotate3d(0, 0, 1, 45deg); 2373 | opacity: 0; 2374 | } 2375 | } 2376 | 2377 | .rotateOutDownLeft { 2378 | -webkit-animation-name: rotateOutDownLeft; 2379 | animation-name: rotateOutDownLeft; 2380 | } 2381 | 2382 | @-webkit-keyframes rotateOutDownRight { 2383 | 0% { 2384 | -webkit-transform-origin: right bottom; 2385 | transform-origin: right bottom; 2386 | opacity: 1; 2387 | } 2388 | 2389 | 100% { 2390 | -webkit-transform-origin: right bottom; 2391 | transform-origin: right bottom; 2392 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2393 | transform: rotate3d(0, 0, 1, -45deg); 2394 | opacity: 0; 2395 | } 2396 | } 2397 | 2398 | @keyframes rotateOutDownRight { 2399 | 0% { 2400 | -webkit-transform-origin: right bottom; 2401 | transform-origin: right bottom; 2402 | opacity: 1; 2403 | } 2404 | 2405 | 100% { 2406 | -webkit-transform-origin: right bottom; 2407 | transform-origin: right bottom; 2408 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2409 | transform: rotate3d(0, 0, 1, -45deg); 2410 | opacity: 0; 2411 | } 2412 | } 2413 | 2414 | .rotateOutDownRight { 2415 | -webkit-animation-name: rotateOutDownRight; 2416 | animation-name: rotateOutDownRight; 2417 | } 2418 | 2419 | @-webkit-keyframes rotateOutUpLeft { 2420 | 0% { 2421 | -webkit-transform-origin: left bottom; 2422 | transform-origin: left bottom; 2423 | opacity: 1; 2424 | } 2425 | 2426 | 100% { 2427 | -webkit-transform-origin: left bottom; 2428 | transform-origin: left bottom; 2429 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2430 | transform: rotate3d(0, 0, 1, -45deg); 2431 | opacity: 0; 2432 | } 2433 | } 2434 | 2435 | @keyframes rotateOutUpLeft { 2436 | 0% { 2437 | -webkit-transform-origin: left bottom; 2438 | transform-origin: left bottom; 2439 | opacity: 1; 2440 | } 2441 | 2442 | 100% { 2443 | -webkit-transform-origin: left bottom; 2444 | transform-origin: left bottom; 2445 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2446 | transform: rotate3d(0, 0, 1, -45deg); 2447 | opacity: 0; 2448 | } 2449 | } 2450 | 2451 | .rotateOutUpLeft { 2452 | -webkit-animation-name: rotateOutUpLeft; 2453 | animation-name: rotateOutUpLeft; 2454 | } 2455 | 2456 | @-webkit-keyframes rotateOutUpRight { 2457 | 0% { 2458 | -webkit-transform-origin: right bottom; 2459 | transform-origin: right bottom; 2460 | opacity: 1; 2461 | } 2462 | 2463 | 100% { 2464 | -webkit-transform-origin: right bottom; 2465 | transform-origin: right bottom; 2466 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2467 | transform: rotate3d(0, 0, 1, 90deg); 2468 | opacity: 0; 2469 | } 2470 | } 2471 | 2472 | @keyframes rotateOutUpRight { 2473 | 0% { 2474 | -webkit-transform-origin: right bottom; 2475 | transform-origin: right bottom; 2476 | opacity: 1; 2477 | } 2478 | 2479 | 100% { 2480 | -webkit-transform-origin: right bottom; 2481 | transform-origin: right bottom; 2482 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2483 | transform: rotate3d(0, 0, 1, 90deg); 2484 | opacity: 0; 2485 | } 2486 | } 2487 | 2488 | .rotateOutUpRight { 2489 | -webkit-animation-name: rotateOutUpRight; 2490 | animation-name: rotateOutUpRight; 2491 | } 2492 | 2493 | @-webkit-keyframes hinge { 2494 | 0% { 2495 | -webkit-transform-origin: top left; 2496 | transform-origin: top left; 2497 | -webkit-animation-timing-function: ease-in-out; 2498 | animation-timing-function: ease-in-out; 2499 | } 2500 | 2501 | 20%, 60% { 2502 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2503 | transform: rotate3d(0, 0, 1, 80deg); 2504 | -webkit-transform-origin: top left; 2505 | transform-origin: top left; 2506 | -webkit-animation-timing-function: ease-in-out; 2507 | animation-timing-function: ease-in-out; 2508 | } 2509 | 2510 | 40%, 80% { 2511 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2512 | transform: rotate3d(0, 0, 1, 60deg); 2513 | -webkit-transform-origin: top left; 2514 | transform-origin: top left; 2515 | -webkit-animation-timing-function: ease-in-out; 2516 | animation-timing-function: ease-in-out; 2517 | opacity: 1; 2518 | } 2519 | 2520 | 100% { 2521 | -webkit-transform: translate3d(0, 700px, 0); 2522 | transform: translate3d(0, 700px, 0); 2523 | opacity: 0; 2524 | } 2525 | } 2526 | 2527 | @keyframes hinge { 2528 | 0% { 2529 | -webkit-transform-origin: top left; 2530 | transform-origin: top left; 2531 | -webkit-animation-timing-function: ease-in-out; 2532 | animation-timing-function: ease-in-out; 2533 | } 2534 | 2535 | 20%, 60% { 2536 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2537 | transform: rotate3d(0, 0, 1, 80deg); 2538 | -webkit-transform-origin: top left; 2539 | transform-origin: top left; 2540 | -webkit-animation-timing-function: ease-in-out; 2541 | animation-timing-function: ease-in-out; 2542 | } 2543 | 2544 | 40%, 80% { 2545 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2546 | transform: rotate3d(0, 0, 1, 60deg); 2547 | -webkit-transform-origin: top left; 2548 | transform-origin: top left; 2549 | -webkit-animation-timing-function: ease-in-out; 2550 | animation-timing-function: ease-in-out; 2551 | opacity: 1; 2552 | } 2553 | 2554 | 100% { 2555 | -webkit-transform: translate3d(0, 700px, 0); 2556 | transform: translate3d(0, 700px, 0); 2557 | opacity: 0; 2558 | } 2559 | } 2560 | 2561 | .hinge { 2562 | -webkit-animation-name: hinge; 2563 | animation-name: hinge; 2564 | } 2565 | 2566 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2567 | 2568 | @-webkit-keyframes rollIn { 2569 | 0% { 2570 | opacity: 0; 2571 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2572 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2573 | } 2574 | 2575 | 100% { 2576 | opacity: 1; 2577 | -webkit-transform: none; 2578 | transform: none; 2579 | } 2580 | } 2581 | 2582 | @keyframes rollIn { 2583 | 0% { 2584 | opacity: 0; 2585 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2586 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2587 | } 2588 | 2589 | 100% { 2590 | opacity: 1; 2591 | -webkit-transform: none; 2592 | transform: none; 2593 | } 2594 | } 2595 | 2596 | .rollIn { 2597 | -webkit-animation-name: rollIn; 2598 | animation-name: rollIn; 2599 | } 2600 | 2601 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2602 | 2603 | @-webkit-keyframes rollOut { 2604 | 0% { 2605 | opacity: 1; 2606 | } 2607 | 2608 | 100% { 2609 | opacity: 0; 2610 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2611 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2612 | } 2613 | } 2614 | 2615 | @keyframes rollOut { 2616 | 0% { 2617 | opacity: 1; 2618 | } 2619 | 2620 | 100% { 2621 | opacity: 0; 2622 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2623 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2624 | } 2625 | } 2626 | 2627 | .rollOut { 2628 | -webkit-animation-name: rollOut; 2629 | animation-name: rollOut; 2630 | } 2631 | 2632 | @-webkit-keyframes zoomIn { 2633 | 0% { 2634 | opacity: 0; 2635 | -webkit-transform: scale3d(.3, .3, .3); 2636 | transform: scale3d(.3, .3, .3); 2637 | } 2638 | 2639 | 50% { 2640 | opacity: 1; 2641 | } 2642 | } 2643 | 2644 | @keyframes zoomIn { 2645 | 0% { 2646 | opacity: 0; 2647 | -webkit-transform: scale3d(.3, .3, .3); 2648 | transform: scale3d(.3, .3, .3); 2649 | } 2650 | 2651 | 50% { 2652 | opacity: 1; 2653 | } 2654 | } 2655 | 2656 | .zoomIn { 2657 | -webkit-animation-name: zoomIn; 2658 | animation-name: zoomIn; 2659 | } 2660 | 2661 | @-webkit-keyframes zoomInDown { 2662 | 0% { 2663 | opacity: 0; 2664 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2665 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2666 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2667 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2668 | } 2669 | 2670 | 60% { 2671 | opacity: 1; 2672 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2673 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2674 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2675 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2676 | } 2677 | } 2678 | 2679 | @keyframes zoomInDown { 2680 | 0% { 2681 | opacity: 0; 2682 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2683 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2684 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2685 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2686 | } 2687 | 2688 | 60% { 2689 | opacity: 1; 2690 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2691 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2692 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2693 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2694 | } 2695 | } 2696 | 2697 | .zoomInDown { 2698 | -webkit-animation-name: zoomInDown; 2699 | animation-name: zoomInDown; 2700 | } 2701 | 2702 | @-webkit-keyframes zoomInLeft { 2703 | 0% { 2704 | opacity: 0; 2705 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2706 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2707 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2708 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2709 | } 2710 | 2711 | 60% { 2712 | opacity: 1; 2713 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2714 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2715 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2716 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2717 | } 2718 | } 2719 | 2720 | @keyframes zoomInLeft { 2721 | 0% { 2722 | opacity: 0; 2723 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2724 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2725 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2726 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2727 | } 2728 | 2729 | 60% { 2730 | opacity: 1; 2731 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2732 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2733 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2734 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2735 | } 2736 | } 2737 | 2738 | .zoomInLeft { 2739 | -webkit-animation-name: zoomInLeft; 2740 | animation-name: zoomInLeft; 2741 | } 2742 | 2743 | @-webkit-keyframes zoomInRight { 2744 | 0% { 2745 | opacity: 0; 2746 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2747 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2748 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2749 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2750 | } 2751 | 2752 | 60% { 2753 | opacity: 1; 2754 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2755 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2756 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2757 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2758 | } 2759 | } 2760 | 2761 | @keyframes zoomInRight { 2762 | 0% { 2763 | opacity: 0; 2764 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2765 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2766 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2767 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2768 | } 2769 | 2770 | 60% { 2771 | opacity: 1; 2772 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2773 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2774 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2775 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2776 | } 2777 | } 2778 | 2779 | .zoomInRight { 2780 | -webkit-animation-name: zoomInRight; 2781 | animation-name: zoomInRight; 2782 | } 2783 | 2784 | @-webkit-keyframes zoomInUp { 2785 | 0% { 2786 | opacity: 0; 2787 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2788 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2789 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2790 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2791 | } 2792 | 2793 | 60% { 2794 | opacity: 1; 2795 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2796 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2797 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2798 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2799 | } 2800 | } 2801 | 2802 | @keyframes zoomInUp { 2803 | 0% { 2804 | opacity: 0; 2805 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2806 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2807 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2808 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2809 | } 2810 | 2811 | 60% { 2812 | opacity: 1; 2813 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2814 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2815 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2816 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2817 | } 2818 | } 2819 | 2820 | .zoomInUp { 2821 | -webkit-animation-name: zoomInUp; 2822 | animation-name: zoomInUp; 2823 | } 2824 | 2825 | @-webkit-keyframes zoomOut { 2826 | 0% { 2827 | opacity: 1; 2828 | } 2829 | 2830 | 50% { 2831 | opacity: 0; 2832 | -webkit-transform: scale3d(.3, .3, .3); 2833 | transform: scale3d(.3, .3, .3); 2834 | } 2835 | 2836 | 100% { 2837 | opacity: 0; 2838 | } 2839 | } 2840 | 2841 | @keyframes zoomOut { 2842 | 0% { 2843 | opacity: 1; 2844 | } 2845 | 2846 | 50% { 2847 | opacity: 0; 2848 | -webkit-transform: scale3d(.3, .3, .3); 2849 | transform: scale3d(.3, .3, .3); 2850 | } 2851 | 2852 | 100% { 2853 | opacity: 0; 2854 | } 2855 | } 2856 | 2857 | .zoomOut { 2858 | -webkit-animation-name: zoomOut; 2859 | animation-name: zoomOut; 2860 | } 2861 | 2862 | @-webkit-keyframes zoomOutDown { 2863 | 40% { 2864 | opacity: 1; 2865 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2866 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2867 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2868 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2869 | } 2870 | 2871 | 100% { 2872 | opacity: 0; 2873 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2874 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2875 | -webkit-transform-origin: center bottom; 2876 | transform-origin: center bottom; 2877 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2878 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2879 | } 2880 | } 2881 | 2882 | @keyframes zoomOutDown { 2883 | 40% { 2884 | opacity: 1; 2885 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2886 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2887 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2888 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2889 | } 2890 | 2891 | 100% { 2892 | opacity: 0; 2893 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2894 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2895 | -webkit-transform-origin: center bottom; 2896 | transform-origin: center bottom; 2897 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2898 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2899 | } 2900 | } 2901 | 2902 | .zoomOutDown { 2903 | -webkit-animation-name: zoomOutDown; 2904 | animation-name: zoomOutDown; 2905 | } 2906 | 2907 | @-webkit-keyframes zoomOutLeft { 2908 | 40% { 2909 | opacity: 1; 2910 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2911 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2912 | } 2913 | 2914 | 100% { 2915 | opacity: 0; 2916 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2917 | transform: scale(.1) translate3d(-2000px, 0, 0); 2918 | -webkit-transform-origin: left center; 2919 | transform-origin: left center; 2920 | } 2921 | } 2922 | 2923 | @keyframes zoomOutLeft { 2924 | 40% { 2925 | opacity: 1; 2926 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2927 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2928 | } 2929 | 2930 | 100% { 2931 | opacity: 0; 2932 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2933 | transform: scale(.1) translate3d(-2000px, 0, 0); 2934 | -webkit-transform-origin: left center; 2935 | transform-origin: left center; 2936 | } 2937 | } 2938 | 2939 | .zoomOutLeft { 2940 | -webkit-animation-name: zoomOutLeft; 2941 | animation-name: zoomOutLeft; 2942 | } 2943 | 2944 | @-webkit-keyframes zoomOutRight { 2945 | 40% { 2946 | opacity: 1; 2947 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2948 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2949 | } 2950 | 2951 | 100% { 2952 | opacity: 0; 2953 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2954 | transform: scale(.1) translate3d(2000px, 0, 0); 2955 | -webkit-transform-origin: right center; 2956 | transform-origin: right center; 2957 | } 2958 | } 2959 | 2960 | @keyframes zoomOutRight { 2961 | 40% { 2962 | opacity: 1; 2963 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2964 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2965 | } 2966 | 2967 | 100% { 2968 | opacity: 0; 2969 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2970 | transform: scale(.1) translate3d(2000px, 0, 0); 2971 | -webkit-transform-origin: right center; 2972 | transform-origin: right center; 2973 | } 2974 | } 2975 | 2976 | .zoomOutRight { 2977 | -webkit-animation-name: zoomOutRight; 2978 | animation-name: zoomOutRight; 2979 | } 2980 | 2981 | @-webkit-keyframes zoomOutUp { 2982 | 40% { 2983 | opacity: 1; 2984 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2985 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2986 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2987 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2988 | } 2989 | 2990 | 100% { 2991 | opacity: 0; 2992 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2993 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2994 | -webkit-transform-origin: center bottom; 2995 | transform-origin: center bottom; 2996 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2997 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2998 | } 2999 | } 3000 | 3001 | @keyframes zoomOutUp { 3002 | 40% { 3003 | opacity: 1; 3004 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3005 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3006 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3007 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3008 | } 3009 | 3010 | 100% { 3011 | opacity: 0; 3012 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3013 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3014 | -webkit-transform-origin: center bottom; 3015 | transform-origin: center bottom; 3016 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3017 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3018 | } 3019 | } 3020 | 3021 | .zoomOutUp { 3022 | -webkit-animation-name: zoomOutUp; 3023 | animation-name: zoomOutUp; 3024 | } 3025 | 3026 | @-webkit-keyframes slideInDown { 3027 | 0% { 3028 | -webkit-transform: translate3d(0, -100%, 0); 3029 | transform: translate3d(0, -100%, 0); 3030 | visibility: visible; 3031 | } 3032 | 3033 | 100% { 3034 | -webkit-transform: translate3d(0, 0, 0); 3035 | transform: translate3d(0, 0, 0); 3036 | } 3037 | } 3038 | 3039 | @keyframes slideInDown { 3040 | 0% { 3041 | -webkit-transform: translate3d(0, -100%, 0); 3042 | transform: translate3d(0, -100%, 0); 3043 | visibility: visible; 3044 | } 3045 | 3046 | 100% { 3047 | -webkit-transform: translate3d(0, 0, 0); 3048 | transform: translate3d(0, 0, 0); 3049 | } 3050 | } 3051 | 3052 | .slideInDown { 3053 | -webkit-animation-name: slideInDown; 3054 | animation-name: slideInDown; 3055 | } 3056 | 3057 | @-webkit-keyframes slideInLeft { 3058 | 0% { 3059 | -webkit-transform: translate3d(-100%, 0, 0); 3060 | transform: translate3d(-100%, 0, 0); 3061 | visibility: visible; 3062 | } 3063 | 3064 | 100% { 3065 | -webkit-transform: translate3d(0, 0, 0); 3066 | transform: translate3d(0, 0, 0); 3067 | } 3068 | } 3069 | 3070 | @keyframes slideInLeft { 3071 | 0% { 3072 | -webkit-transform: translate3d(-100%, 0, 0); 3073 | transform: translate3d(-100%, 0, 0); 3074 | visibility: visible; 3075 | } 3076 | 3077 | 100% { 3078 | -webkit-transform: translate3d(0, 0, 0); 3079 | transform: translate3d(0, 0, 0); 3080 | } 3081 | } 3082 | 3083 | .slideInLeft { 3084 | -webkit-animation-name: slideInLeft; 3085 | animation-name: slideInLeft; 3086 | } 3087 | 3088 | @-webkit-keyframes slideInRight { 3089 | 0% { 3090 | -webkit-transform: translate3d(100%, 0, 0); 3091 | transform: translate3d(100%, 0, 0); 3092 | visibility: visible; 3093 | } 3094 | 3095 | 100% { 3096 | -webkit-transform: translate3d(0, 0, 0); 3097 | transform: translate3d(0, 0, 0); 3098 | } 3099 | } 3100 | 3101 | @keyframes slideInRight { 3102 | 0% { 3103 | -webkit-transform: translate3d(100%, 0, 0); 3104 | transform: translate3d(100%, 0, 0); 3105 | visibility: visible; 3106 | } 3107 | 3108 | 100% { 3109 | -webkit-transform: translate3d(0, 0, 0); 3110 | transform: translate3d(0, 0, 0); 3111 | } 3112 | } 3113 | 3114 | .slideInRight { 3115 | -webkit-animation-name: slideInRight; 3116 | animation-name: slideInRight; 3117 | } 3118 | 3119 | @-webkit-keyframes slideInUp { 3120 | 0% { 3121 | -webkit-transform: translate3d(0, 100%, 0); 3122 | transform: translate3d(0, 100%, 0); 3123 | visibility: visible; 3124 | } 3125 | 3126 | 100% { 3127 | -webkit-transform: translate3d(0, 0, 0); 3128 | transform: translate3d(0, 0, 0); 3129 | } 3130 | } 3131 | 3132 | @keyframes slideInUp { 3133 | 0% { 3134 | -webkit-transform: translate3d(0, 100%, 0); 3135 | transform: translate3d(0, 100%, 0); 3136 | visibility: visible; 3137 | } 3138 | 3139 | 100% { 3140 | -webkit-transform: translate3d(0, 0, 0); 3141 | transform: translate3d(0, 0, 0); 3142 | } 3143 | } 3144 | 3145 | .slideInUp { 3146 | -webkit-animation-name: slideInUp; 3147 | animation-name: slideInUp; 3148 | } 3149 | 3150 | @-webkit-keyframes slideOutDown { 3151 | 0% { 3152 | -webkit-transform: translate3d(0, 0, 0); 3153 | transform: translate3d(0, 0, 0); 3154 | } 3155 | 3156 | 100% { 3157 | visibility: hidden; 3158 | -webkit-transform: translate3d(0, 100%, 0); 3159 | transform: translate3d(0, 100%, 0); 3160 | } 3161 | } 3162 | 3163 | @keyframes slideOutDown { 3164 | 0% { 3165 | -webkit-transform: translate3d(0, 0, 0); 3166 | transform: translate3d(0, 0, 0); 3167 | } 3168 | 3169 | 100% { 3170 | visibility: hidden; 3171 | -webkit-transform: translate3d(0, 100%, 0); 3172 | transform: translate3d(0, 100%, 0); 3173 | } 3174 | } 3175 | 3176 | .slideOutDown { 3177 | -webkit-animation-name: slideOutDown; 3178 | animation-name: slideOutDown; 3179 | } 3180 | 3181 | @-webkit-keyframes slideOutLeft { 3182 | 0% { 3183 | -webkit-transform: translate3d(0, 0, 0); 3184 | transform: translate3d(0, 0, 0); 3185 | } 3186 | 3187 | 100% { 3188 | visibility: hidden; 3189 | -webkit-transform: translate3d(-100%, 0, 0); 3190 | transform: translate3d(-100%, 0, 0); 3191 | } 3192 | } 3193 | 3194 | @keyframes slideOutLeft { 3195 | 0% { 3196 | -webkit-transform: translate3d(0, 0, 0); 3197 | transform: translate3d(0, 0, 0); 3198 | } 3199 | 3200 | 100% { 3201 | visibility: hidden; 3202 | -webkit-transform: translate3d(-100%, 0, 0); 3203 | transform: translate3d(-100%, 0, 0); 3204 | } 3205 | } 3206 | 3207 | .slideOutLeft { 3208 | -webkit-animation-name: slideOutLeft; 3209 | animation-name: slideOutLeft; 3210 | } 3211 | 3212 | @-webkit-keyframes slideOutRight { 3213 | 0% { 3214 | -webkit-transform: translate3d(0, 0, 0); 3215 | transform: translate3d(0, 0, 0); 3216 | } 3217 | 3218 | 100% { 3219 | visibility: hidden; 3220 | -webkit-transform: translate3d(100%, 0, 0); 3221 | transform: translate3d(100%, 0, 0); 3222 | } 3223 | } 3224 | 3225 | @keyframes slideOutRight { 3226 | 0% { 3227 | -webkit-transform: translate3d(0, 0, 0); 3228 | transform: translate3d(0, 0, 0); 3229 | } 3230 | 3231 | 100% { 3232 | visibility: hidden; 3233 | -webkit-transform: translate3d(100%, 0, 0); 3234 | transform: translate3d(100%, 0, 0); 3235 | } 3236 | } 3237 | 3238 | .slideOutRight { 3239 | -webkit-animation-name: slideOutRight; 3240 | animation-name: slideOutRight; 3241 | } 3242 | 3243 | @-webkit-keyframes slideOutUp { 3244 | 0% { 3245 | -webkit-transform: translate3d(0, 0, 0); 3246 | transform: translate3d(0, 0, 0); 3247 | } 3248 | 3249 | 100% { 3250 | visibility: hidden; 3251 | -webkit-transform: translate3d(0, -100%, 0); 3252 | transform: translate3d(0, -100%, 0); 3253 | } 3254 | } 3255 | 3256 | @keyframes slideOutUp { 3257 | 0% { 3258 | -webkit-transform: translate3d(0, 0, 0); 3259 | transform: translate3d(0, 0, 0); 3260 | } 3261 | 3262 | 100% { 3263 | visibility: hidden; 3264 | -webkit-transform: translate3d(0, -100%, 0); 3265 | transform: translate3d(0, -100%, 0); 3266 | } 3267 | } 3268 | 3269 | .slideOutUp { 3270 | -webkit-animation-name: slideOutUp; 3271 | animation-name: slideOutUp; 3272 | } 3273 | --------------------------------------------------------------------------------