zoukankan      html  css  js  c++  java

  • CSS3 -- 动画库

    http://www.jq22.com/yanshi819

    文件结构：

    html

      1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4 <meta charset="utf-8">
  5 <title>animate.css</title>
  6 <link rel="stylesheet" href="animate.min.css">
  7 <style>
  8 * { margin: 0; padding: 0;}
  9 ul { list-style-type: none;}
 10 body { font: 14px "Microsoft Yahei"; overflow-x: hidden;}
 11 h1 { width: 900px; margin: 40px auto 100px; font: 32px "Microsoft Yahei"; text-align: center;}
 12 h2 { font: 96px "Microsoft Yahei"; font-weight: 500; text-align: center; color: #f35626;}
 13 .wrap p { margin-bottom: 100px; font: 30px "Microsoft Yahei"; text-align: center; color: #999;}
 14 .list { width: 1000px; margin: 0 auto;}
 15 dl { width: 1000px; margin: 10px auto; overflow: hidden;}
 16 dt { float: left; width: 1000px; padding: 5px 0; border-bottom: 1px solid #ddd; font-weight: 700;}
 17 dd { float: left; margin: 10px 10px 0 0; padding: 5px 10px; background-color: #eee; cursor: pointer;}
 18 
 19 .dowebok-explain  { display: none; margin-top: 20px; margin-bottom: 20px; font-size: 14px; text-align: center; color: #f50;}
 20 
 21 .tab { width: 900px; margin: 0 auto; border: 1px solid #ddd;}
 22 .tabNav { padding-bottom: 10px; overflow: hidden; zoom: 1; background-color: #f5f5f5;}
 23 .tabNav li { float: left; margin: 10px 0 0 10px; display: inline;}
 24 .tabNav a { float: left; padding: 5px 10px; color: #444; text-decoration: none;}
 25 .tabNav .active a { color: #fff; background-color: #f35626;}
 26 
 27 .tabPane { display: none; overflow: hidden; zoom: 1;}
 28 .tabCnt .active { display: block;}
 29 .tabCnt { padding: 10px 20px 20px;}
 30 .tabPane li { float: left; margin: 10px 10px 0 0; padding: 5px 10px; background-color: #eee; cursor: pointer;}
 31 .tabPane .active { color: #f35626;}
 32 </style>
 33 <script src="jquery-1.8.3.min.js"></script>
 34 <script>
 35 $(function(){
 36     if($.browser.msie && $.browser.version < 10){
 37         $('.dowebok-explain').show();
 38     }
 39 
 40     var $animate = $('#animate');
 41     var $btn = $('.tabCnt').find('li');
 42     $btn.click(function(){
 43         $(this).addClass('active').siblings().removeClass('active');
 44         $animate.removeClass().addClass($(this).text() + ' animated infinite');
 45         setTimeout(removeClass, 1000);
 46     });
 47 
 48     function removeClass(){
 49         $animate.removeClass();
 50     }
 51 
 52     var $tabNavItem = $('.tabNav').find('a');
 53     var $tabPane = $('.tabPane');
 54     $tabNavItem.each(function(i){
 55         $(this).click(function(){
 56             $(this).parent().addClass('active').siblings().removeClass('active');
 57             $tabPane.eq(i).addClass('active').siblings().removeClass('active');
 58             return false;
 59         });
 60     });
 61 });
 62 </script>
 63 </head>
 64 
 65 <body>
 66 <h1>Animate.css动画演示</h1>
 67 <div class="wrap">
 68     <h2 id="animate">Animate.css</h2>
 69     <p>——CSS3动画库</p>
 70 </div>
 71 
 72 <p class="dowebok-explain">您的浏览器不支持 CSS3 animate 属性，所以您看不到任何效果，请使用 Firefox、Chrome 或 IE10</p>
 73 <div class="tab">
 74     <ul class="tabNav">
 75         <li class="active"><a href="http://www.dowebok.com/">Attention Seekers</a></li>
 76         <li><a href="###">Bouncing Entrances</a></li>
 77         <li><a href="###">Bouncing Exits</a></li>
 78         <li><a href="###">Fading Entrances</a></li>
 79         <li><a href="###">Fading Exits</a></li>
 80         <li><a href="###">Flippers</a></li>
 81         <li><a href="###">Lightspeed</a></li>
 82         <li><a href="###">Rotating Entrances</a></li>
 83         <li><a href="###">Rotating Exits</a></li>
 84         <li><a href="###">Sliders</a></li>
 85         <li><a href="###">Specials</a></li>
 86     </ul>
 87 
 88     <div class="tabCnt">
 89         <ul class="tabPane active">
 90             <li>bounce</li>
 91             <li>flash</li>
 92             <li>pulse</li>
 93             <li>rubberBand</li>
 94             <li>shake</li>
 95             <li>swing</li>
 96             <li>tada</li>
 97             <li>wobble</li>
 98         </ul>
 99         
100         <ul class="tabPane">
101             <li>bounceIn</li>
102             <li>bounceInDown</li>
103             <li>bounceInLeft</li>
104             <li>bounceInRight</li>
105             <li>bounceInUp</li>
106         </ul>
107         
108         <ul class="tabPane">
109             <li>bounceOut</li>
110             <li>bounceOutDown</li>
111             <li>bounceOutLeft</li>
112             <li>bounceOutRight</li>
113             <li>bounceOutUp</li>
114         </ul>
115         
116         <ul class="tabPane">
117             <li>fadeIn</li>
118             <li>fadeInDown</li>
119             <li>fadeInDownBig</li>
120             <li>fadeInLeft</li>
121             <li>fadeInLeftBig</li>
122             <li>fadeInRight</li>
123             <li>fadeInRightBig</li>
124             <li>fadeInUp</li>
125             <li>fadeInUpBig</li>
126         </ul>
127         
128         <ul class="tabPane">
129             <li>fadeOut</li>
130             <li>fadeOutDown</li>
131             <li>fadeOutDownBig</li>
132             <li>fadeOutLeft</li>
133             <li>fadeOutLeftBig</li>
134             <li>fadeOutRight</li>
135             <li>fadeOutRightBig</li>
136             <li>fadeOutUp</li>
137             <li>fadeOutUpBig</li>
138         </ul>
139         
140         <ul class="tabPane">
141             <li>flip</li>
142             <li>flipInX</li>
143             <li>flipInY</li>
144             <li>flipOutX</li>
145             <li>flipOutY</li>
146         </ul>
147         
148         <ul class="tabPane">
149             <li>lightSpeedIn</li>
150             <li>lightSpeedOut</li>
151         </ul>
152         
153         <ul class="tabPane">
154             <li>rotateIn</li>
155             <li>rotateInDownLeft</li>
156             <li>rotateInDownRight</li>
157             <li>rotateInUpLeft</li>
158             <li>rotateInUpRight</li>
159         </ul>
160         
161         <h3></h3>
162         <ul class="tabPane">
163             <li>rotateOut</li>
164             <li>rotateOutDownLeft</li>
165             <li>rotateOutDownRight</li>
166             <li>rotateOutUpLeft</li>
167             <li>rotateOutUpRight</li>
168         </ul>
169         
170         <ul class="tabPane">
171             <li>slideInDown</li>
172             <li>slideInLeft</li>
173             <li>slideInRight</li>
174             <li>slideOutLeft</li>
175             <li>slideOutRight</li>
176             <li>slideOutUp</li>
177         </ul>
178         
179         <ul class="tabPane">
180             <li>hinge</li>
181             <li>rollIn</li>
182             <li>rollOut</li>
183         </ul>
184     </div>
185 </div>
186 
187 <style>
188 .vad { margin: 50px 0 5px; font-family: Consolas,arial,宋体; text-align:center;}
189 .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
190 .vad a:hover { color: #fff; background-color: #000;}
191 </style>
192 
193 </body>
194 </html>
    效果代码的结构
       1 @charset "UTF-8";/*!
   2 Animate.css - http://daneden.me/animate
   3 Licensed under the MIT license
   4 
   5 Copyright (c) 2013 Daniel Eden
   6 
   7 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
   8 
   9 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  10 
  11 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  12 */
  13 .animated {
  14     -webkit-animation-duration: 1s;
  15     animation-duration: 1s;
  16     -webkit-animation-fill-mode: both;
  17     animation-fill-mode: both
  18 }
  19 
  20 .animated.infinite {
  21     -webkit-animation-iteration-count: infinite;
  22     animation-iteration-count: infinite
  23 }
  24 
  25 .animated.hinge {
  26     -webkit-animation-duration: 2s;
  27     animation-duration: 2s
  28 }
  29 
  30 @-webkit-keyframes bounce {
  31     0%,100%,20%,50%,80% {
  32         -webkit-transform: translateY(0);
  33         transform: translateY(0)
  34     }
  35 
  36     40% {
  37         -webkit-transform: translateY(-30px);
  38         transform: translateY(-30px)
  39     }
  40 
  41     60% {
  42         -webkit-transform: translateY(-15px);
  43         transform: translateY(-15px)
  44     }
  45 }
  46 
  47 @keyframes bounce {
  48     0%,100%,20%,50%,80% {
  49         -webkit-transform: translateY(0);
  50         -ms-transform: translateY(0);
  51         transform: translateY(0)
  52     }
  53 
  54     40% {
  55         -webkit-transform: translateY(-30px);
  56         -ms-transform: translateY(-30px);
  57         transform: translateY(-30px)
  58     }
  59 
  60     60% {
  61         -webkit-transform: translateY(-15px);
  62         -ms-transform: translateY(-15px);
  63         transform: translateY(-15px)
  64     }
  65 }
  66 
  67 .bounce {
  68     -webkit-animation-name: bounce;
  69     animation-name: bounce
  70 }
  71 
  72 @-webkit-keyframes flash {
  73     0%,100%,50% {
  74         opacity: 1
  75     }
  76 
  77     25%,75% {
  78         opacity: 0
  79     }
  80 }
  81 
  82 @keyframes flash {
  83     0%,100%,50% {
  84         opacity: 1
  85     }
  86 
  87     25%,75% {
  88         opacity: 0
  89     }
  90 }
  91 
  92 .flash {
  93     -webkit-animation-name: flash;
  94     animation-name: flash
  95 }
  96 
  97 @-webkit-keyframes pulse {
  98     0% {
  99         -webkit-transform: scale(1);
 100         transform: scale(1)
 101     }
 102 
 103     50% {
 104         -webkit-transform: scale(1.1);
 105         transform: scale(1.1)
 106     }
 107 
 108     100% {
 109         -webkit-transform: scale(1);
 110         transform: scale(1)
 111     }
 112 }
 113 
 114 @keyframes pulse {
 115     0% {
 116         -webkit-transform: scale(1);
 117         -ms-transform: scale(1);
 118         transform: scale(1)
 119     }
 120 
 121     50% {
 122         -webkit-transform: scale(1.1);
 123         -ms-transform: scale(1.1);
 124         transform: scale(1.1)
 125     }
 126 
 127     100% {
 128         -webkit-transform: scale(1);
 129         -ms-transform: scale(1);
 130         transform: scale(1)
 131     }
 132 }
 133 
 134 .pulse {
 135     -webkit-animation-name: pulse;
 136     animation-name: pulse
 137 }
 138 
 139 @-webkit-keyframes rubberBand {
 140     0% {
 141         -webkit-transform: scale(1);
 142         transform: scale(1)
 143     }
 144 
 145     30% {
 146         -webkit-transform: scaleX(1.25) scaleY(0.75);
 147         transform: scaleX(1.25) scaleY(0.75)
 148     }
 149 
 150     40% {
 151         -webkit-transform: scaleX(0.75) scaleY(1.25);
 152         transform: scaleX(0.75) scaleY(1.25)
 153     }
 154 
 155     60% {
 156         -webkit-transform: scaleX(1.15) scaleY(0.85);
 157         transform: scaleX(1.15) scaleY(0.85)
 158     }
 159 
 160     100% {
 161         -webkit-transform: scale(1);
 162         transform: scale(1)
 163     }
 164 }
 165 
 166 @keyframes rubberBand {
 167     0% {
 168         -webkit-transform: scale(1);
 169         -ms-transform: scale(1);
 170         transform: scale(1)
 171     }
 172 
 173     30% {
 174         -webkit-transform: scaleX(1.25) scaleY(0.75);
 175         -ms-transform: scaleX(1.25) scaleY(0.75);
 176         transform: scaleX(1.25) scaleY(0.75)
 177     }
 178 
 179     40% {
 180         -webkit-transform: scaleX(0.75) scaleY(1.25);
 181         -ms-transform: scaleX(0.75) scaleY(1.25);
 182         transform: scaleX(0.75) scaleY(1.25)
 183     }
 184 
 185     60% {
 186         -webkit-transform: scaleX(1.15) scaleY(0.85);
 187         -ms-transform: scaleX(1.15) scaleY(0.85);
 188         transform: scaleX(1.15) scaleY(0.85)
 189     }
 190 
 191     100% {
 192         -webkit-transform: scale(1);
 193         -ms-transform: scale(1);
 194         transform: scale(1)
 195     }
 196 }
 197 
 198 .rubberBand {
 199     -webkit-animation-name: rubberBand;
 200     animation-name: rubberBand
 201 }
 202 
 203 @-webkit-keyframes shake {
 204     0%,100% {
 205         -webkit-transform: translateX(0);
 206         transform: translateX(0)
 207     }
 208 
 209     10%,30%,50%,70%,90% {
 210         -webkit-transform: translateX(-10px);
 211         transform: translateX(-10px)
 212     }
 213 
 214     20%,40%,60%,80% {
 215         -webkit-transform: translateX(10px);
 216         transform: translateX(10px)
 217     }
 218 }
 219 
 220 @keyframes shake {
 221     0%,100% {
 222         -webkit-transform: translateX(0);
 223         -ms-transform: translateX(0);
 224         transform: translateX(0)
 225     }
 226 
 227     10%,30%,50%,70%,90% {
 228         -webkit-transform: translateX(-10px);
 229         -ms-transform: translateX(-10px);
 230         transform: translateX(-10px)
 231     }
 232 
 233     20%,40%,60%,80% {
 234         -webkit-transform: translateX(10px);
 235         -ms-transform: translateX(10px);
 236         transform: translateX(10px)
 237     }
 238 }
 239 
 240 .shake {
 241     -webkit-animation-name: shake;
 242     animation-name: shake
 243 }
 244 
 245 @-webkit-keyframes swing {
 246     20% {
 247         -webkit-transform: rotate(15deg);
 248         transform: rotate(15deg)
 249     }
 250 
 251     40% {
 252         -webkit-transform: rotate(-10deg);
 253         transform: rotate(-10deg)
 254     }
 255 
 256     60% {
 257         -webkit-transform: rotate(5deg);
 258         transform: rotate(5deg)
 259     }
 260 
 261     80% {
 262         -webkit-transform: rotate(-5deg);
 263         transform: rotate(-5deg)
 264     }
 265 
 266     100% {
 267         -webkit-transform: rotate(0deg);
 268         transform: rotate(0deg)
 269     }
 270 }
 271 
 272 @keyframes swing {
 273     20% {
 274         -webkit-transform: rotate(15deg);
 275         -ms-transform: rotate(15deg);
 276         transform: rotate(15deg)
 277     }
 278 
 279     40% {
 280         -webkit-transform: rotate(-10deg);
 281         -ms-transform: rotate(-10deg);
 282         transform: rotate(-10deg)
 283     }
 284 
 285     60% {
 286         -webkit-transform: rotate(5deg);
 287         -ms-transform: rotate(5deg);
 288         transform: rotate(5deg)
 289     }
 290 
 291     80% {
 292         -webkit-transform: rotate(-5deg);
 293         -ms-transform: rotate(-5deg);
 294         transform: rotate(-5deg)
 295     }
 296 
 297     100% {
 298         -webkit-transform: rotate(0deg);
 299         -ms-transform: rotate(0deg);
 300         transform: rotate(0deg)
 301     }
 302 }
 303 
 304 .swing {
 305     -webkit-transform-origin: top center;
 306     -ms-transform-origin: top center;
 307     transform-origin: top center;
 308     -webkit-animation-name: swing;
 309     animation-name: swing
 310 }
 311 
 312 @-webkit-keyframes tada {
 313     0% {
 314         -webkit-transform: scale(1);
 315         transform: scale(1)
 316     }
 317 
 318     10%,20% {
 319         -webkit-transform: scale(0.9) rotate(-3deg);
 320         transform: scale(0.9) rotate(-3deg)
 321     }
 322 
 323     30%,50%,70%,90% {
 324         -webkit-transform: scale(1.1) rotate(3deg);
 325         transform: scale(1.1) rotate(3deg)
 326     }
 327 
 328     40%,60%,80% {
 329         -webkit-transform: scale(1.1) rotate(-3deg);
 330         transform: scale(1.1) rotate(-3deg)
 331     }
 332 
 333     100% {
 334         -webkit-transform: scale(1) rotate(0);
 335         transform: scale(1) rotate(0)
 336     }
 337 }
 338 
 339 @keyframes tada {
 340     0% {
 341         -webkit-transform: scale(1);
 342         -ms-transform: scale(1);
 343         transform: scale(1)
 344     }
 345 
 346     10%,20% {
 347         -webkit-transform: scale(0.9) rotate(-3deg);
 348         -ms-transform: scale(0.9) rotate(-3deg);
 349         transform: scale(0.9) rotate(-3deg)
 350     }
 351 
 352     30%,50%,70%,90% {
 353         -webkit-transform: scale(1.1) rotate(3deg);
 354         -ms-transform: scale(1.1) rotate(3deg);
 355         transform: scale(1.1) rotate(3deg)
 356     }
 357 
 358     40%,60%,80% {
 359         -webkit-transform: scale(1.1) rotate(-3deg);
 360         -ms-transform: scale(1.1) rotate(-3deg);
 361         transform: scale(1.1) rotate(-3deg)
 362     }
 363 
 364     100% {
 365         -webkit-transform: scale(1) rotate(0);
 366         -ms-transform: scale(1) rotate(0);
 367         transform: scale(1) rotate(0)
 368     }
 369 }
 370 
 371 .tada {
 372     -webkit-animation-name: tada;
 373     animation-name: tada
 374 }
 375 
 376 @-webkit-keyframes wobble {
 377     0% {
 378         -webkit-transform: translateX(0%);
 379         transform: translateX(0%)
 380     }
 381 
 382     15% {
 383         -webkit-transform: translateX(-25%) rotate(-5deg);
 384         transform: translateX(-25%) rotate(-5deg)
 385     }
 386 
 387     30% {
 388         -webkit-transform: translateX(20%) rotate(3deg);
 389         transform: translateX(20%) rotate(3deg)
 390     }
 391 
 392     45% {
 393         -webkit-transform: translateX(-15%) rotate(-3deg);
 394         transform: translateX(-15%) rotate(-3deg)
 395     }
 396 
 397     60% {
 398         -webkit-transform: translateX(10%) rotate(2deg);
 399         transform: translateX(10%) rotate(2deg)
 400     }
 401 
 402     75% {
 403         -webkit-transform: translateX(-5%) rotate(-1deg);
 404         transform: translateX(-5%) rotate(-1deg)
 405     }
 406 
 407     100% {
 408         -webkit-transform: translateX(0%);
 409         transform: translateX(0%)
 410     }
 411 }
 412 
 413 @keyframes wobble {
 414     0% {
 415         -webkit-transform: translateX(0%);
 416         -ms-transform: translateX(0%);
 417         transform: translateX(0%)
 418     }
 419 
 420     15% {
 421         -webkit-transform: translateX(-25%) rotate(-5deg);
 422         -ms-transform: translateX(-25%) rotate(-5deg);
 423         transform: translateX(-25%) rotate(-5deg)
 424     }
 425 
 426     30% {
 427         -webkit-transform: translateX(20%) rotate(3deg);
 428         -ms-transform: translateX(20%) rotate(3deg);
 429         transform: translateX(20%) rotate(3deg)
 430     }
 431 
 432     45% {
 433         -webkit-transform: translateX(-15%) rotate(-3deg);
 434         -ms-transform: translateX(-15%) rotate(-3deg);
 435         transform: translateX(-15%) rotate(-3deg)
 436     }
 437 
 438     60% {
 439         -webkit-transform: translateX(10%) rotate(2deg);
 440         -ms-transform: translateX(10%) rotate(2deg);
 441         transform: translateX(10%) rotate(2deg)
 442     }
 443 
 444     75% {
 445         -webkit-transform: translateX(-5%) rotate(-1deg);
 446         -ms-transform: translateX(-5%) rotate(-1deg);
 447         transform: translateX(-5%) rotate(-1deg)
 448     }
 449 
 450     100% {
 451         -webkit-transform: translateX(0%);
 452         -ms-transform: translateX(0%);
 453         transform: translateX(0%)
 454     }
 455 }
 456 
 457 .wobble {
 458     -webkit-animation-name: wobble;
 459     animation-name: wobble
 460 }
 461 
 462 @-webkit-keyframes bounceIn {
 463     0% {
 464         opacity: 0;
 465         -webkit-transform: scale(.3);
 466         transform: scale(.3)
 467     }
 468 
 469     50% {
 470         opacity: 1;
 471         -webkit-transform: scale(1.05);
 472         transform: scale(1.05)
 473     }
 474 
 475     70% {
 476         -webkit-transform: scale(.9);
 477         transform: scale(.9)
 478     }
 479 
 480     100% {
 481         opacity: 1;
 482         -webkit-transform: scale(1);
 483         transform: scale(1)
 484     }
 485 }
 486 
 487 @keyframes bounceIn {
 488     0% {
 489         opacity: 0;
 490         -webkit-transform: scale(.3);
 491         -ms-transform: scale(.3);
 492         transform: scale(.3)
 493     }
 494 
 495     50% {
 496         opacity: 1;
 497         -webkit-transform: scale(1.05);
 498         -ms-transform: scale(1.05);
 499         transform: scale(1.05)
 500     }
 501 
 502     70% {
 503         -webkit-transform: scale(.9);
 504         -ms-transform: scale(.9);
 505         transform: scale(.9)
 506     }
 507 
 508     100% {
 509         opacity: 1;
 510         -webkit-transform: scale(1);
 511         -ms-transform: scale(1);
 512         transform: scale(1)
 513     }
 514 }
 515 
 516 .bounceIn {
 517     -webkit-animation-name: bounceIn;
 518     animation-name: bounceIn
 519 }
 520 
 521 @-webkit-keyframes bounceInDown {
 522     0% {
 523         opacity: 0;
 524         -webkit-transform: translateY(-2000px);
 525         transform: translateY(-2000px)
 526     }
 527 
 528     60% {
 529         opacity: 1;
 530         -webkit-transform: translateY(30px);
 531         transform: translateY(30px)
 532     }
 533 
 534     80% {
 535         -webkit-transform: translateY(-10px);
 536         transform: translateY(-10px)
 537     }
 538 
 539     100% {
 540         -webkit-transform: translateY(0);
 541         transform: translateY(0)
 542     }
 543 }
 544 
 545 @keyframes bounceInDown {
 546     0% {
 547         opacity: 0;
 548         -webkit-transform: translateY(-2000px);
 549         -ms-transform: translateY(-2000px);
 550         transform: translateY(-2000px)
 551     }
 552 
 553     60% {
 554         opacity: 1;
 555         -webkit-transform: translateY(30px);
 556         -ms-transform: translateY(30px);
 557         transform: translateY(30px)
 558     }
 559 
 560     80% {
 561         -webkit-transform: translateY(-10px);
 562         -ms-transform: translateY(-10px);
 563         transform: translateY(-10px)
 564     }
 565 
 566     100% {
 567         -webkit-transform: translateY(0);
 568         -ms-transform: translateY(0);
 569         transform: translateY(0)
 570     }
 571 }
 572 
 573 .bounceInDown {
 574     -webkit-animation-name: bounceInDown;
 575     animation-name: bounceInDown
 576 }
 577 
 578 @-webkit-keyframes bounceInLeft {
 579     0% {
 580         opacity: 0;
 581         -webkit-transform: translateX(-2000px);
 582         transform: translateX(-2000px)
 583     }
 584 
 585     60% {
 586         opacity: 1;
 587         -webkit-transform: translateX(30px);
 588         transform: translateX(30px)
 589     }
 590 
 591     80% {
 592         -webkit-transform: translateX(-10px);
 593         transform: translateX(-10px)
 594     }
 595 
 596     100% {
 597         -webkit-transform: translateX(0);
 598         transform: translateX(0)
 599     }
 600 }
 601 
 602 @keyframes bounceInLeft {
 603     0% {
 604         opacity: 0;
 605         -webkit-transform: translateX(-2000px);
 606         -ms-transform: translateX(-2000px);
 607         transform: translateX(-2000px)
 608     }
 609 
 610     60% {
 611         opacity: 1;
 612         -webkit-transform: translateX(30px);
 613         -ms-transform: translateX(30px);
 614         transform: translateX(30px)
 615     }
 616 
 617     80% {
 618         -webkit-transform: translateX(-10px);
 619         -ms-transform: translateX(-10px);
 620         transform: translateX(-10px)
 621     }
 622 
 623     100% {
 624         -webkit-transform: translateX(0);
 625         -ms-transform: translateX(0);
 626         transform: translateX(0)
 627     }
 628 }
 629 
 630 .bounceInLeft {
 631     -webkit-animation-name: bounceInLeft;
 632     animation-name: bounceInLeft
 633 }
 634 
 635 @-webkit-keyframes bounceInRight {
 636     0% {
 637         opacity: 0;
 638         -webkit-transform: translateX(2000px);
 639         transform: translateX(2000px)
 640     }
 641 
 642     60% {
 643         opacity: 1;
 644         -webkit-transform: translateX(-30px);
 645         transform: translateX(-30px)
 646     }
 647 
 648     80% {
 649         -webkit-transform: translateX(10px);
 650         transform: translateX(10px)
 651     }
 652 
 653     100% {
 654         -webkit-transform: translateX(0);
 655         transform: translateX(0)
 656     }
 657 }
 658 
 659 @keyframes bounceInRight {
 660     0% {
 661         opacity: 0;
 662         -webkit-transform: translateX(2000px);
 663         -ms-transform: translateX(2000px);
 664         transform: translateX(2000px)
 665     }
 666 
 667     60% {
 668         opacity: 1;
 669         -webkit-transform: translateX(-30px);
 670         -ms-transform: translateX(-30px);
 671         transform: translateX(-30px)
 672     }
 673 
 674     80% {
 675         -webkit-transform: translateX(10px);
 676         -ms-transform: translateX(10px);
 677         transform: translateX(10px)
 678     }
 679 
 680     100% {
 681         -webkit-transform: translateX(0);
 682         -ms-transform: translateX(0);
 683         transform: translateX(0)
 684     }
 685 }
 686 
 687 .bounceInRight {
 688     -webkit-animation-name: bounceInRight;
 689     animation-name: bounceInRight
 690 }
 691 
 692 @-webkit-keyframes bounceInUp {
 693     0% {
 694         opacity: 0;
 695         -webkit-transform: translateY(2000px);
 696         transform: translateY(2000px)
 697     }
 698 
 699     60% {
 700         opacity: 1;
 701         -webkit-transform: translateY(-30px);
 702         transform: translateY(-30px)
 703     }
 704 
 705     80% {
 706         -webkit-transform: translateY(10px);
 707         transform: translateY(10px)
 708     }
 709 
 710     100% {
 711         -webkit-transform: translateY(0);
 712         transform: translateY(0)
 713     }
 714 }
 715 
 716 @keyframes bounceInUp {
 717     0% {
 718         opacity: 0;
 719         -webkit-transform: translateY(2000px);
 720         -ms-transform: translateY(2000px);
 721         transform: translateY(2000px)
 722     }
 723 
 724     60% {
 725         opacity: 1;
 726         -webkit-transform: translateY(-30px);
 727         -ms-transform: translateY(-30px);
 728         transform: translateY(-30px)
 729     }
 730 
 731     80% {
 732         -webkit-transform: translateY(10px);
 733         -ms-transform: translateY(10px);
 734         transform: translateY(10px)
 735     }
 736 
 737     100% {
 738         -webkit-transform: translateY(0);
 739         -ms-transform: translateY(0);
 740         transform: translateY(0)
 741     }
 742 }
 743 
 744 .bounceInUp {
 745     -webkit-animation-name: bounceInUp;
 746     animation-name: bounceInUp
 747 }
 748 
 749 @-webkit-keyframes bounceOut {
 750     0% {
 751         -webkit-transform: scale(1);
 752         transform: scale(1)
 753     }
 754 
 755     25% {
 756         -webkit-transform: scale(.95);
 757         transform: scale(.95)
 758     }
 759 
 760     50% {
 761         opacity: 1;
 762         -webkit-transform: scale(1.1);
 763         transform: scale(1.1)
 764     }
 765 
 766     100% {
 767         opacity: 0;
 768         -webkit-transform: scale(.3);
 769         transform: scale(.3)
 770     }
 771 }
 772 
 773 @keyframes bounceOut {
 774     0% {
 775         -webkit-transform: scale(1);
 776         -ms-transform: scale(1);
 777         transform: scale(1)
 778     }
 779 
 780     25% {
 781         -webkit-transform: scale(.95);
 782         -ms-transform: scale(.95);
 783         transform: scale(.95)
 784     }
 785 
 786     50% {
 787         opacity: 1;
 788         -webkit-transform: scale(1.1);
 789         -ms-transform: scale(1.1);
 790         transform: scale(1.1)
 791     }
 792 
 793     100% {
 794         opacity: 0;
 795         -webkit-transform: scale(.3);
 796         -ms-transform: scale(.3);
 797         transform: scale(.3)
 798     }
 799 }
 800 
 801 .bounceOut {
 802     -webkit-animation-name: bounceOut;
 803     animation-name: bounceOut
 804 }
 805 
 806 @-webkit-keyframes bounceOutDown {
 807     0% {
 808         -webkit-transform: translateY(0);
 809         transform: translateY(0)
 810     }
 811 
 812     20% {
 813         opacity: 1;
 814         -webkit-transform: translateY(-20px);
 815         transform: translateY(-20px)
 816     }
 817 
 818     100% {
 819         opacity: 0;
 820         -webkit-transform: translateY(2000px);
 821         transform: translateY(2000px)
 822     }
 823 }
 824 
 825 @keyframes bounceOutDown {
 826     0% {
 827         -webkit-transform: translateY(0);
 828         -ms-transform: translateY(0);
 829         transform: translateY(0)
 830     }
 831 
 832     20% {
 833         opacity: 1;
 834         -webkit-transform: translateY(-20px);
 835         -ms-transform: translateY(-20px);
 836         transform: translateY(-20px)
 837     }
 838 
 839     100% {
 840         opacity: 0;
 841         -webkit-transform: translateY(2000px);
 842         -ms-transform: translateY(2000px);
 843         transform: translateY(2000px)
 844     }
 845 }
 846 
 847 .bounceOutDown {
 848     -webkit-animation-name: bounceOutDown;
 849     animation-name: bounceOutDown
 850 }
 851 
 852 @-webkit-keyframes bounceOutLeft {
 853     0% {
 854         -webkit-transform: translateX(0);
 855         transform: translateX(0)
 856     }
 857 
 858     20% {
 859         opacity: 1;
 860         -webkit-transform: translateX(20px);
 861         transform: translateX(20px)
 862     }
 863 
 864     100% {
 865         opacity: 0;
 866         -webkit-transform: translateX(-2000px);
 867         transform: translateX(-2000px)
 868     }
 869 }
 870 
 871 @keyframes bounceOutLeft {
 872     0% {
 873         -webkit-transform: translateX(0);
 874         -ms-transform: translateX(0);
 875         transform: translateX(0)
 876     }
 877 
 878     20% {
 879         opacity: 1;
 880         -webkit-transform: translateX(20px);
 881         -ms-transform: translateX(20px);
 882         transform: translateX(20px)
 883     }
 884 
 885     100% {
 886         opacity: 0;
 887         -webkit-transform: translateX(-2000px);
 888         -ms-transform: translateX(-2000px);
 889         transform: translateX(-2000px)
 890     }
 891 }
 892 
 893 .bounceOutLeft {
 894     -webkit-animation-name: bounceOutLeft;
 895     animation-name: bounceOutLeft
 896 }
 897 
 898 @-webkit-keyframes bounceOutRight {
 899     0% {
 900         -webkit-transform: translateX(0);
 901         transform: translateX(0)
 902     }
 903 
 904     20% {
 905         opacity: 1;
 906         -webkit-transform: translateX(-20px);
 907         transform: translateX(-20px)
 908     }
 909 
 910     100% {
 911         opacity: 0;
 912         -webkit-transform: translateX(2000px);
 913         transform: translateX(2000px)
 914     }
 915 }
 916 
 917 @keyframes bounceOutRight {
 918     0% {
 919         -webkit-transform: translateX(0);
 920         -ms-transform: translateX(0);
 921         transform: translateX(0)
 922     }
 923 
 924     20% {
 925         opacity: 1;
 926         -webkit-transform: translateX(-20px);
 927         -ms-transform: translateX(-20px);
 928         transform: translateX(-20px)
 929     }
 930 
 931     100% {
 932         opacity: 0;
 933         -webkit-transform: translateX(2000px);
 934         -ms-transform: translateX(2000px);
 935         transform: translateX(2000px)
 936     }
 937 }
 938 
 939 .bounceOutRight {
 940     -webkit-animation-name: bounceOutRight;
 941     animation-name: bounceOutRight
 942 }
 943 
 944 @-webkit-keyframes bounceOutUp {
 945     0% {
 946         -webkit-transform: translateY(0);
 947         transform: translateY(0)
 948     }
 949 
 950     20% {
 951         opacity: 1;
 952         -webkit-transform: translateY(20px);
 953         transform: translateY(20px)
 954     }
 955 
 956     100% {
 957         opacity: 0;
 958         -webkit-transform: translateY(-2000px);
 959         transform: translateY(-2000px)
 960     }
 961 }
 962 
 963 @keyframes bounceOutUp {
 964     0% {
 965         -webkit-transform: translateY(0);
 966         -ms-transform: translateY(0);
 967         transform: translateY(0)
 968     }
 969 
 970     20% {
 971         opacity: 1;
 972         -webkit-transform: translateY(20px);
 973         -ms-transform: translateY(20px);
 974         transform: translateY(20px)
 975     }
 976 
 977     100% {
 978         opacity: 0;
 979         -webkit-transform: translateY(-2000px);
 980         -ms-transform: translateY(-2000px);
 981         transform: translateY(-2000px)
 982     }
 983 }
 984 
 985 .bounceOutUp {
 986     -webkit-animation-name: bounceOutUp;
 987     animation-name: bounceOutUp
 988 }
 989 
 990 @-webkit-keyframes fadeIn {
 991     0% {
 992         opacity: 0
 993     }
 994 
 995     100% {
 996         opacity: 1
 997     }
 998 }
 999 
1000 @keyframes fadeIn {
1001     0% {
1002         opacity: 0
1003     }
1004 
1005     100% {
1006         opacity: 1
1007     }
1008 }
1009 
1010 .fadeIn {
1011     -webkit-animation-name: fadeIn;
1012     animation-name: fadeIn
1013 }
1014 
1015 @-webkit-keyframes fadeInDown {
1016     0% {
1017         opacity: 0;
1018         -webkit-transform: translateY(-20px);
1019         transform: translateY(-20px)
1020     }
1021 
1022     100% {
1023         opacity: 1;
1024         -webkit-transform: translateY(0);
1025         transform: translateY(0)
1026     }
1027 }
1028 
1029 @keyframes fadeInDown {
1030     0% {
1031         opacity: 0;
1032         -webkit-transform: translateY(-20px);
1033         -ms-transform: translateY(-20px);
1034         transform: translateY(-20px)
1035     }
1036 
1037     100% {
1038         opacity: 1;
1039         -webkit-transform: translateY(0);
1040         -ms-transform: translateY(0);
1041         transform: translateY(0)
1042     }
1043 }
1044 
1045 .fadeInDown {
1046     -webkit-animation-name: fadeInDown;
1047     animation-name: fadeInDown
1048 }
1049 
1050 @-webkit-keyframes fadeInDownBig {
1051     0% {
1052         opacity: 0;
1053         -webkit-transform: translateY(-2000px);
1054         transform: translateY(-2000px)
1055     }
1056 
1057     100% {
1058         opacity: 1;
1059         -webkit-transform: translateY(0);
1060         transform: translateY(0)
1061     }
1062 }
1063 
1064 @keyframes fadeInDownBig {
1065     0% {
1066         opacity: 0;
1067         -webkit-transform: translateY(-2000px);
1068         -ms-transform: translateY(-2000px);
1069         transform: translateY(-2000px)
1070     }
1071 
1072     100% {
1073         opacity: 1;
1074         -webkit-transform: translateY(0);
1075         -ms-transform: translateY(0);
1076         transform: translateY(0)
1077     }
1078 }
1079 
1080 .fadeInDownBig {
1081     -webkit-animation-name: fadeInDownBig;
1082     animation-name: fadeInDownBig
1083 }
1084 
1085 @-webkit-keyframes fadeInLeft {
1086     0% {
1087         opacity: 0;
1088         -webkit-transform: translateX(-20px);
1089         transform: translateX(-20px)
1090     }
1091 
1092     100% {
1093         opacity: 1;
1094         -webkit-transform: translateX(0);
1095         transform: translateX(0)
1096     }
1097 }
1098 
1099 @keyframes fadeInLeft {
1100     0% {
1101         opacity: 0;
1102         -webkit-transform: translateX(-20px);
1103         -ms-transform: translateX(-20px);
1104         transform: translateX(-20px)
1105     }
1106 
1107     100% {
1108         opacity: 1;
1109         -webkit-transform: translateX(0);
1110         -ms-transform: translateX(0);
1111         transform: translateX(0)
1112     }
1113 }
1114 
1115 .fadeInLeft {
1116     -webkit-animation-name: fadeInLeft;
1117     animation-name: fadeInLeft
1118 }
1119 
1120 @-webkit-keyframes fadeInLeftBig {
1121     0% {
1122         opacity: 0;
1123         -webkit-transform: translateX(-2000px);
1124         transform: translateX(-2000px)
1125     }
1126 
1127     100% {
1128         opacity: 1;
1129         -webkit-transform: translateX(0);
1130         transform: translateX(0)
1131     }
1132 }
1133 
1134 @keyframes fadeInLeftBig {
1135     0% {
1136         opacity: 0;
1137         -webkit-transform: translateX(-2000px);
1138         -ms-transform: translateX(-2000px);
1139         transform: translateX(-2000px)
1140     }
1141 
1142     100% {
1143         opacity: 1;
1144         -webkit-transform: translateX(0);
1145         -ms-transform: translateX(0);
1146         transform: translateX(0)
1147     }
1148 }
1149 
1150 .fadeInLeftBig {
1151     -webkit-animation-name: fadeInLeftBig;
1152     animation-name: fadeInLeftBig
1153 }
1154 
1155 @-webkit-keyframes fadeInRight {
1156     0% {
1157         opacity: 0;
1158         -webkit-transform: translateX(20px);
1159         transform: translateX(20px)
1160     }
1161 
1162     100% {
1163         opacity: 1;
1164         -webkit-transform: translateX(0);
1165         transform: translateX(0)
1166     }
1167 }
1168 
1169 @keyframes fadeInRight {
1170     0% {
1171         opacity: 0;
1172         -webkit-transform: translateX(20px);
1173         -ms-transform: translateX(20px);
1174         transform: translateX(20px)
1175     }
1176 
1177     100% {
1178         opacity: 1;
1179         -webkit-transform: translateX(0);
1180         -ms-transform: translateX(0);
1181         transform: translateX(0)
1182     }
1183 }
1184 
1185 .fadeInRight {
1186     -webkit-animation-name: fadeInRight;
1187     animation-name: fadeInRight
1188 }
1189 
1190 @-webkit-keyframes fadeInRightBig {
1191     0% {
1192         opacity: 0;
1193         -webkit-transform: translateX(2000px);
1194         transform: translateX(2000px)
1195     }
1196 
1197     100% {
1198         opacity: 1;
1199         -webkit-transform: translateX(0);
1200         transform: translateX(0)
1201     }
1202 }
1203 
1204 @keyframes fadeInRightBig {
1205     0% {
1206         opacity: 0;
1207         -webkit-transform: translateX(2000px);
1208         -ms-transform: translateX(2000px);
1209         transform: translateX(2000px)
1210     }
1211 
1212     100% {
1213         opacity: 1;
1214         -webkit-transform: translateX(0);
1215         -ms-transform: translateX(0);
1216         transform: translateX(0)
1217     }
1218 }
1219 
1220 .fadeInRightBig {
1221     -webkit-animation-name: fadeInRightBig;
1222     animation-name: fadeInRightBig
1223 }
1224 
1225 @-webkit-keyframes fadeInUp {
1226     0% {
1227         opacity: 0;
1228         -webkit-transform: translateY(20px);
1229         transform: translateY(20px)
1230     }
1231 
1232     100% {
1233         opacity: 1;
1234         -webkit-transform: translateY(0);
1235         transform: translateY(0)
1236     }
1237 }
1238 
1239 @keyframes fadeInUp {
1240     0% {
1241         opacity: 0;
1242         -webkit-transform: translateY(20px);
1243         -ms-transform: translateY(20px);
1244         transform: translateY(20px)
1245     }
1246 
1247     100% {
1248         opacity: 1;
1249         -webkit-transform: translateY(0);
1250         -ms-transform: translateY(0);
1251         transform: translateY(0)
1252     }
1253 }
1254 
1255 .fadeInUp {
1256     -webkit-animation-name: fadeInUp;
1257     animation-name: fadeInUp
1258 }
1259 
1260 @-webkit-keyframes fadeInUpBig {
1261     0% {
1262         opacity: 0;
1263         -webkit-transform: translateY(2000px);
1264         transform: translateY(2000px)
1265     }
1266 
1267     100% {
1268         opacity: 1;
1269         -webkit-transform: translateY(0);
1270         transform: translateY(0)
1271     }
1272 }
1273 
1274 @keyframes fadeInUpBig {
1275     0% {
1276         opacity: 0;
1277         -webkit-transform: translateY(2000px);
1278         -ms-transform: translateY(2000px);
1279         transform: translateY(2000px)
1280     }
1281 
1282     100% {
1283         opacity: 1;
1284         -webkit-transform: translateY(0);
1285         -ms-transform: translateY(0);
1286         transform: translateY(0)
1287     }
1288 }
1289 
1290 .fadeInUpBig {
1291     -webkit-animation-name: fadeInUpBig;
1292     animation-name: fadeInUpBig
1293 }
1294 
1295 @-webkit-keyframes fadeOut {
1296     0% {
1297         opacity: 1
1298     }
1299 
1300     100% {
1301         opacity: 0
1302     }
1303 }
1304 
1305 @keyframes fadeOut {
1306     0% {
1307         opacity: 1
1308     }
1309 
1310     100% {
1311         opacity: 0
1312     }
1313 }
1314 
1315 .fadeOut {
1316     -webkit-animation-name: fadeOut;
1317     animation-name: fadeOut
1318 }
1319 
1320 @-webkit-keyframes fadeOutDown {
1321     0% {
1322         opacity: 1;
1323         -webkit-transform: translateY(0);
1324         transform: translateY(0)
1325     }
1326 
1327     100% {
1328         opacity: 0;
1329         -webkit-transform: translateY(20px);
1330         transform: translateY(20px)
1331     }
1332 }
1333 
1334 @keyframes fadeOutDown {
1335     0% {
1336         opacity: 1;
1337         -webkit-transform: translateY(0);
1338         -ms-transform: translateY(0);
1339         transform: translateY(0)
1340     }
1341 
1342     100% {
1343         opacity: 0;
1344         -webkit-transform: translateY(20px);
1345         -ms-transform: translateY(20px);
1346         transform: translateY(20px)
1347     }
1348 }
1349 
1350 .fadeOutDown {
1351     -webkit-animation-name: fadeOutDown;
1352     animation-name: fadeOutDown
1353 }
1354 
1355 @-webkit-keyframes fadeOutDownBig {
1356     0% {
1357         opacity: 1;
1358         -webkit-transform: translateY(0);
1359         transform: translateY(0)
1360     }
1361 
1362     100% {
1363         opacity: 0;
1364         -webkit-transform: translateY(2000px);
1365         transform: translateY(2000px)
1366     }
1367 }
1368 
1369 @keyframes fadeOutDownBig {
1370     0% {
1371         opacity: 1;
1372         -webkit-transform: translateY(0);
1373         -ms-transform: translateY(0);
1374         transform: translateY(0)
1375     }
1376 
1377     100% {
1378         opacity: 0;
1379         -webkit-transform: translateY(2000px);
1380         -ms-transform: translateY(2000px);
1381         transform: translateY(2000px)
1382     }
1383 }
1384 
1385 .fadeOutDownBig {
1386     -webkit-animation-name: fadeOutDownBig;
1387     animation-name: fadeOutDownBig
1388 }
1389 
1390 @-webkit-keyframes fadeOutLeft {
1391     0% {
1392         opacity: 1;
1393         -webkit-transform: translateX(0);
1394         transform: translateX(0)
1395     }
1396 
1397     100% {
1398         opacity: 0;
1399         -webkit-transform: translateX(-20px);
1400         transform: translateX(-20px)
1401     }
1402 }
1403 
1404 @keyframes fadeOutLeft {
1405     0% {
1406         opacity: 1;
1407         -webkit-transform: translateX(0);
1408         -ms-transform: translateX(0);
1409         transform: translateX(0)
1410     }
1411 
1412     100% {
1413         opacity: 0;
1414         -webkit-transform: translateX(-20px);
1415         -ms-transform: translateX(-20px);
1416         transform: translateX(-20px)
1417     }
1418 }
1419 
1420 .fadeOutLeft {
1421     -webkit-animation-name: fadeOutLeft;
1422     animation-name: fadeOutLeft
1423 }
1424 
1425 @-webkit-keyframes fadeOutLeftBig {
1426     0% {
1427         opacity: 1;
1428         -webkit-transform: translateX(0);
1429         transform: translateX(0)
1430     }
1431 
1432     100% {
1433         opacity: 0;
1434         -webkit-transform: translateX(-2000px);
1435         transform: translateX(-2000px)
1436     }
1437 }
1438 
1439 @keyframes fadeOutLeftBig {
1440     0% {
1441         opacity: 1;
1442         -webkit-transform: translateX(0);
1443         -ms-transform: translateX(0);
1444         transform: translateX(0)
1445     }
1446 
1447     100% {
1448         opacity: 0;
1449         -webkit-transform: translateX(-2000px);
1450         -ms-transform: translateX(-2000px);
1451         transform: translateX(-2000px)
1452     }
1453 }
1454 
1455 .fadeOutLeftBig {
1456     -webkit-animation-name: fadeOutLeftBig;
1457     animation-name: fadeOutLeftBig
1458 }
1459 
1460 @-webkit-keyframes fadeOutRight {
1461     0% {
1462         opacity: 1;
1463         -webkit-transform: translateX(0);
1464         transform: translateX(0)
1465     }
1466 
1467     100% {
1468         opacity: 0;
1469         -webkit-transform: translateX(20px);
1470         transform: translateX(20px)
1471     }
1472 }
1473 
1474 @keyframes fadeOutRight {
1475     0% {
1476         opacity: 1;
1477         -webkit-transform: translateX(0);
1478         -ms-transform: translateX(0);
1479         transform: translateX(0)
1480     }
1481 
1482     100% {
1483         opacity: 0;
1484         -webkit-transform: translateX(20px);
1485         -ms-transform: translateX(20px);
1486         transform: translateX(20px)
1487     }
1488 }
1489 
1490 .fadeOutRight {
1491     -webkit-animation-name: fadeOutRight;
1492     animation-name: fadeOutRight
1493 }
1494 
1495 @-webkit-keyframes fadeOutRightBig {
1496     0% {
1497         opacity: 1;
1498         -webkit-transform: translateX(0);
1499         transform: translateX(0)
1500     }
1501 
1502     100% {
1503         opacity: 0;
1504         -webkit-transform: translateX(2000px);
1505         transform: translateX(2000px)
1506     }
1507 }
1508 
1509 @keyframes fadeOutRightBig {
1510     0% {
1511         opacity: 1;
1512         -webkit-transform: translateX(0);
1513         -ms-transform: translateX(0);
1514         transform: translateX(0)
1515     }
1516 
1517     100% {
1518         opacity: 0;
1519         -webkit-transform: translateX(2000px);
1520         -ms-transform: translateX(2000px);
1521         transform: translateX(2000px)
1522     }
1523 }
1524 
1525 .fadeOutRightBig {
1526     -webkit-animation-name: fadeOutRightBig;
1527     animation-name: fadeOutRightBig
1528 }
1529 
1530 @-webkit-keyframes fadeOutUp {
1531     0% {
1532         opacity: 1;
1533         -webkit-transform: translateY(0);
1534         transform: translateY(0)
1535     }
1536 
1537     100% {
1538         opacity: 0;
1539         -webkit-transform: translateY(-20px);
1540         transform: translateY(-20px)
1541     }
1542 }
1543 
1544 @keyframes fadeOutUp {
1545     0% {
1546         opacity: 1;
1547         -webkit-transform: translateY(0);
1548         -ms-transform: translateY(0);
1549         transform: translateY(0)
1550     }
1551 
1552     100% {
1553         opacity: 0;
1554         -webkit-transform: translateY(-20px);
1555         -ms-transform: translateY(-20px);
1556         transform: translateY(-20px)
1557     }
1558 }
1559 
1560 .fadeOutUp {
1561     -webkit-animation-name: fadeOutUp;
1562     animation-name: fadeOutUp
1563 }
1564 
1565 @-webkit-keyframes fadeOutUpBig {
1566     0% {
1567         opacity: 1;
1568         -webkit-transform: translateY(0);
1569         transform: translateY(0)
1570     }
1571 
1572     100% {
1573         opacity: 0;
1574         -webkit-transform: translateY(-2000px);
1575         transform: translateY(-2000px)
1576     }
1577 }
1578 
1579 @keyframes fadeOutUpBig {
1580     0% {
1581         opacity: 1;
1582         -webkit-transform: translateY(0);
1583         -ms-transform: translateY(0);
1584         transform: translateY(0)
1585     }
1586 
1587     100% {
1588         opacity: 0;
1589         -webkit-transform: translateY(-2000px);
1590         -ms-transform: translateY(-2000px);
1591         transform: translateY(-2000px)
1592     }
1593 }
1594 
1595 .fadeOutUpBig {
1596     -webkit-animation-name: fadeOutUpBig;
1597     animation-name: fadeOutUpBig
1598 }
1599 
1600 @-webkit-keyframes flip {
1601     0% {
1602         -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1603         transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1604         -webkit-animation-timing-function: ease-out;
1605         animation-timing-function: ease-out
1606     }
1607 
1608     40% {
1609         -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1610         transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1611         -webkit-animation-timing-function: ease-out;
1612         animation-timing-function: ease-out
1613     }
1614 
1615     50% {
1616         -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1617         transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1618         -webkit-animation-timing-function: ease-in;
1619         animation-timing-function: ease-in
1620     }
1621 
1622     80% {
1623         -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1624         transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1625         -webkit-animation-timing-function: ease-in;
1626         animation-timing-function: ease-in
1627     }
1628 
1629     100% {
1630         -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1631         transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1632         -webkit-animation-timing-function: ease-in;
1633         animation-timing-function: ease-in
1634     }
1635 }
1636 
1637 @keyframes flip {
1638     0% {
1639         -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1640         -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1641         transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1642         -webkit-animation-timing-function: ease-out;
1643         animation-timing-function: ease-out
1644     }
1645 
1646     40% {
1647         -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1648         -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1649         transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1650         -webkit-animation-timing-function: ease-out;
1651         animation-timing-function: ease-out
1652     }
1653 
1654     50% {
1655         -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1656         -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1657         transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1658         -webkit-animation-timing-function: ease-in;
1659         animation-timing-function: ease-in
1660     }
1661 
1662     80% {
1663         -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1664         -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1665         transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1666         -webkit-animation-timing-function: ease-in;
1667         animation-timing-function: ease-in
1668     }
1669 
1670     100% {
1671         -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1672         -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1673         transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1674         -webkit-animation-timing-function: ease-in;
1675         animation-timing-function: ease-in
1676     }
1677 }
1678 
1679 .animated.flip {
1680     -webkit-backface-visibility: visible;
1681     -ms-backface-visibility: visible;
1682     backface-visibility: visible;
1683     -webkit-animation-name: flip;
1684     animation-name: flip
1685 }
1686 
1687 @-webkit-keyframes flipInX {
1688     0% {
1689         -webkit-transform: perspective(400px) rotateX(90deg);
1690         transform: perspective(400px) rotateX(90deg);
1691         opacity: 0
1692     }
1693 
1694     40% {
1695         -webkit-transform: perspective(400px) rotateX(-10deg);
1696         transform: perspective(400px) rotateX(-10deg)
1697     }
1698 
1699     70% {
1700         -webkit-transform: perspective(400px) rotateX(10deg);
1701         transform: perspective(400px) rotateX(10deg)
1702     }
1703 
1704     100% {
1705         -webkit-transform: perspective(400px) rotateX(0deg);
1706         transform: perspective(400px) rotateX(0deg);
1707         opacity: 1
1708     }
1709 }
1710 
1711 @keyframes flipInX {
1712     0% {
1713         -webkit-transform: perspective(400px) rotateX(90deg);
1714         -ms-transform: perspective(400px) rotateX(90deg);
1715         transform: perspective(400px) rotateX(90deg);
1716         opacity: 0
1717     }
1718 
1719     40% {
1720         -webkit-transform: perspective(400px) rotateX(-10deg);
1721         -ms-transform: perspective(400px) rotateX(-10deg);
1722         transform: perspective(400px) rotateX(-10deg)
1723     }
1724 
1725     70% {
1726         -webkit-transform: perspective(400px) rotateX(10deg);
1727         -ms-transform: perspective(400px) rotateX(10deg);
1728         transform: perspective(400px) rotateX(10deg)
1729     }
1730 
1731     100% {
1732         -webkit-transform: perspective(400px) rotateX(0deg);
1733         -ms-transform: perspective(400px) rotateX(0deg);
1734         transform: perspective(400px) rotateX(0deg);
1735         opacity: 1
1736     }
1737 }
1738 
1739 .flipInX {
1740     -webkit-backface-visibility: visible!important;
1741     -ms-backface-visibility: visible!important;
1742     backface-visibility: visible!important;
1743     -webkit-animation-name: flipInX;
1744     animation-name: flipInX
1745 }
1746 
1747 @-webkit-keyframes flipInY {
1748     0% {
1749         -webkit-transform: perspective(400px) rotateY(90deg);
1750         transform: perspective(400px) rotateY(90deg);
1751         opacity: 0
1752     }
1753 
1754     40% {
1755         -webkit-transform: perspective(400px) rotateY(-10deg);
1756         transform: perspective(400px) rotateY(-10deg)
1757     }
1758 
1759     70% {
1760         -webkit-transform: perspective(400px) rotateY(10deg);
1761         transform: perspective(400px) rotateY(10deg)
1762     }
1763 
1764     100% {
1765         -webkit-transform: perspective(400px) rotateY(0deg);
1766         transform: perspective(400px) rotateY(0deg);
1767         opacity: 1
1768     }
1769 }
1770 
1771 @keyframes flipInY {
1772     0% {
1773         -webkit-transform: perspective(400px) rotateY(90deg);
1774         -ms-transform: perspective(400px) rotateY(90deg);
1775         transform: perspective(400px) rotateY(90deg);
1776         opacity: 0
1777     }
1778 
1779     40% {
1780         -webkit-transform: perspective(400px) rotateY(-10deg);
1781         -ms-transform: perspective(400px) rotateY(-10deg);
1782         transform: perspective(400px) rotateY(-10deg)
1783     }
1784 
1785     70% {
1786         -webkit-transform: perspective(400px) rotateY(10deg);
1787         -ms-transform: perspective(400px) rotateY(10deg);
1788         transform: perspective(400px) rotateY(10deg)
1789     }
1790 
1791     100% {
1792         -webkit-transform: perspective(400px) rotateY(0deg);
1793         -ms-transform: perspective(400px) rotateY(0deg);
1794         transform: perspective(400px) rotateY(0deg);
1795         opacity: 1
1796     }
1797 }
1798 
1799 .flipInY {
1800     -webkit-backface-visibility: visible!important;
1801     -ms-backface-visibility: visible!important;
1802     backface-visibility: visible!important;
1803     -webkit-animation-name: flipInY;
1804     animation-name: flipInY
1805 }
1806 
1807 @-webkit-keyframes flipOutX {
1808     0% {
1809         -webkit-transform: perspective(400px) rotateX(0deg);
1810         transform: perspective(400px) rotateX(0deg);
1811         opacity: 1
1812     }
1813 
1814     100% {
1815         -webkit-transform: perspective(400px) rotateX(90deg);
1816         transform: perspective(400px) rotateX(90deg);
1817         opacity: 0
1818     }
1819 }
1820 
1821 @keyframes flipOutX {
1822     0% {
1823         -webkit-transform: perspective(400px) rotateX(0deg);
1824         -ms-transform: perspective(400px) rotateX(0deg);
1825         transform: perspective(400px) rotateX(0deg);
1826         opacity: 1
1827     }
1828 
1829     100% {
1830         -webkit-transform: perspective(400px) rotateX(90deg);
1831         -ms-transform: perspective(400px) rotateX(90deg);
1832         transform: perspective(400px) rotateX(90deg);
1833         opacity: 0
1834     }
1835 }
1836 
1837 .flipOutX {
1838     -webkit-animation-name: flipOutX;
1839     animation-name: flipOutX;
1840     -webkit-backface-visibility: visible!important;
1841     -ms-backface-visibility: visible!important;
1842     backface-visibility: visible!important
1843 }
1844 
1845 @-webkit-keyframes flipOutY {
1846     0% {
1847         -webkit-transform: perspective(400px) rotateY(0deg);
1848         transform: perspective(400px) rotateY(0deg);
1849         opacity: 1
1850     }
1851 
1852     100% {
1853         -webkit-transform: perspective(400px) rotateY(90deg);
1854         transform: perspective(400px) rotateY(90deg);
1855         opacity: 0
1856     }
1857 }
1858 
1859 @keyframes flipOutY {
1860     0% {
1861         -webkit-transform: perspective(400px) rotateY(0deg);
1862         -ms-transform: perspective(400px) rotateY(0deg);
1863         transform: perspective(400px) rotateY(0deg);
1864         opacity: 1
1865     }
1866 
1867     100% {
1868         -webkit-transform: perspective(400px) rotateY(90deg);
1869         -ms-transform: perspective(400px) rotateY(90deg);
1870         transform: perspective(400px) rotateY(90deg);
1871         opacity: 0
1872     }
1873 }
1874 
1875 .flipOutY {
1876     -webkit-backface-visibility: visible!important;
1877     -ms-backface-visibility: visible!important;
1878     backface-visibility: visible!important;
1879     -webkit-animation-name: flipOutY;
1880     animation-name: flipOutY
1881 }
1882 
1883 @-webkit-keyframes lightSpeedIn {
1884     0% {
1885         -webkit-transform: translateX(100%) skewX(-30deg);
1886         transform: translateX(100%) skewX(-30deg);
1887         opacity: 0
1888     }
1889 
1890     60% {
1891         -webkit-transform: translateX(-20%) skewX(30deg);
1892         transform: translateX(-20%) skewX(30deg);
1893         opacity: 1
1894     }
1895 
1896     80% {
1897         -webkit-transform: translateX(0%) skewX(-15deg);
1898         transform: translateX(0%) skewX(-15deg);
1899         opacity: 1
1900     }
1901 
1902     100% {
1903         -webkit-transform: translateX(0%) skewX(0deg);
1904         transform: translateX(0%) skewX(0deg);
1905         opacity: 1
1906     }
1907 }
1908 
1909 @keyframes lightSpeedIn {
1910     0% {
1911         -webkit-transform: translateX(100%) skewX(-30deg);
1912         -ms-transform: translateX(100%) skewX(-30deg);
1913         transform: translateX(100%) skewX(-30deg);
1914         opacity: 0
1915     }
1916 
1917     60% {
1918         -webkit-transform: translateX(-20%) skewX(30deg);
1919         -ms-transform: translateX(-20%) skewX(30deg);
1920         transform: translateX(-20%) skewX(30deg);
1921         opacity: 1
1922     }
1923 
1924     80% {
1925         -webkit-transform: translateX(0%) skewX(-15deg);
1926         -ms-transform: translateX(0%) skewX(-15deg);
1927         transform: translateX(0%) skewX(-15deg);
1928         opacity: 1
1929     }
1930 
1931     100% {
1932         -webkit-transform: translateX(0%) skewX(0deg);
1933         -ms-transform: translateX(0%) skewX(0deg);
1934         transform: translateX(0%) skewX(0deg);
1935         opacity: 1
1936     }
1937 }
1938 
1939 .lightSpeedIn {
1940     -webkit-animation-name: lightSpeedIn;
1941     animation-name: lightSpeedIn;
1942     -webkit-animation-timing-function: ease-out;
1943     animation-timing-function: ease-out
1944 }
1945 
1946 @-webkit-keyframes lightSpeedOut {
1947     0% {
1948         -webkit-transform: translateX(0%) skewX(0deg);
1949         transform: translateX(0%) skewX(0deg);
1950         opacity: 1
1951     }
1952 
1953     100% {
1954         -webkit-transform: translateX(100%) skewX(-30deg);
1955         transform: translateX(100%) skewX(-30deg);
1956         opacity: 0
1957     }
1958 }
1959 
1960 @keyframes lightSpeedOut {
1961     0% {
1962         -webkit-transform: translateX(0%) skewX(0deg);
1963         -ms-transform: translateX(0%) skewX(0deg);
1964         transform: translateX(0%) skewX(0deg);
1965         opacity: 1
1966     }
1967 
1968     100% {
1969         -webkit-transform: translateX(100%) skewX(-30deg);
1970         -ms-transform: translateX(100%) skewX(-30deg);
1971         transform: translateX(100%) skewX(-30deg);
1972         opacity: 0
1973     }
1974 }
1975 
1976 .lightSpeedOut {
1977     -webkit-animation-name: lightSpeedOut;
1978     animation-name: lightSpeedOut;
1979     -webkit-animation-timing-function: ease-in;
1980     animation-timing-function: ease-in
1981 }
1982 
1983 @-webkit-keyframes rotateIn {
1984     0% {
1985         -webkit-transform-origin: center center;
1986         transform-origin: center center;
1987         -webkit-transform: rotate(-200deg);
1988         transform: rotate(-200deg);
1989         opacity: 0
1990     }
1991 
1992     100% {
1993         -webkit-transform-origin: center center;
1994         transform-origin: center center;
1995         -webkit-transform: rotate(0);
1996         transform: rotate(0);
1997         opacity: 1
1998     }
1999 }
2000 
2001 @keyframes rotateIn {
2002     0% {
2003         -webkit-transform-origin: center center;
2004         -ms-transform-origin: center center;
2005         transform-origin: center center;
2006         -webkit-transform: rotate(-200deg);
2007         -ms-transform: rotate(-200deg);
2008         transform: rotate(-200deg);
2009         opacity: 0
2010     }
2011 
2012     100% {
2013         -webkit-transform-origin: center center;
2014         -ms-transform-origin: center center;
2015         transform-origin: center center;
2016         -webkit-transform: rotate(0);
2017         -ms-transform: rotate(0);
2018         transform: rotate(0);
2019         opacity: 1
2020     }
2021 }
2022 
2023 .rotateIn {
2024     -webkit-animation-name: rotateIn;
2025     animation-name: rotateIn
2026 }
2027 
2028 @-webkit-keyframes rotateInDownLeft {
2029     0% {
2030         -webkit-transform-origin: left bottom;
2031         transform-origin: left bottom;
2032         -webkit-transform: rotate(-90deg);
2033         transform: rotate(-90deg);
2034         opacity: 0
2035     }
2036 
2037     100% {
2038         -webkit-transform-origin: left bottom;
2039         transform-origin: left bottom;
2040         -webkit-transform: rotate(0);
2041         transform: rotate(0);
2042         opacity: 1
2043     }
2044 }
2045 
2046 @keyframes rotateInDownLeft {
2047     0% {
2048         -webkit-transform-origin: left bottom;
2049         -ms-transform-origin: left bottom;
2050         transform-origin: left bottom;
2051         -webkit-transform: rotate(-90deg);
2052         -ms-transform: rotate(-90deg);
2053         transform: rotate(-90deg);
2054         opacity: 0
2055     }
2056 
2057     100% {
2058         -webkit-transform-origin: left bottom;
2059         -ms-transform-origin: left bottom;
2060         transform-origin: left bottom;
2061         -webkit-transform: rotate(0);
2062         -ms-transform: rotate(0);
2063         transform: rotate(0);
2064         opacity: 1
2065     }
2066 }
2067 
2068 .rotateInDownLeft {
2069     -webkit-animation-name: rotateInDownLeft;
2070     animation-name: rotateInDownLeft
2071 }
2072 
2073 @-webkit-keyframes rotateInDownRight {
2074     0% {
2075         -webkit-transform-origin: right bottom;
2076         transform-origin: right bottom;
2077         -webkit-transform: rotate(90deg);
2078         transform: rotate(90deg);
2079         opacity: 0
2080     }
2081 
2082     100% {
2083         -webkit-transform-origin: right bottom;
2084         transform-origin: right bottom;
2085         -webkit-transform: rotate(0);
2086         transform: rotate(0);
2087         opacity: 1
2088     }
2089 }
2090 
2091 @keyframes rotateInDownRight {
2092     0% {
2093         -webkit-transform-origin: right bottom;
2094         -ms-transform-origin: right bottom;
2095         transform-origin: right bottom;
2096         -webkit-transform: rotate(90deg);
2097         -ms-transform: rotate(90deg);
2098         transform: rotate(90deg);
2099         opacity: 0
2100     }
2101 
2102     100% {
2103         -webkit-transform-origin: right bottom;
2104         -ms-transform-origin: right bottom;
2105         transform-origin: right bottom;
2106         -webkit-transform: rotate(0);
2107         -ms-transform: rotate(0);
2108         transform: rotate(0);
2109         opacity: 1
2110     }
2111 }
2112 
2113 .rotateInDownRight {
2114     -webkit-animation-name: rotateInDownRight;
2115     animation-name: rotateInDownRight
2116 }
2117 
2118 @-webkit-keyframes rotateInUpLeft {
2119     0% {
2120         -webkit-transform-origin: left bottom;
2121         transform-origin: left bottom;
2122         -webkit-transform: rotate(90deg);
2123         transform: rotate(90deg);
2124         opacity: 0
2125     }
2126 
2127     100% {
2128         -webkit-transform-origin: left bottom;
2129         transform-origin: left bottom;
2130         -webkit-transform: rotate(0);
2131         transform: rotate(0);
2132         opacity: 1
2133     }
2134 }
2135 
2136 @keyframes rotateInUpLeft {
2137     0% {
2138         -webkit-transform-origin: left bottom;
2139         -ms-transform-origin: left bottom;
2140         transform-origin: left bottom;
2141         -webkit-transform: rotate(90deg);
2142         -ms-transform: rotate(90deg);
2143         transform: rotate(90deg);
2144         opacity: 0
2145     }
2146 
2147     100% {
2148         -webkit-transform-origin: left bottom;
2149         -ms-transform-origin: left bottom;
2150         transform-origin: left bottom;
2151         -webkit-transform: rotate(0);
2152         -ms-transform: rotate(0);
2153         transform: rotate(0);
2154         opacity: 1
2155     }
2156 }
2157 
2158 .rotateInUpLeft {
2159     -webkit-animation-name: rotateInUpLeft;
2160     animation-name: rotateInUpLeft
2161 }
2162 
2163 @-webkit-keyframes rotateInUpRight {
2164     0% {
2165         -webkit-transform-origin: right bottom;
2166         transform-origin: right bottom;
2167         -webkit-transform: rotate(-90deg);
2168         transform: rotate(-90deg);
2169         opacity: 0
2170     }
2171 
2172     100% {
2173         -webkit-transform-origin: right bottom;
2174         transform-origin: right bottom;
2175         -webkit-transform: rotate(0);
2176         transform: rotate(0);
2177         opacity: 1
2178     }
2179 }
2180 
2181 @keyframes rotateInUpRight {
2182     0% {
2183         -webkit-transform-origin: right bottom;
2184         -ms-transform-origin: right bottom;
2185         transform-origin: right bottom;
2186         -webkit-transform: rotate(-90deg);
2187         -ms-transform: rotate(-90deg);
2188         transform: rotate(-90deg);
2189         opacity: 0
2190     }
2191 
2192     100% {
2193         -webkit-transform-origin: right bottom;
2194         -ms-transform-origin: right bottom;
2195         transform-origin: right bottom;
2196         -webkit-transform: rotate(0);
2197         -ms-transform: rotate(0);
2198         transform: rotate(0);
2199         opacity: 1
2200     }
2201 }
2202 
2203 .rotateInUpRight {
2204     -webkit-animation-name: rotateInUpRight;
2205     animation-name: rotateInUpRight
2206 }
2207 
2208 @-webkit-keyframes rotateOut {
2209     0% {
2210         -webkit-transform-origin: center center;
2211         transform-origin: center center;
2212         -webkit-transform: rotate(0);
2213         transform: rotate(0);
2214         opacity: 1
2215     }
2216 
2217     100% {
2218         -webkit-transform-origin: center center;
2219         transform-origin: center center;
2220         -webkit-transform: rotate(200deg);
2221         transform: rotate(200deg);
2222         opacity: 0
2223     }
2224 }
2225 
2226 @keyframes rotateOut {
2227     0% {
2228         -webkit-transform-origin: center center;
2229         -ms-transform-origin: center center;
2230         transform-origin: center center;
2231         -webkit-transform: rotate(0);
2232         -ms-transform: rotate(0);
2233         transform: rotate(0);
2234         opacity: 1
2235     }
2236 
2237     100% {
2238         -webkit-transform-origin: center center;
2239         -ms-transform-origin: center center;
2240         transform-origin: center center;
2241         -webkit-transform: rotate(200deg);
2242         -ms-transform: rotate(200deg);
2243         transform: rotate(200deg);
2244         opacity: 0
2245     }
2246 }
2247 
2248 .rotateOut {
2249     -webkit-animation-name: rotateOut;
2250     animation-name: rotateOut
2251 }
2252 
2253 @-webkit-keyframes rotateOutDownLeft {
2254     0% {
2255         -webkit-transform-origin: left bottom;
2256         transform-origin: left bottom;
2257         -webkit-transform: rotate(0);
2258         transform: rotate(0);
2259         opacity: 1
2260     }
2261 
2262     100% {
2263         -webkit-transform-origin: left bottom;
2264         transform-origin: left bottom;
2265         -webkit-transform: rotate(90deg);
2266         transform: rotate(90deg);
2267         opacity: 0
2268     }
2269 }
2270 
2271 @keyframes rotateOutDownLeft {
2272     0% {
2273         -webkit-transform-origin: left bottom;
2274         -ms-transform-origin: left bottom;
2275         transform-origin: left bottom;
2276         -webkit-transform: rotate(0);
2277         -ms-transform: rotate(0);
2278         transform: rotate(0);
2279         opacity: 1
2280     }
2281 
2282     100% {
2283         -webkit-transform-origin: left bottom;
2284         -ms-transform-origin: left bottom;
2285         transform-origin: left bottom;
2286         -webkit-transform: rotate(90deg);
2287         -ms-transform: rotate(90deg);
2288         transform: rotate(90deg);
2289         opacity: 0
2290     }
2291 }
2292 
2293 .rotateOutDownLeft {
2294     -webkit-animation-name: rotateOutDownLeft;
2295     animation-name: rotateOutDownLeft
2296 }
2297 
2298 @-webkit-keyframes rotateOutDownRight {
2299     0% {
2300         -webkit-transform-origin: right bottom;
2301         transform-origin: right bottom;
2302         -webkit-transform: rotate(0);
2303         transform: rotate(0);
2304         opacity: 1
2305     }
2306 
2307     100% {
2308         -webkit-transform-origin: right bottom;
2309         transform-origin: right bottom;
2310         -webkit-transform: rotate(-90deg);
2311         transform: rotate(-90deg);
2312         opacity: 0
2313     }
2314 }
2315 
2316 @keyframes rotateOutDownRight {
2317     0% {
2318         -webkit-transform-origin: right bottom;
2319         -ms-transform-origin: right bottom;
2320         transform-origin: right bottom;
2321         -webkit-transform: rotate(0);
2322         -ms-transform: rotate(0);
2323         transform: rotate(0);
2324         opacity: 1
2325     }
2326 
2327     100% {
2328         -webkit-transform-origin: right bottom;
2329         -ms-transform-origin: right bottom;
2330         transform-origin: right bottom;
2331         -webkit-transform: rotate(-90deg);
2332         -ms-transform: rotate(-90deg);
2333         transform: rotate(-90deg);
2334         opacity: 0
2335     }
2336 }
2337 
2338 .rotateOutDownRight {
2339     -webkit-animation-name: rotateOutDownRight;
2340     animation-name: rotateOutDownRight
2341 }
2342 
2343 @-webkit-keyframes rotateOutUpLeft {
2344     0% {
2345         -webkit-transform-origin: left bottom;
2346         transform-origin: left bottom;
2347         -webkit-transform: rotate(0);
2348         transform: rotate(0);
2349         opacity: 1
2350     }
2351 
2352     100% {
2353         -webkit-transform-origin: left bottom;
2354         transform-origin: left bottom;
2355         -webkit-transform: rotate(-90deg);
2356         transform: rotate(-90deg);
2357         opacity: 0
2358     }
2359 }
2360 
2361 @keyframes rotateOutUpLeft {
2362     0% {
2363         -webkit-transform-origin: left bottom;
2364         -ms-transform-origin: left bottom;
2365         transform-origin: left bottom;
2366         -webkit-transform: rotate(0);
2367         -ms-transform: rotate(0);
2368         transform: rotate(0);
2369         opacity: 1
2370     }
2371 
2372     100% {
2373         -webkit-transform-origin: left bottom;
2374         -ms-transform-origin: left bottom;
2375         transform-origin: left bottom;
2376         -webkit-transform: rotate(-90deg);
2377         -ms-transform: rotate(-90deg);
2378         transform: rotate(-90deg);
2379         opacity: 0
2380     }
2381 }
2382 
2383 .rotateOutUpLeft {
2384     -webkit-animation-name: rotateOutUpLeft;
2385     animation-name: rotateOutUpLeft
2386 }
2387 
2388 @-webkit-keyframes rotateOutUpRight {
2389     0% {
2390         -webkit-transform-origin: right bottom;
2391         transform-origin: right bottom;
2392         -webkit-transform: rotate(0);
2393         transform: rotate(0);
2394         opacity: 1
2395     }
2396 
2397     100% {
2398         -webkit-transform-origin: right bottom;
2399         transform-origin: right bottom;
2400         -webkit-transform: rotate(90deg);
2401         transform: rotate(90deg);
2402         opacity: 0
2403     }
2404 }
2405 
2406 @keyframes rotateOutUpRight {
2407     0% {
2408         -webkit-transform-origin: right bottom;
2409         -ms-transform-origin: right bottom;
2410         transform-origin: right bottom;
2411         -webkit-transform: rotate(0);
2412         -ms-transform: rotate(0);
2413         transform: rotate(0);
2414         opacity: 1
2415     }
2416 
2417     100% {
2418         -webkit-transform-origin: right bottom;
2419         -ms-transform-origin: right bottom;
2420         transform-origin: right bottom;
2421         -webkit-transform: rotate(90deg);
2422         -ms-transform: rotate(90deg);
2423         transform: rotate(90deg);
2424         opacity: 0
2425     }
2426 }
2427 
2428 .rotateOutUpRight {
2429     -webkit-animation-name: rotateOutUpRight;
2430     animation-name: rotateOutUpRight
2431 }
2432 
2433 @-webkit-keyframes slideInDown {
2434     0% {
2435         opacity: 0;
2436         -webkit-transform: translateY(-2000px);
2437         transform: translateY(-2000px)
2438     }
2439 
2440     100% {
2441         -webkit-transform: translateY(0);
2442         transform: translateY(0)
2443     }
2444 }
2445 
2446 @keyframes slideInDown {
2447     0% {
2448         opacity: 0;
2449         -webkit-transform: translateY(-2000px);
2450         -ms-transform: translateY(-2000px);
2451         transform: translateY(-2000px)
2452     }
2453 
2454     100% {
2455         -webkit-transform: translateY(0);
2456         -ms-transform: translateY(0);
2457         transform: translateY(0)
2458     }
2459 }
2460 
2461 .slideInDown {
2462     -webkit-animation-name: slideInDown;
2463     animation-name: slideInDown
2464 }
2465 
2466 @-webkit-keyframes slideInLeft {
2467     0% {
2468         opacity: 0;
2469         -webkit-transform: translateX(-2000px);
2470         transform: translateX(-2000px)
2471     }
2472 
2473     100% {
2474         -webkit-transform: translateX(0);
2475         transform: translateX(0)
2476     }
2477 }
2478 
2479 @keyframes slideInLeft {
2480     0% {
2481         opacity: 0;
2482         -webkit-transform: translateX(-2000px);
2483         -ms-transform: translateX(-2000px);
2484         transform: translateX(-2000px)
2485     }
2486 
2487     100% {
2488         -webkit-transform: translateX(0);
2489         -ms-transform: translateX(0);
2490         transform: translateX(0)
2491     }
2492 }
2493 
2494 .slideInLeft {
2495     -webkit-animation-name: slideInLeft;
2496     animation-name: slideInLeft
2497 }
2498 
2499 @-webkit-keyframes slideInRight {
2500     0% {
2501         opacity: 0;
2502         -webkit-transform: translateX(2000px);
2503         transform: translateX(2000px)
2504     }
2505 
2506     100% {
2507         -webkit-transform: translateX(0);
2508         transform: translateX(0)
2509     }
2510 }
2511 
2512 @keyframes slideInRight {
2513     0% {
2514         opacity: 0;
2515         -webkit-transform: translateX(2000px);
2516         -ms-transform: translateX(2000px);
2517         transform: translateX(2000px)
2518     }
2519 
2520     100% {
2521         -webkit-transform: translateX(0);
2522         -ms-transform: translateX(0);
2523         transform: translateX(0)
2524     }
2525 }
2526 
2527 .slideInRight {
2528     -webkit-animation-name: slideInRight;
2529     animation-name: slideInRight
2530 }
2531 
2532 @-webkit-keyframes slideOutLeft {
2533     0% {
2534         -webkit-transform: translateX(0);
2535         transform: translateX(0)
2536     }
2537 
2538     100% {
2539         opacity: 0;
2540         -webkit-transform: translateX(-2000px);
2541         transform: translateX(-2000px)
2542     }
2543 }
2544 
2545 @keyframes slideOutLeft {
2546     0% {
2547         -webkit-transform: translateX(0);
2548         -ms-transform: translateX(0);
2549         transform: translateX(0)
2550     }
2551 
2552     100% {
2553         opacity: 0;
2554         -webkit-transform: translateX(-2000px);
2555         -ms-transform: translateX(-2000px);
2556         transform: translateX(-2000px)
2557     }
2558 }
2559 
2560 .slideOutLeft {
2561     -webkit-animation-name: slideOutLeft;
2562     animation-name: slideOutLeft
2563 }
2564 
2565 @-webkit-keyframes slideOutRight {
2566     0% {
2567         -webkit-transform: translateX(0);
2568         transform: translateX(0)
2569     }
2570 
2571     100% {
2572         opacity: 0;
2573         -webkit-transform: translateX(2000px);
2574         transform: translateX(2000px)
2575     }
2576 }
2577 
2578 @keyframes slideOutRight {
2579     0% {
2580         -webkit-transform: translateX(0);
2581         -ms-transform: translateX(0);
2582         transform: translateX(0)
2583     }
2584 
2585     100% {
2586         opacity: 0;
2587         -webkit-transform: translateX(2000px);
2588         -ms-transform: translateX(2000px);
2589         transform: translateX(2000px)
2590     }
2591 }
2592 
2593 .slideOutRight {
2594     -webkit-animation-name: slideOutRight;
2595     animation-name: slideOutRight
2596 }
2597 
2598 @-webkit-keyframes slideOutUp {
2599     0% {
2600         -webkit-transform: translateY(0);
2601         transform: translateY(0)
2602     }
2603 
2604     100% {
2605         opacity: 0;
2606         -webkit-transform: translateY(-2000px);
2607         transform: translateY(-2000px)
2608     }
2609 }
2610 
2611 @keyframes slideOutUp {
2612     0% {
2613         -webkit-transform: translateY(0);
2614         -ms-transform: translateY(0);
2615         transform: translateY(0)
2616     }
2617 
2618     100% {
2619         opacity: 0;
2620         -webkit-transform: translateY(-2000px);
2621         -ms-transform: translateY(-2000px);
2622         transform: translateY(-2000px)
2623     }
2624 }
2625 
2626 .slideOutUp {
2627     -webkit-animation-name: slideOutUp;
2628     animation-name: slideOutUp
2629 }
2630 
2631 @-webkit-keyframes slideInUp {
2632     0% {
2633         opacity: 0;
2634         -webkit-transform: translateY(2000px);
2635         transform: translateY(2000px)
2636     }
2637 
2638     100% {
2639         opacity: 1;
2640         -webkit-transform: translateY(0);
2641         transform: translateY(0)
2642     }
2643 }
2644 
2645 @keyframes slideInUp {
2646     0% {
2647         opacity: 0;
2648         -webkit-transform: translateY(2000px);
2649         -ms-transform: translateY(2000px);
2650         transform: translateY(2000px)
2651     }
2652 
2653     100% {
2654         opacity: 1;
2655         -webkit-transform: translateY(0);
2656         -ms-transform: translateY(0);
2657         transform: translateY(0)
2658     }
2659 }
2660 
2661 .slideInUp {
2662     -webkit-animation-name: slideInUp;
2663     animation-name: slideInUp
2664 }
2665 
2666 @-webkit-keyframes slideOutDown {
2667     0% {
2668         -webkit-transform: translateY(0);
2669         transform: translateY(0)
2670     }
2671 
2672     100% {
2673         opacity: 0;
2674         -webkit-transform: translateY(2000px);
2675         transform: translateY(2000px)
2676     }
2677 }
2678 
2679 @keyframes slideOutDown {
2680     0% {
2681         -webkit-transform: translateY(0);
2682         -ms-transform: translateY(0);
2683         transform: translateY(0)
2684     }
2685 
2686     100% {
2687         opacity: 0;
2688         -webkit-transform: translateY(2000px);
2689         -ms-transform: translateY(2000px);
2690         transform: translateY(2000px)
2691     }
2692 }
2693 
2694 .slideOutDown {
2695     -webkit-animation-name: slideOutDown;
2696     animation-name: slideOutDown
2697 }
2698 
2699 @-webkit-keyframes hinge {
2700     0% {
2701         -webkit-transform: rotate(0);
2702         transform: rotate(0);
2703         -webkit-transform-origin: top left;
2704         transform-origin: top left;
2705         -webkit-animation-timing-function: ease-in-out;
2706         animation-timing-function: ease-in-out
2707     }
2708 
2709     20%,60% {
2710         -webkit-transform: rotate(80deg);
2711         transform: rotate(80deg);
2712         -webkit-transform-origin: top left;
2713         transform-origin: top left;
2714         -webkit-animation-timing-function: ease-in-out;
2715         animation-timing-function: ease-in-out
2716     }
2717 
2718     40% {
2719         -webkit-transform: rotate(60deg);
2720         transform: rotate(60deg);
2721         -webkit-transform-origin: top left;
2722         transform-origin: top left;
2723         -webkit-animation-timing-function: ease-in-out;
2724         animation-timing-function: ease-in-out
2725     }
2726 
2727     80% {
2728         -webkit-transform: rotate(60deg) translateY(0);
2729         transform: rotate(60deg) translateY(0);
2730         -webkit-transform-origin: top left;
2731         transform-origin: top left;
2732         -webkit-animation-timing-function: ease-in-out;
2733         animation-timing-function: ease-in-out;
2734         opacity: 1
2735     }
2736 
2737     100% {
2738         -webkit-transform: translateY(700px);
2739         transform: translateY(700px);
2740         opacity: 0
2741     }
2742 }
2743 
2744 @keyframes hinge {
2745     0% {
2746         -webkit-transform: rotate(0);
2747         -ms-transform: rotate(0);
2748         transform: rotate(0);
2749         -webkit-transform-origin: top left;
2750         -ms-transform-origin: top left;
2751         transform-origin: top left;
2752         -webkit-animation-timing-function: ease-in-out;
2753         animation-timing-function: ease-in-out
2754     }
2755 
2756     20%,60% {
2757         -webkit-transform: rotate(80deg);
2758         -ms-transform: rotate(80deg);
2759         transform: rotate(80deg);
2760         -webkit-transform-origin: top left;
2761         -ms-transform-origin: top left;
2762         transform-origin: top left;
2763         -webkit-animation-timing-function: ease-in-out;
2764         animation-timing-function: ease-in-out
2765     }
2766 
2767     40% {
2768         -webkit-transform: rotate(60deg);
2769         -ms-transform: rotate(60deg);
2770         transform: rotate(60deg);
2771         -webkit-transform-origin: top left;
2772         -ms-transform-origin: top left;
2773         transform-origin: top left;
2774         -webkit-animation-timing-function: ease-in-out;
2775         animation-timing-function: ease-in-out
2776     }
2777 
2778     80% {
2779         -webkit-transform: rotate(60deg) translateY(0);
2780         -ms-transform: rotate(60deg) translateY(0);
2781         transform: rotate(60deg) translateY(0);
2782         -webkit-transform-origin: top left;
2783         -ms-transform-origin: top left;
2784         transform-origin: top left;
2785         -webkit-animation-timing-function: ease-in-out;
2786         animation-timing-function: ease-in-out;
2787         opacity: 1
2788     }
2789 
2790     100% {
2791         -webkit-transform: translateY(700px);
2792         -ms-transform: translateY(700px);
2793         transform: translateY(700px);
2794         opacity: 0
2795     }
2796 }
2797 
2798 .hinge {
2799     -webkit-animation-name: hinge;
2800     animation-name: hinge
2801 }
2802 
2803 @-webkit-keyframes rollIn {
2804     0% {
2805         opacity: 0;
2806         -webkit-transform: translateX(-100%) rotate(-120deg);
2807         transform: translateX(-100%) rotate(-120deg)
2808     }
2809 
2810     100% {
2811         opacity: 1;
2812         -webkit-transform: translateX(0px) rotate(0deg);
2813         transform: translateX(0px) rotate(0deg)
2814     }
2815 }
2816 
2817 @keyframes rollIn {
2818     0% {
2819         opacity: 0;
2820         -webkit-transform: translateX(-100%) rotate(-120deg);
2821         -ms-transform: translateX(-100%) rotate(-120deg);
2822         transform: translateX(-100%) rotate(-120deg)
2823     }
2824 
2825     100% {
2826         opacity: 1;
2827         -webkit-transform: translateX(0px) rotate(0deg);
2828         -ms-transform: translateX(0px) rotate(0deg);
2829         transform: translateX(0px) rotate(0deg)
2830     }
2831 }
2832 
2833 .rollIn {
2834     -webkit-animation-name: rollIn;
2835     animation-name: rollIn
2836 }
2837 
2838 @-webkit-keyframes rollOut {
2839     0% {
2840         opacity: 1;
2841         -webkit-transform: translateX(0px) rotate(0deg);
2842         transform: translateX(0px) rotate(0deg)
2843     }
2844 
2845     100% {
2846         opacity: 0;
2847         -webkit-transform: translateX(100%) rotate(120deg);
2848         transform: translateX(100%) rotate(120deg)
2849     }
2850 }
2851 
2852 @keyframes rollOut {
2853     0% {
2854         opacity: 1;
2855         -webkit-transform: translateX(0px) rotate(0deg);
2856         -ms-transform: translateX(0px) rotate(0deg);
2857         transform: translateX(0px) rotate(0deg)
2858     }
2859 
2860     100% {
2861         opacity: 0;
2862         -webkit-transform: translateX(100%) rotate(120deg);
2863         -ms-transform: translateX(100%) rotate(120deg);
2864         transform: translateX(100%) rotate(120deg)
2865     }
2866 }
2867 
2868 .rollOut {
2869     -webkit-animation-name: rollOut;
2870     animation-name: rollOut
2871 }
2872 
2873 @-webkit-keyframes zoomIn {
2874     0% {
2875         opacity: 0;
2876         -webkit-transform: scale(.3);
2877         transform: scale(.3)
2878     }
2879 
2880     50% {
2881         opacity: 1
2882     }
2883 }
2884 
2885 @keyframes zoomIn {
2886     0% {
2887         opacity: 0;
2888         -webkit-transform: scale(.3);
2889         -ms-transform: scale(.3);
2890         transform: scale(.3)
2891     }
2892 
2893     50% {
2894         opacity: 1
2895     }
2896 }
2897 
2898 .zoomIn {
2899     -webkit-animation-name: zoomIn;
2900     animation-name: zoomIn
2901 }
2902 
2903 @-webkit-keyframes zoomInDown {
2904     0% {
2905         opacity: 0;
2906         -webkit-transform: scale(.1) translateY(-2000px);
2907         transform: scale(.1) translateY(-2000px);
2908         -webkit-animation-timing-function: ease-in-out;
2909         animation-timing-function: ease-in-out
2910     }
2911 
2912     60% {
2913         opacity: 1;
2914         -webkit-transform: scale(.475) translateY(60px);
2915         transform: scale(.475) translateY(60px);
2916         -webkit-animation-timing-function: ease-out;
2917         animation-timing-function: ease-out
2918     }
2919 }
2920 
2921 @keyframes zoomInDown {
2922     0% {
2923         opacity: 0;
2924         -webkit-transform: scale(.1) translateY(-2000px);
2925         -ms-transform: scale(.1) translateY(-2000px);
2926         transform: scale(.1) translateY(-2000px);
2927         -webkit-animation-timing-function: ease-in-out;
2928         animation-timing-function: ease-in-out
2929     }
2930 
2931     60% {
2932         opacity: 1;
2933         -webkit-transform: scale(.475) translateY(60px);
2934         -ms-transform: scale(.475) translateY(60px);
2935         transform: scale(.475) translateY(60px);
2936         -webkit-animation-timing-function: ease-out;
2937         animation-timing-function: ease-out
2938     }
2939 }
2940 
2941 .zoomInDown {
2942     -webkit-animation-name: zoomInDown;
2943     animation-name: zoomInDown
2944 }
2945 
2946 @-webkit-keyframes zoomInLeft {
2947     0% {
2948         opacity: 0;
2949         -webkit-transform: scale(.1) translateX(-2000px);
2950         transform: scale(.1) translateX(-2000px);
2951         -webkit-animation-timing-function: ease-in-out;
2952         animation-timing-function: ease-in-out
2953     }
2954 
2955     60% {
2956         opacity: 1;
2957         -webkit-transform: scale(.475) translateX(48px);
2958         transform: scale(.475) translateX(48px);
2959         -webkit-animation-timing-function: ease-out;
2960         animation-timing-function: ease-out
2961     }
2962 }
2963 
2964 @keyframes zoomInLeft {
2965     0% {
2966         opacity: 0;
2967         -webkit-transform: scale(.1) translateX(-2000px);
2968         -ms-transform: scale(.1) translateX(-2000px);
2969         transform: scale(.1) translateX(-2000px);
2970         -webkit-animation-timing-function: ease-in-out;
2971         animation-timing-function: ease-in-out
2972     }
2973 
2974     60% {
2975         opacity: 1;
2976         -webkit-transform: scale(.475) translateX(48px);
2977         -ms-transform: scale(.475) translateX(48px);
2978         transform: scale(.475) translateX(48px);
2979         -webkit-animation-timing-function: ease-out;
2980         animation-timing-function: ease-out
2981     }
2982 }
2983 
2984 .zoomInLeft {
2985     -webkit-animation-name: zoomInLeft;
2986     animation-name: zoomInLeft
2987 }
2988 
2989 @-webkit-keyframes zoomInRight {
2990     0% {
2991         opacity: 0;
2992         -webkit-transform: scale(.1) translateX(2000px);
2993         transform: scale(.1) translateX(2000px);
2994         -webkit-animation-timing-function: ease-in-out;
2995         animation-timing-function: ease-in-out
2996     }
2997 
2998     60% {
2999         opacity: 1;
3000         -webkit-transform: scale(.475) translateX(-48px);
3001         transform: scale(.475) translateX(-48px);
3002         -webkit-animation-timing-function: ease-out;
3003         animation-timing-function: ease-out
3004     }
3005 }
3006 
3007 @keyframes zoomInRight {
3008     0% {
3009         opacity: 0;
3010         -webkit-transform: scale(.1) translateX(2000px);
3011         -ms-transform: scale(.1) translateX(2000px);
3012         transform: scale(.1) translateX(2000px);
3013         -webkit-animation-timing-function: ease-in-out;
3014         animation-timing-function: ease-in-out
3015     }
3016 
3017     60% {
3018         opacity: 1;
3019         -webkit-transform: scale(.475) translateX(-48px);
3020         -ms-transform: scale(.475) translateX(-48px);
3021         transform: scale(.475) translateX(-48px);
3022         -webkit-animation-timing-function: ease-out;
3023         animation-timing-function: ease-out
3024     }
3025 }
3026 
3027 .zoomInRight {
3028     -webkit-animation-name: zoomInRight;
3029     animation-name: zoomInRight
3030 }
3031 
3032 @-webkit-keyframes zoomInUp {
3033     0% {
3034         opacity: 0;
3035         -webkit-transform: scale(.1) translateY(2000px);
3036         transform: scale(.1) translateY(2000px);
3037         -webkit-animation-timing-function: ease-in-out;
3038         animation-timing-function: ease-in-out
3039     }
3040 
3041     60% {
3042         opacity: 1;
3043         -webkit-transform: scale(.475) translateY(-60px);
3044         transform: scale(.475) translateY(-60px);
3045         -webkit-animation-timing-function: ease-out;
3046         animation-timing-function: ease-out
3047     }
3048 }
3049 
3050 @keyframes zoomInUp {
3051     0% {
3052         opacity: 0;
3053         -webkit-transform: scale(.1) translateY(2000px);
3054         -ms-transform: scale(.1) translateY(2000px);
3055         transform: scale(.1) translateY(2000px);
3056         -webkit-animation-timing-function: ease-in-out;
3057         animation-timing-function: ease-in-out
3058     }
3059 
3060     60% {
3061         opacity: 1;
3062         -webkit-transform: scale(.475) translateY(-60px);
3063         -ms-transform: scale(.475) translateY(-60px);
3064         transform: scale(.475) translateY(-60px);
3065         -webkit-animation-timing-function: ease-out;
3066         animation-timing-function: ease-out
3067     }
3068 }
3069 
3070 .zoomInUp {
3071     -webkit-animation-name: zoomInUp;
3072     animation-name: zoomInUp
3073 }
3074 
3075 @-webkit-keyframes zoomOut {
3076     0% {
3077         opacity: 1;
3078         -webkit-transform: scale(1);
3079         transform: scale(1)
3080     }
3081 
3082     50% {
3083         opacity: 0;
3084         -webkit-transform: scale(.3);
3085         transform: scale(.3)
3086     }
3087 
3088     100% {
3089         opacity: 0
3090     }
3091 }
3092 
3093 @keyframes zoomOut {
3094     0% {
3095         opacity: 1;
3096         -webkit-transform: scale(1);
3097         -ms-transform: scale(1);
3098         transform: scale(1)
3099     }
3100 
3101     50% {
3102         opacity: 0;
3103         -webkit-transform: scale(.3);
3104         -ms-transform: scale(.3);
3105         transform: scale(.3)
3106     }
3107 
3108     100% {
3109         opacity: 0
3110     }
3111 }
3112 
3113 .zoomOut {
3114     -webkit-animation-name: zoomOut;
3115     animation-name: zoomOut
3116 }
3117 
3118 @-webkit-keyframes zoomOutDown {
3119     40% {
3120         opacity: 1;
3121         -webkit-transform: scale(.475) translateY(-60px);
3122         transform: scale(.475) translateY(-60px);
3123         -webkit-animation-timing-function: linear;
3124         animation-timing-function: linear
3125     }
3126 
3127     100% {
3128         opacity: 0;
3129         -webkit-transform: scale(.1) translateY(2000px);
3130         transform: scale(.1) translateY(2000px);
3131         -webkit-transform-origin: center bottom;
3132         transform-origin: center bottom
3133     }
3134 }
3135 
3136 @keyframes zoomOutDown {
3137     40% {
3138         opacity: 1;
3139         -webkit-transform: scale(.475) translateY(-60px);
3140         -ms-transform: scale(.475) translateY(-60px);
3141         transform: scale(.475) translateY(-60px);
3142         -webkit-animation-timing-function: linear;
3143         animation-timing-function: linear
3144     }
3145 
3146     100% {
3147         opacity: 0;
3148         -webkit-transform: scale(.1) translateY(2000px);
3149         -ms-transform: scale(.1) translateY(2000px);
3150         transform: scale(.1) translateY(2000px);
3151         -webkit-transform-origin: center bottom;
3152         -ms-transform-origin: center bottom;
3153         transform-origin: center bottom
3154     }
3155 }
3156 
3157 .zoomOutDown {
3158     -webkit-animation-name: zoomOutDown;
3159     animation-name: zoomOutDown
3160 }
3161 
3162 @-webkit-keyframes zoomOutLeft {
3163     40% {
3164         opacity: 1;
3165         -webkit-transform: scale(.475) translateX(42px);
3166         transform: scale(.475) translateX(42px);
3167         -webkit-animation-timing-function: linear;
3168         animation-timing-function: linear
3169     }
3170 
3171     100% {
3172         opacity: 0;
3173         -webkit-transform: scale(.1) translateX(-2000px);
3174         transform: scale(.1) translateX(-2000px);
3175         -webkit-transform-origin: left center;
3176         transform-origin: left center
3177     }
3178 }
3179 
3180 @keyframes zoomOutLeft {
3181     40% {
3182         opacity: 1;
3183         -webkit-transform: scale(.475) translateX(42px);
3184         -ms-transform: scale(.475) translateX(42px);
3185         transform: scale(.475) translateX(42px);
3186         -webkit-animation-timing-function: linear;
3187         animation-timing-function: linear
3188     }
3189 
3190     100% {
3191         opacity: 0;
3192         -webkit-transform: scale(.1) translateX(-2000px);
3193         -ms-transform: scale(.1) translateX(-2000px);
3194         transform: scale(.1) translateX(-2000px);
3195         -webkit-transform-origin: left center;
3196         -ms-transform-origin: left center;
3197         transform-origin: left center
3198     }
3199 }
3200 
3201 .zoomOutLeft {
3202     -webkit-animation-name: zoomOutLeft;
3203     animation-name: zoomOutLeft
3204 }
3205 
3206 @-webkit-keyframes zoomOutRight {
3207     40% {
3208         opacity: 1;
3209         -webkit-transform: scale(.475) translateX(-42px);
3210         transform: scale(.475) translateX(-42px);
3211         -webkit-animation-timing-function: linear;
3212         animation-timing-function: linear
3213     }
3214 
3215     100% {
3216         opacity: 0;
3217         -webkit-transform: scale(.1) translateX(2000px);
3218         transform: scale(.1) translateX(2000px);
3219         -webkit-transform-origin: right center;
3220         transform-origin: right center
3221     }
3222 }
3223 
3224 @keyframes zoomOutRight {
3225     40% {
3226         opacity: 1;
3227         -webkit-transform: scale(.475) translateX(-42px);
3228         -ms-transform: scale(.475) translateX(-42px);
3229         transform: scale(.475) translateX(-42px);
3230         -webkit-animation-timing-function: linear;
3231         animation-timing-function: linear
3232     }
3233 
3234     100% {
3235         opacity: 0;
3236         -webkit-transform: scale(.1) translateX(2000px);
3237         -ms-transform: scale(.1) translateX(2000px);
3238         transform: scale(.1) translateX(2000px);
3239         -webkit-transform-origin: right center;
3240         -ms-transform-origin: right center;
3241         transform-origin: right center
3242     }
3243 }
3244 
3245 .zoomOutRight {
3246     -webkit-animation-name: zoomOutRight;
3247     animation-name: zoomOutRight
3248 }
3249 
3250 @-webkit-keyframes zoomOutUp {
3251     40% {
3252         opacity: 1;
3253         -webkit-transform: scale(.475) translateY(60px);
3254         transform: scale(.475) translateY(60px);
3255         -webkit-animation-timing-function: linear;
3256         animation-timing-function: linear
3257     }
3258 
3259     100% {
3260         opacity: 0;
3261         -webkit-transform: scale(.1) translateY(-2000px);
3262         transform: scale(.1) translateY(-2000px);
3263         -webkit-transform-origin: center top;
3264         transform-origin: center top
3265     }
3266 }
3267 
3268 @keyframes zoomOutUp {
3269     40% {
3270         opacity: 1;
3271         -webkit-transform: scale(.475) translateY(60px);
3272         -ms-transform: scale(.475) translateY(60px);
3273         transform: scale(.475) translateY(60px);
3274         -webkit-animation-timing-function: linear;
3275         animation-timing-function: linear
3276     }
3277 
3278     100% {
3279         opacity: 0;
3280         -webkit-transform: scale(.1) translateY(-2000px);
3281         -ms-transform: scale(.1) translateY(-2000px);
3282         transform: scale(.1) translateY(-2000px);
3283         -webkit-transform-origin: center top;
3284         -ms-transform-origin: center top;
3285         transform-origin: center top
3286     }
3287 }
3288 
3289 .zoomOutUp {
3290     -webkit-animation-name: zoomOutUp;
3291     animation-name: zoomOutUp
3292 }
  • 相关阅读:
    POJ 2778 DNA Sequence（AC自动机+矩阵）
    Challenge & Growth —— 从这里开始
    京东云
    [Done] Codeforces Round #562 (Div. 2) 题解
    HDU 3486 Interviewe
    Codeforces Round #529 (Div. 3) 题解
    Wannafly 挑战赛 19 参考题解
    第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛 题解
    2018年长沙理工大学第十三届程序设计竞赛 题解
    POJ 3017 Cut the Sequence
  • 原文地址：https://www.cnblogs.com/padding1015/p/7655899.html
Copyright © 2011-2022 走看看