lollytin/plugins/justinaguilar-animations/animations.css

   1 /*\r
   2 ==============================================\r
   3 CSS3 ANIMATION CHEAT SHEET\r
   4 ==============================================\r
   5 \r
   6 Made by Justin Aguilar\r
   7 \r
   8 www.justinaguilar.com/animations/\r
   9 \r
  10 Questions, comments, concerns, love letters:\r
  11 justin@justinaguilar.com\r
  12 ==============================================\r
  13 */\r
  14 \r
  15 /*\r
  16 ==============================================\r
  17 slideDown\r
  18 ==============================================\r
  19 */\r
  20 \r
  21 \r
  22 .slideDown{\r
  23         animation-name: slideDown;\r
  24         -webkit-animation-name: slideDown;      \r
  25 \r
  26         animation-duration: 1s; \r
  27         -webkit-animation-duration: 1s;\r
  28 \r
  29         animation-timing-function: ease;        \r
  30         -webkit-animation-timing-function: ease;        \r
  31 \r
  32         visibility: visible !important;                                         \r
  33 }\r
  34 \r
  35 @keyframes slideDown {\r
  36         0% {\r
  37                 transform: translateY(-100%);\r
  38         }\r
  39         50%{\r
  40                 transform: translateY(8%);\r
  41         }\r
  42         65%{\r
  43                 transform: translateY(-4%);\r
  44         }\r
  45         80%{\r
  46                 transform: translateY(4%);\r
  47         }\r
  48         95%{\r
  49                 transform: translateY(-2%);\r
  50         }                       \r
  51         100% {\r
  52                 transform: translateY(0%);\r
  53         }               \r
  54 }\r
  55 \r
  56 @-webkit-keyframes slideDown {\r
  57         0% {\r
  58                 -webkit-transform: translateY(-100%);\r
  59         }\r
  60         50%{\r
  61                 -webkit-transform: translateY(8%);\r
  62         }\r
  63         65%{\r
  64                 -webkit-transform: translateY(-4%);\r
  65         }\r
  66         80%{\r
  67                 -webkit-transform: translateY(4%);\r
  68         }\r
  69         95%{\r
  70                 -webkit-transform: translateY(-2%);\r
  71         }                       \r
  72         100% {\r
  73                 -webkit-transform: translateY(0%);\r
  74         }       \r
  75 }\r
  76 \r
  77 /*\r
  78 ==============================================\r
  79 slideUp\r
  80 ==============================================\r
  81 */\r
  82 \r
  83 \r
  84 .slideUp{\r
  85         animation-name: slideUp;\r
  86         -webkit-animation-name: slideUp;        \r
  87 \r
  88         animation-duration: 1s; \r
  89         -webkit-animation-duration: 1s;\r
  90 \r
  91         animation-timing-function: ease;        \r
  92         -webkit-animation-timing-function: ease;\r
  93 \r
  94         visibility: visible !important;                 \r
  95 }\r
  96 \r
  97 @keyframes slideUp {\r
  98         0% {\r
  99                 transform: translateY(100%);\r
 100         }\r
 101         50%{\r
 102                 transform: translateY(-8%);\r
 103         }\r
 104         65%{\r
 105                 transform: translateY(4%);\r
 106         }\r
 107         80%{\r
 108                 transform: translateY(-4%);\r
 109         }\r
 110         95%{\r
 111                 transform: translateY(2%);\r
 112         }                       \r
 113         100% {\r
 114                 transform: translateY(0%);\r
 115         }       \r
 116 }\r
 117 \r
 118 @-webkit-keyframes slideUp {\r
 119         0% {\r
 120                 -webkit-transform: translateY(100%);\r
 121         }\r
 122         50%{\r
 123                 -webkit-transform: translateY(-8%);\r
 124         }\r
 125         65%{\r
 126                 -webkit-transform: translateY(4%);\r
 127         }\r
 128         80%{\r
 129                 -webkit-transform: translateY(-4%);\r
 130         }\r
 131         95%{\r
 132                 -webkit-transform: translateY(2%);\r
 133         }                       \r
 134         100% {\r
 135                 -webkit-transform: translateY(0%);\r
 136         }       \r
 137 }\r
 138 \r
 139 /*\r
 140 ==============================================\r
 141 slideLeft\r
 142 ==============================================\r
 143 */\r
 144 \r
 145 \r
 146 .slideLeft{\r
 147         animation-name: slideLeft;\r
 148         -webkit-animation-name: slideLeft;      \r
 149 \r
 150         animation-duration: 1s; \r
 151         -webkit-animation-duration: 1s;\r
 152 \r
 153         animation-timing-function: ease-in-out; \r
 154         -webkit-animation-timing-function: ease-in-out;         \r
 155 \r
 156         visibility: visible !important; \r
 157 }\r
 158 \r
 159 @keyframes slideLeft {\r
 160         0% {\r
 161                 transform: translateX(150%);\r
 162         }\r
 163         50%{\r
 164                 transform: translateX(-8%);\r
 165         }\r
 166         65%{\r
 167                 transform: translateX(4%);\r
 168         }\r
 169         80%{\r
 170                 transform: translateX(-4%);\r
 171         }\r
 172         95%{\r
 173                 transform: translateX(2%);\r
 174         }                       \r
 175         100% {\r
 176                 transform: translateX(0%);\r
 177         }\r
 178 }\r
 179 \r
 180 @-webkit-keyframes slideLeft {\r
 181         0% {\r
 182                 -webkit-transform: translateX(150%);\r
 183         }\r
 184         50%{\r
 185                 -webkit-transform: translateX(-8%);\r
 186         }\r
 187         65%{\r
 188                 -webkit-transform: translateX(4%);\r
 189         }\r
 190         80%{\r
 191                 -webkit-transform: translateX(-4%);\r
 192         }\r
 193         95%{\r
 194                 -webkit-transform: translateX(2%);\r
 195         }                       \r
 196         100% {\r
 197                 -webkit-transform: translateX(0%);\r
 198         }\r
 199 }\r
 200 \r
 201 /*\r
 202 ==============================================\r
 203 slideRight\r
 204 ==============================================\r
 205 */\r
 206 \r
 207 \r
 208 .slideRight{\r
 209         animation-name: slideRight;\r
 210         -webkit-animation-name: slideRight;     \r
 211 \r
 212         animation-duration: 1s; \r
 213         -webkit-animation-duration: 1s;\r
 214 \r
 215         animation-timing-function: ease-in-out; \r
 216         -webkit-animation-timing-function: ease-in-out;         \r
 217 \r
 218         visibility: visible !important; \r
 219 }\r
 220 \r
 221 @keyframes slideRight {\r
 222         0% {\r
 223                 transform: translateX(-150%);\r
 224         }\r
 225         50%{\r
 226                 transform: translateX(8%);\r
 227         }\r
 228         65%{\r
 229                 transform: translateX(-4%);\r
 230         }\r
 231         80%{\r
 232                 transform: translateX(4%);\r
 233         }\r
 234         95%{\r
 235                 transform: translateX(-2%);\r
 236         }                       \r
 237         100% {\r
 238                 transform: translateX(0%);\r
 239         }       \r
 240 }\r
 241 \r
 242 @-webkit-keyframes slideRight {\r
 243         0% {\r
 244                 -webkit-transform: translateX(-150%);\r
 245         }\r
 246         50%{\r
 247                 -webkit-transform: translateX(8%);\r
 248         }\r
 249         65%{\r
 250                 -webkit-transform: translateX(-4%);\r
 251         }\r
 252         80%{\r
 253                 -webkit-transform: translateX(4%);\r
 254         }\r
 255         95%{\r
 256                 -webkit-transform: translateX(-2%);\r
 257         }                       \r
 258         100% {\r
 259                 -webkit-transform: translateX(0%);\r
 260         }\r
 261 }\r
 262 \r
 263 /*\r
 264 ==============================================\r
 265 slideExpandUp\r
 266 ==============================================\r
 267 */\r
 268 \r
 269 \r
 270 .slideExpandUp{\r
 271         animation-name: slideExpandUp;\r
 272         -webkit-animation-name: slideExpandUp;  \r
 273 \r
 274         animation-duration: 1.6s;       \r
 275         -webkit-animation-duration: 1.6s;\r
 276 \r
 277         animation-timing-function: ease-out;    \r
 278         -webkit-animation-timing-function: ease -out;\r
 279 \r
 280         visibility: visible !important; \r
 281 }\r
 282 \r
 283 @keyframes slideExpandUp {\r
 284         0% {\r
 285                 transform: translateY(100%) scaleX(0.5);\r
 286         }\r
 287         30%{\r
 288                 transform: translateY(-8%) scaleX(0.5);\r
 289         }       \r
 290         40%{\r
 291                 transform: translateY(2%) scaleX(0.5);\r
 292         }\r
 293         50%{\r
 294                 transform: translateY(0%) scaleX(1.1);\r
 295         }\r
 296         60%{\r
 297                 transform: translateY(0%) scaleX(0.9);          \r
 298         }\r
 299         70% {\r
 300                 transform: translateY(0%) scaleX(1.05);\r
 301         }                       \r
 302         80%{\r
 303                 transform: translateY(0%) scaleX(0.95);         \r
 304         }\r
 305         90% {\r
 306                 transform: translateY(0%) scaleX(1.02);\r
 307         }       \r
 308         100%{\r
 309                 transform: translateY(0%) scaleX(1);            \r
 310         }\r
 311 }\r
 312 \r
 313 @-webkit-keyframes slideExpandUp {\r
 314         0% {\r
 315                 -webkit-transform: translateY(100%) scaleX(0.5);\r
 316         }\r
 317         30%{\r
 318                 -webkit-transform: translateY(-8%) scaleX(0.5);\r
 319         }       \r
 320         40%{\r
 321                 -webkit-transform: translateY(2%) scaleX(0.5);\r
 322         }\r
 323         50%{\r
 324                 -webkit-transform: translateY(0%) scaleX(1.1);\r
 325         }\r
 326         60%{\r
 327                 -webkit-transform: translateY(0%) scaleX(0.9);          \r
 328         }\r
 329         70% {\r
 330                 -webkit-transform: translateY(0%) scaleX(1.05);\r
 331         }                       \r
 332         80%{\r
 333                 -webkit-transform: translateY(0%) scaleX(0.95);         \r
 334         }\r
 335         90% {\r
 336                 -webkit-transform: translateY(0%) scaleX(1.02);\r
 337         }       \r
 338         100%{\r
 339                 -webkit-transform: translateY(0%) scaleX(1);            \r
 340         }\r
 341 }\r
 342 \r
 343 /*\r
 344 ==============================================\r
 345 expandUp\r
 346 ==============================================\r
 347 */\r
 348 \r
 349 \r
 350 .expandUp{\r
 351         animation-name: expandUp;\r
 352         -webkit-animation-name: expandUp;       \r
 353 \r
 354         animation-duration: 0.7s;       \r
 355         -webkit-animation-duration: 0.7s;\r
 356 \r
 357         animation-timing-function: ease;        \r
 358         -webkit-animation-timing-function: ease;                \r
 359 \r
 360         visibility: visible !important; \r
 361 }\r
 362 \r
 363 @keyframes expandUp {\r
 364         0% {\r
 365                 transform: translateY(100%) scale(0.6) scaleY(0.5);\r
 366         }\r
 367         60%{\r
 368                 transform: translateY(-7%) scaleY(1.12);\r
 369         }\r
 370         75%{\r
 371                 transform: translateY(3%);\r
 372         }       \r
 373         100% {\r
 374                 transform: translateY(0%) scale(1) scaleY(1);\r
 375         }       \r
 376 }\r
 377 \r
 378 @-webkit-keyframes expandUp {\r
 379         0% {\r
 380                 -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);\r
 381         }\r
 382         60%{\r
 383                 -webkit-transform: translateY(-7%) scaleY(1.12);\r
 384         }\r
 385         75%{\r
 386                 -webkit-transform: translateY(3%);\r
 387         }       \r
 388         100% {\r
 389                 -webkit-transform: translateY(0%) scale(1) scaleY(1);\r
 390         }       \r
 391 }\r
 392 \r
 393 /*\r
 394 ==============================================\r
 395 fadeIn\r
 396 ==============================================\r
 397 */\r
 398 \r
 399 .fadeIn{\r
 400         animation-name: fadeIn;\r
 401         -webkit-animation-name: fadeIn; \r
 402 \r
 403         animation-duration: 1.5s;       \r
 404         -webkit-animation-duration: 1.5s;\r
 405 \r
 406         animation-timing-function: ease-in-out; \r
 407         -webkit-animation-timing-function: ease-in-out;         \r
 408 \r
 409         visibility: visible !important; \r
 410 }\r
 411 \r
 412 @keyframes fadeIn {\r
 413         0% {\r
 414                 transform: scale(0);\r
 415                 opacity: 0.0;           \r
 416         }\r
 417         60% {\r
 418                 transform: scale(1.1);  \r
 419         }\r
 420         80% {\r
 421                 transform: scale(0.9);\r
 422                 opacity: 1;     \r
 423         }       \r
 424         100% {\r
 425                 transform: scale(1);\r
 426                 opacity: 1;     \r
 427         }               \r
 428 }\r
 429 \r
 430 @-webkit-keyframes fadeIn {\r
 431         0% {\r
 432                 -webkit-transform: scale(0);\r
 433                 opacity: 0.0;           \r
 434         }\r
 435         60% {\r
 436                 -webkit-transform: scale(1.1);\r
 437         }\r
 438         80% {\r
 439                 -webkit-transform: scale(0.9);\r
 440                 opacity: 1;     \r
 441         }       \r
 442         100% {\r
 443                 -webkit-transform: scale(1);\r
 444                 opacity: 1;     \r
 445         }               \r
 446 }\r
 447 \r
 448 /*\r
 449 ==============================================\r
 450 expandOpen\r
 451 ==============================================\r
 452 */\r
 453 \r
 454 \r
 455 .expandOpen{\r
 456         animation-name: expandOpen;\r
 457         -webkit-animation-name: expandOpen;     \r
 458 \r
 459         animation-duration: 1.2s;       \r
 460         -webkit-animation-duration: 1.2s;\r
 461 \r
 462         animation-timing-function: ease-out;    \r
 463         -webkit-animation-timing-function: ease-out;    \r
 464 \r
 465         visibility: visible !important; \r
 466 }\r
 467 \r
 468 @keyframes expandOpen {\r
 469         0% {\r
 470                 transform: scale(1.8);          \r
 471         }\r
 472         50% {\r
 473                 transform: scale(0.95);\r
 474         }       \r
 475         80% {\r
 476                 transform: scale(1.05);\r
 477         }\r
 478         90% {\r
 479                 transform: scale(0.98);\r
 480         }       \r
 481         100% {\r
 482                 transform: scale(1);\r
 483         }                       \r
 484 }\r
 485 \r
 486 @-webkit-keyframes expandOpen {\r
 487         0% {\r
 488                 -webkit-transform: scale(1.8);          \r
 489         }\r
 490         50% {\r
 491                 -webkit-transform: scale(0.95);\r
 492         }       \r
 493         80% {\r
 494                 -webkit-transform: scale(1.05);\r
 495         }\r
 496         90% {\r
 497                 -webkit-transform: scale(0.98);\r
 498         }       \r
 499         100% {\r
 500                 -webkit-transform: scale(1);\r
 501         }                                       \r
 502 }\r
 503 \r
 504 /*\r
 505 ==============================================\r
 506 bigEntrance\r
 507 ==============================================\r
 508 */\r
 509 \r
 510 \r
 511 .bigEntrance{\r
 512         animation-name: bigEntrance;\r
 513         -webkit-animation-name: bigEntrance;    \r
 514 \r
 515         animation-duration: 1.6s;       \r
 516         -webkit-animation-duration: 1.6s;\r
 517 \r
 518         animation-timing-function: ease-out;    \r
 519         -webkit-animation-timing-function: ease-out;    \r
 520 \r
 521         visibility: visible !important;                 \r
 522 }\r
 523 \r
 524 @keyframes bigEntrance {\r
 525         0% {\r
 526                 transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\r
 527                 opacity: 0.2;\r
 528         }\r
 529         30% {\r
 530                 transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);            \r
 531                 opacity: 1;\r
 532         }\r
 533         45% {\r
 534                 transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\r
 535                 opacity: 1;\r
 536         }\r
 537         60% {\r
 538                 transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);             \r
 539                 opacity: 1;\r
 540         }       \r
 541         75% {\r
 542                 transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\r
 543                 opacity: 1;\r
 544         }\r
 545         90% {\r
 546                 transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);              \r
 547                 opacity: 1;\r
 548         }       \r
 549         100% {\r
 550                 transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\r
 551                 opacity: 1;\r
 552         }               \r
 553 }\r
 554 \r
 555 @-webkit-keyframes bigEntrance {\r
 556         0% {\r
 557                 -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\r
 558                 opacity: 0.2;\r
 559         }\r
 560         30% {\r
 561                 -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);            \r
 562                 opacity: 1;\r
 563         }\r
 564         45% {\r
 565                 -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\r
 566                 opacity: 1;\r
 567         }\r
 568         60% {\r
 569                 -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);             \r
 570                 opacity: 1;\r
 571         }       \r
 572         75% {\r
 573                 -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\r
 574                 opacity: 1;\r
 575         }\r
 576         90% {\r
 577                 -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);              \r
 578                 opacity: 1;\r
 579         }       \r
 580         100% {\r
 581                 -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\r
 582                 opacity: 1;\r
 583         }                               \r
 584 }\r
 585 \r
 586 /*\r
 587 ==============================================\r
 588 hatch\r
 589 ==============================================\r
 590 */\r
 591 \r
 592 .hatch{\r
 593         animation-name: hatch;\r
 594         -webkit-animation-name: hatch;  \r
 595 \r
 596         animation-duration: 2s; \r
 597         -webkit-animation-duration: 2s;\r
 598 \r
 599         animation-timing-function: ease-in-out; \r
 600         -webkit-animation-timing-function: ease-in-out;\r
 601 \r
 602         transform-origin: 50% 100%;\r
 603         -ms-transform-origin: 50% 100%;\r
 604         -webkit-transform-origin: 50% 100%; \r
 605 \r
 606         visibility: visible !important;         \r
 607 }\r
 608 \r
 609 @keyframes hatch {\r
 610         0% {\r
 611                 transform: rotate(0deg) scaleY(0.6);\r
 612         }\r
 613         20% {\r
 614                 transform: rotate(-2deg) scaleY(1.05);\r
 615         }\r
 616         35% {\r
 617                 transform: rotate(2deg) scaleY(1);\r
 618         }\r
 619         50% {\r
 620                 transform: rotate(-2deg);\r
 621         }       \r
 622         65% {\r
 623                 transform: rotate(1deg);\r
 624         }       \r
 625         80% {\r
 626                 transform: rotate(-1deg);\r
 627         }               \r
 628         100% {\r
 629                 transform: rotate(0deg);\r
 630         }                                                                       \r
 631 }\r
 632 \r
 633 @-webkit-keyframes hatch {\r
 634         0% {\r
 635                 -webkit-transform: rotate(0deg) scaleY(0.6);\r
 636         }\r
 637         20% {\r
 638                 -webkit-transform: rotate(-2deg) scaleY(1.05);\r
 639         }\r
 640         35% {\r
 641                 -webkit-transform: rotate(2deg) scaleY(1);\r
 642         }\r
 643         50% {\r
 644                 -webkit-transform: rotate(-2deg);\r
 645         }       \r
 646         65% {\r
 647                 -webkit-transform: rotate(1deg);\r
 648         }       \r
 649         80% {\r
 650                 -webkit-transform: rotate(-1deg);\r
 651         }               \r
 652         100% {\r
 653                 -webkit-transform: rotate(0deg);\r
 654         }               \r
 655 }\r
 656 \r
 657 \r
 658 /*\r
 659 ==============================================\r
 660 bounce\r
 661 ==============================================\r
 662 */\r
 663 \r
 664 \r
 665 .bounce{\r
 666         animation-name: bounce;\r
 667         -webkit-animation-name: bounce; \r
 668 \r
 669         animation-duration: 1.6s;       \r
 670         -webkit-animation-duration: 1.6s;\r
 671 \r
 672         animation-timing-function: ease;        \r
 673         -webkit-animation-timing-function: ease;        \r
 674         \r
 675         transform-origin: 50% 100%;\r
 676         -ms-transform-origin: 50% 100%;\r
 677         -webkit-transform-origin: 50% 100%;     \r
 678 }\r
 679 \r
 680 @keyframes bounce {\r
 681         0% {\r
 682                 transform: translateY(0%) scaleY(0.6);\r
 683         }\r
 684         60%{\r
 685                 transform: translateY(-100%) scaleY(1.1);\r
 686         }\r
 687         70%{\r
 688                 transform: translateY(0%) scaleY(0.95) scaleX(1.05);\r
 689         }\r
 690         80%{\r
 691                 transform: translateY(0%) scaleY(1.05) scaleX(1);\r
 692         }       \r
 693         90%{\r
 694                 transform: translateY(0%) scaleY(0.95) scaleX(1);\r
 695         }                               \r
 696         100%{\r
 697                 transform: translateY(0%) scaleY(1) scaleX(1);\r
 698         }       \r
 699 }\r
 700 \r
 701 @-webkit-keyframes bounce {\r
 702         0% {\r
 703                 -webkit-transform: translateY(0%) scaleY(0.6);\r
 704         }\r
 705         60%{\r
 706                 -webkit-transform: translateY(-100%) scaleY(1.1);\r
 707         }\r
 708         70%{\r
 709                 -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);\r
 710         }\r
 711         80%{\r
 712                 -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);\r
 713         }       \r
 714         90%{\r
 715                 -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);\r
 716         }                               \r
 717         100%{\r
 718                 -webkit-transform: translateY(0%) scaleY(1) scaleX(1);\r
 719         }               \r
 720 }\r
 721 \r
 722 \r
 723 /*\r
 724 ==============================================\r
 725 pulse\r
 726 ==============================================\r
 727 */\r
 728 \r
 729 .pulse{\r
 730         animation-name: pulse;\r
 731         -webkit-animation-name: pulse;  \r
 732 \r
 733         animation-duration: 1.5s;       \r
 734         -webkit-animation-duration: 1.5s;\r
 735 \r
 736         animation-iteration-count: infinite;\r
 737         -webkit-animation-iteration-count: infinite;\r
 738 }\r
 739 \r
 740 @keyframes pulse {\r
 741         0% {\r
 742                 transform: scale(0.9);\r
 743                 opacity: 0.7;           \r
 744         }\r
 745         50% {\r
 746                 transform: scale(1);\r
 747                 opacity: 1;     \r
 748         }       \r
 749         100% {\r
 750                 transform: scale(0.9);\r
 751                 opacity: 0.7;   \r
 752         }                       \r
 753 }\r
 754 \r
 755 @-webkit-keyframes pulse {\r
 756         0% {\r
 757                 -webkit-transform: scale(0.95);\r
 758                 opacity: 0.7;           \r
 759         }\r
 760         50% {\r
 761                 -webkit-transform: scale(1);\r
 762                 opacity: 1;     \r
 763         }       \r
 764         100% {\r
 765                 -webkit-transform: scale(0.95);\r
 766                 opacity: 0.7;   \r
 767         }                       \r
 768 }\r
 769 \r
 770 /*\r
 771 ==============================================\r
 772 floating\r
 773 ==============================================\r
 774 */\r
 775 \r
 776 .floating{\r
 777         animation-name: floating;\r
 778         -webkit-animation-name: floating;\r
 779 \r
 780         animation-duration: 1.5s;       \r
 781         -webkit-animation-duration: 1.5s;\r
 782 \r
 783         animation-iteration-count: infinite;\r
 784         -webkit-animation-iteration-count: infinite;\r
 785 }\r
 786 \r
 787 @keyframes floating {\r
 788         0% {\r
 789                 transform: translateY(0%);      \r
 790         }\r
 791         50% {\r
 792                 transform: translateY(8%);      \r
 793         }       \r
 794         100% {\r
 795                 transform: translateY(0%);\r
 796         }                       \r
 797 }\r
 798 \r
 799 @-webkit-keyframes floating {\r
 800         0% {\r
 801                 -webkit-transform: translateY(0%);      \r
 802         }\r
 803         50% {\r
 804                 -webkit-transform: translateY(8%);      \r
 805         }       \r
 806         100% {\r
 807                 -webkit-transform: translateY(0%);\r
 808         }                       \r
 809 }\r
 810 \r
 811 /*\r
 812 ==============================================\r
 813 tossing\r
 814 ==============================================\r
 815 */\r
 816 \r
 817 .tossing{\r
 818         animation-name: tossing;\r
 819         -webkit-animation-name: tossing;        \r
 820 \r
 821         animation-duration: 2.5s;       \r
 822         -webkit-animation-duration: 2.5s;\r
 823 \r
 824         animation-iteration-count: infinite;\r
 825         -webkit-animation-iteration-count: infinite;\r
 826 }\r
 827 \r
 828 @keyframes tossing {\r
 829         0% {\r
 830                 transform: rotate(-4deg);       \r
 831         }\r
 832         50% {\r
 833                 transform: rotate(4deg);\r
 834         }\r
 835         100% {\r
 836                 transform: rotate(-4deg);       \r
 837         }                                               \r
 838 }\r
 839 \r
 840 @-webkit-keyframes tossing {\r
 841         0% {\r
 842                 -webkit-transform: rotate(-4deg);       \r
 843         }\r
 844         50% {\r
 845                 -webkit-transform: rotate(4deg);\r
 846         }\r
 847         100% {\r
 848                 -webkit-transform: rotate(-4deg);       \r
 849         }                               \r
 850 }\r
 851 \r
 852 /*\r
 853 ==============================================\r
 854 pullUp\r
 855 ==============================================\r
 856 */\r
 857 \r
 858 .pullUp{\r
 859         animation-name: pullUp;\r
 860         -webkit-animation-name: pullUp; \r
 861 \r
 862         animation-duration: 1.1s;       \r
 863         -webkit-animation-duration: 1.1s;\r
 864 \r
 865         animation-timing-function: ease-out;    \r
 866         -webkit-animation-timing-function: ease-out;    \r
 867 \r
 868         transform-origin: 50% 100%;\r
 869         -ms-transform-origin: 50% 100%;\r
 870         -webkit-transform-origin: 50% 100%;             \r
 871 }\r
 872 \r
 873 @keyframes pullUp {\r
 874         0% {\r
 875                 transform: scaleY(0.1);\r
 876         }\r
 877         40% {\r
 878                 transform: scaleY(1.02);\r
 879         }\r
 880         60% {\r
 881                 transform: scaleY(0.98);\r
 882         }\r
 883         80% {\r
 884                 transform: scaleY(1.01);\r
 885         }\r
 886         100% {\r
 887                 transform: scaleY(0.98);\r
 888         }                               \r
 889         80% {\r
 890                 transform: scaleY(1.01);\r
 891         }\r
 892         100% {\r
 893                 transform: scaleY(1);\r
 894         }                                                       \r
 895 }\r
 896 \r
 897 @-webkit-keyframes pullUp {\r
 898         0% {\r
 899                 -webkit-transform: scaleY(0.1);\r
 900         }\r
 901         40% {\r
 902                 -webkit-transform: scaleY(1.02);\r
 903         }\r
 904         60% {\r
 905                 -webkit-transform: scaleY(0.98);\r
 906         }\r
 907         80% {\r
 908                 -webkit-transform: scaleY(1.01);\r
 909         }\r
 910         100% {\r
 911                 -webkit-transform: scaleY(0.98);\r
 912         }                               \r
 913         80% {\r
 914                 -webkit-transform: scaleY(1.01);\r
 915         }\r
 916         100% {\r
 917                 -webkit-transform: scaleY(1);\r
 918         }               \r
 919 }\r
 920 \r
 921 /*\r
 922 ==============================================\r
 923 pullDown\r
 924 ==============================================\r
 925 */\r
 926 \r
 927 .pullDown{\r
 928         animation-name: pullDown;\r
 929         -webkit-animation-name: pullDown;       \r
 930 \r
 931         animation-duration: 1.1s;       \r
 932         -webkit-animation-duration: 1.1s;\r
 933 \r
 934         animation-timing-function: ease-out;    \r
 935         -webkit-animation-timing-function: ease-out;    \r
 936 \r
 937         transform-origin: 50% 0%;\r
 938         -ms-transform-origin: 50% 0%;\r
 939         -webkit-transform-origin: 50% 0%;               \r
 940 }\r
 941 \r
 942 @keyframes pullDown {\r
 943         0% {\r
 944                 transform: scaleY(0.1);\r
 945         }\r
 946         40% {\r
 947                 transform: scaleY(1.02);\r
 948         }\r
 949         60% {\r
 950                 transform: scaleY(0.98);\r
 951         }\r
 952         80% {\r
 953                 transform: scaleY(1.01);\r
 954         }\r
 955         100% {\r
 956                 transform: scaleY(0.98);\r
 957         }                               \r
 958         80% {\r
 959                 transform: scaleY(1.01);\r
 960         }\r
 961         100% {\r
 962                 transform: scaleY(1);\r
 963         }                                                       \r
 964 }\r
 965 \r
 966 @-webkit-keyframes pullDown {\r
 967         0% {\r
 968                 -webkit-transform: scaleY(0.1);\r
 969         }\r
 970         40% {\r
 971                 -webkit-transform: scaleY(1.02);\r
 972         }\r
 973         60% {\r
 974                 -webkit-transform: scaleY(0.98);\r
 975         }\r
 976         80% {\r
 977                 -webkit-transform: scaleY(1.01);\r
 978         }\r
 979         100% {\r
 980                 -webkit-transform: scaleY(0.98);\r
 981         }                               \r
 982         80% {\r
 983                 -webkit-transform: scaleY(1.01);\r
 984         }\r
 985         100% {\r
 986                 -webkit-transform: scaleY(1);\r
 987         }               \r
 988 }\r
 989 \r
 990 /*\r
 991 ==============================================\r
 992 stretchLeft\r
 993 ==============================================\r
 994 */\r
 995 \r
 996 .stretchLeft{\r
 997         animation-name: stretchLeft;\r
 998         -webkit-animation-name: stretchLeft;    \r
 999 \r
1000         animation-duration: 1.5s;       \r
1001         -webkit-animation-duration: 1.5s;\r
1002 \r
1003         animation-timing-function: ease-out;    \r
1004         -webkit-animation-timing-function: ease-out;    \r
1005 \r
1006         transform-origin: 100% 0%;\r
1007         -ms-transform-origin: 100% 0%;\r
1008         -webkit-transform-origin: 100% 0%; \r
1009 }\r
1010 \r
1011 @keyframes stretchLeft {\r
1012         0% {\r
1013                 transform: scaleX(0.3);\r
1014         }\r
1015         40% {\r
1016                 transform: scaleX(1.02);\r
1017         }\r
1018         60% {\r
1019                 transform: scaleX(0.98);\r
1020         }\r
1021         80% {\r
1022                 transform: scaleX(1.01);\r
1023         }\r
1024         100% {\r
1025                 transform: scaleX(0.98);\r
1026         }                               \r
1027         80% {\r
1028                 transform: scaleX(1.01);\r
1029         }\r
1030         100% {\r
1031                 transform: scaleX(1);\r
1032         }                                                       \r
1033 }\r
1034 \r
1035 @-webkit-keyframes stretchLeft {\r
1036         0% {\r
1037                 -webkit-transform: scaleX(0.3);\r
1038         }\r
1039         40% {\r
1040                 -webkit-transform: scaleX(1.02);\r
1041         }\r
1042         60% {\r
1043                 -webkit-transform: scaleX(0.98);\r
1044         }\r
1045         80% {\r
1046                 -webkit-transform: scaleX(1.01);\r
1047         }\r
1048         100% {\r
1049                 -webkit-transform: scaleX(0.98);\r
1050         }                               \r
1051         80% {\r
1052                 -webkit-transform: scaleX(1.01);\r
1053         }\r
1054         100% {\r
1055                 -webkit-transform: scaleX(1);\r
1056         }               \r
1057 }\r
1058 \r
1059 /*\r
1060 ==============================================\r
1061 stretchRight\r
1062 ==============================================\r
1063 */\r
1064 \r
1065 .stretchRight{\r
1066         animation-name: stretchRight;\r
1067         -webkit-animation-name: stretchRight;   \r
1068 \r
1069         animation-duration: 1.5s;       \r
1070         -webkit-animation-duration: 1.5s;\r
1071 \r
1072         animation-timing-function: ease-out;    \r
1073         -webkit-animation-timing-function: ease-out;    \r
1074 \r
1075         transform-origin: 0% 0%;\r
1076         -ms-transform-origin: 0% 0%;\r
1077         -webkit-transform-origin: 0% 0%;                \r
1078 }\r
1079 \r
1080 @keyframes stretchRight {\r
1081         0% {\r
1082                 transform: scaleX(0.3);\r
1083         }\r
1084         40% {\r
1085                 transform: scaleX(1.02);\r
1086         }\r
1087         60% {\r
1088                 transform: scaleX(0.98);\r
1089         }\r
1090         80% {\r
1091                 transform: scaleX(1.01);\r
1092         }\r
1093         100% {\r
1094                 transform: scaleX(0.98);\r
1095         }                               \r
1096         80% {\r
1097                 transform: scaleX(1.01);\r
1098         }\r
1099         100% {\r
1100                 transform: scaleX(1);\r
1101         }                                                       \r
1102 }\r
1103 \r
1104 @-webkit-keyframes stretchRight {\r
1105         0% {\r
1106                 -webkit-transform: scaleX(0.3);\r
1107         }\r
1108         40% {\r
1109                 -webkit-transform: scaleX(1.02);\r
1110         }\r
1111         60% {\r
1112                 -webkit-transform: scaleX(0.98);\r
1113         }\r
1114         80% {\r
1115                 -webkit-transform: scaleX(1.01);\r
1116         }\r
1117         100% {\r
1118                 -webkit-transform: scaleX(0.98);\r
1119         }                               \r
1120         80% {\r
1121                 -webkit-transform: scaleX(1.01);\r
1122         }\r
1123         100% {\r
1124                 -webkit-transform: scaleX(1);\r
1125         }               \r
1126 }\r