balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

animate.css (13369B)


      1 /* Custom style for animate.css. Lines 1-17 moved to frontend/_animate.scss */
      2 
      3 @keyframes bounce {
      4     from, 20%, 53%, 80%, to {
      5         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      6         transform: translate3d(0,0,0);
      7     }
      8 
      9     40%, 43% {
     10         animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     11         transform: translate3d(0, -30px, 0);
     12     }
     13 
     14     70% {
     15         animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     16         transform: translate3d(0, -15px, 0);
     17     }
     18 
     19     90% {
     20         transform: translate3d(0,-4px,0);
     21     }
     22 }
     23 
     24 .bounce {
     25     animation-name: bounce;
     26     transform-origin: center bottom;
     27 }
     28 
     29 @keyframes flash {
     30     from, 50%, to {
     31         opacity: 1;
     32     }
     33 
     34     25%, 75% {
     35         opacity: 0;
     36     }
     37 }
     38 
     39 .flash {
     40     animation-name: flash;
     41 }
     42 
     43 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
     44 
     45 @keyframes pulse {
     46     from {
     47         transform: scale3d(1, 1, 1);
     48     }
     49 
     50     50% {
     51         transform: scale3d(1.05, 1.05, 1.05);
     52     }
     53 
     54     to {
     55         transform: scale3d(1, 1, 1);
     56     }
     57 }
     58 
     59 .pulse {
     60     animation-name: pulse;
     61 }
     62 
     63 @keyframes rubberBand {
     64     from {
     65         transform: scale3d(1, 1, 1);
     66     }
     67 
     68     30% {
     69         transform: scale3d(1.25, 0.75, 1);
     70     }
     71 
     72     40% {
     73         transform: scale3d(0.75, 1.25, 1);
     74     }
     75 
     76     50% {
     77         transform: scale3d(1.15, 0.85, 1);
     78     }
     79 
     80     65% {
     81         transform: scale3d(.95, 1.05, 1);
     82     }
     83 
     84     75% {
     85         transform: scale3d(1.05, .95, 1);
     86     }
     87 
     88     to {
     89         transform: scale3d(1, 1, 1);
     90     }
     91 }
     92 
     93 .rubberBand {
     94     animation-name: rubberBand;
     95 }
     96 
     97 @keyframes shake {
     98     from, to {
     99         transform: translate3d(0, 0, 0);
    100     }
    101 
    102     10%, 30%, 50%, 70%, 90% {
    103         transform: translate3d(-10px, 0, 0);
    104     }
    105 
    106     20%, 40%, 60%, 80% {
    107         transform: translate3d(10px, 0, 0);
    108     }
    109 }
    110 
    111 .shake {
    112     animation-name: shake;
    113 }
    114 
    115 @keyframes headShake {
    116     0% {
    117         transform: translateX(0);
    118     }
    119 
    120     6.5% {
    121         transform: translateX(-6px) rotateY(-9deg);
    122     }
    123 
    124     18.5% {
    125         transform: translateX(5px) rotateY(7deg);
    126     }
    127 
    128     31.5% {
    129         transform: translateX(-3px) rotateY(-5deg);
    130     }
    131 
    132     43.5% {
    133         transform: translateX(2px) rotateY(3deg);
    134     }
    135 
    136     50% {
    137         transform: translateX(0);
    138     }
    139 }
    140 
    141 .headShake {
    142     animation-timing-function: ease-in-out;
    143     animation-name: headShake;
    144 }
    145 
    146 @keyframes swing {
    147     20% {
    148         transform: rotate3d(0, 0, 1, 15deg);
    149     }
    150 
    151     40% {
    152         transform: rotate3d(0, 0, 1, -10deg);
    153     }
    154 
    155     60% {
    156         transform: rotate3d(0, 0, 1, 5deg);
    157     }
    158 
    159     80% {
    160         transform: rotate3d(0, 0, 1, -5deg);
    161     }
    162 
    163     to {
    164         transform: rotate3d(0, 0, 1, 0deg);
    165     }
    166 }
    167 
    168 .swing {
    169     transform-origin: top center;
    170     animation-name: swing;
    171 }
    172 
    173 @keyframes tada {
    174     from {
    175         transform: scale3d(1, 1, 1);
    176     }
    177 
    178     10%, 20% {
    179         transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    180     }
    181 
    182     30%, 50%, 70%, 90% {
    183         transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    184     }
    185 
    186     40%, 60%, 80% {
    187         transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    188     }
    189 
    190     to {
    191         transform: scale3d(1, 1, 1);
    192     }
    193 }
    194 
    195 .tada {
    196     animation-name: tada;
    197 }
    198 
    199 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
    200 
    201 @keyframes wobble {
    202     from {
    203         transform: none;
    204     }
    205 
    206     15% {
    207         transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    208     }
    209 
    210     30% {
    211         transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    212     }
    213 
    214     45% {
    215         transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    216     }
    217 
    218     60% {
    219         transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    220     }
    221 
    222     75% {
    223         transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    224     }
    225 
    226     to {
    227         transform: none;
    228     }
    229 }
    230 
    231 .wobble {
    232     animation-name: wobble;
    233 }
    234 
    235 @keyframes jello {
    236     from, 11.1%, to {
    237         transform: none;
    238     }
    239 
    240     22.2% {
    241         transform: skewX(-12.5deg) skewY(-12.5deg);
    242     }
    243 
    244     33.3% {
    245         transform: skewX(6.25deg) skewY(6.25deg);
    246     }
    247 
    248     44.4% {
    249         transform: skewX(-3.125deg) skewY(-3.125deg);
    250     }
    251 
    252     55.5% {
    253         transform: skewX(1.5625deg) skewY(1.5625deg);
    254     }
    255 
    256     66.6% {
    257         transform: skewX(-0.78125deg) skewY(-0.78125deg);
    258     }
    259 
    260     77.7% {
    261         transform: skewX(0.390625deg) skewY(0.390625deg);
    262     }
    263 
    264     88.8% {
    265         transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    266     }
    267 }
    268 
    269 .jello {
    270     animation-name: jello;
    271     transform-origin: center;
    272 }
    273 
    274 @keyframes bounceIn {
    275     from, 20%, 40%, 60%, 80%, to {
    276         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    277     }
    278 
    279     0% {
    280         opacity: 0;
    281         transform: scale3d(.3, .3, .3);
    282     }
    283 
    284     20% {
    285         transform: scale3d(1.1, 1.1, 1.1);
    286     }
    287 
    288     40% {
    289         transform: scale3d(.9, .9, .9);
    290     }
    291 
    292     60% {
    293         opacity: 1;
    294         transform: scale3d(1.03, 1.03, 1.03);
    295     }
    296 
    297     80% {
    298         transform: scale3d(.97, .97, .97);
    299     }
    300 
    301     to {
    302         opacity: 1;
    303         transform: scale3d(1, 1, 1);
    304     }
    305 }
    306 
    307 .bounceIn {
    308     animation-name: bounceIn;
    309 }
    310 
    311 @keyframes bounceInDown {
    312     from, 60%, 75%, 90%, to {
    313         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    314     }
    315 
    316     0% {
    317         opacity: 0;
    318         transform: translate3d(0, -3000px, 0);
    319     }
    320 
    321     60% {
    322         opacity: 1;
    323         transform: translate3d(0, 25px, 0);
    324     }
    325 
    326     75% {
    327         transform: translate3d(0, -10px, 0);
    328     }
    329 
    330     90% {
    331         transform: translate3d(0, 5px, 0);
    332     }
    333 
    334     to {
    335         transform: none;
    336     }
    337 }
    338 
    339 .bounceInDown {
    340     animation-name: bounceInDown;
    341 }
    342 
    343 @keyframes bounceInLeft {
    344     from, 60%, 75%, 90%, to {
    345         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    346     }
    347 
    348     0% {
    349         opacity: 0;
    350         transform: translate3d(-3000px, 0, 0);
    351     }
    352 
    353     60% {
    354         opacity: 1;
    355         transform: translate3d(25px, 0, 0);
    356     }
    357 
    358     75% {
    359         transform: translate3d(-10px, 0, 0);
    360     }
    361 
    362     90% {
    363         transform: translate3d(5px, 0, 0);
    364     }
    365 
    366     to {
    367         transform: none;
    368     }
    369 }
    370 
    371 .bounceInLeft {
    372     animation-name: bounceInLeft;
    373 }
    374 
    375 @keyframes bounceInRight {
    376     from, 60%, 75%, 90%, to {
    377         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    378     }
    379 
    380     from {
    381         opacity: 0;
    382         transform: translate3d(3000px, 0, 0);
    383     }
    384 
    385     60% {
    386         opacity: 1;
    387         transform: translate3d(-25px, 0, 0);
    388     }
    389 
    390     75% {
    391         transform: translate3d(10px, 0, 0);
    392     }
    393 
    394     90% {
    395         transform: translate3d(-5px, 0, 0);
    396     }
    397 
    398     to {
    399         transform: none;
    400     }
    401 }
    402 
    403 .bounceInRight {
    404     animation-name: bounceInRight;
    405 }
    406 
    407 @keyframes bounceInUp {
    408     from, 60%, 75%, 90%, to {
    409         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    410     }
    411 
    412     from {
    413         opacity: 0;
    414         transform: translate3d(0, 3000px, 0);
    415     }
    416 
    417     60% {
    418         opacity: 1;
    419         transform: translate3d(0, -20px, 0);
    420     }
    421 
    422     75% {
    423         transform: translate3d(0, 10px, 0);
    424     }
    425 
    426     90% {
    427         transform: translate3d(0, -5px, 0);
    428     }
    429 
    430     to {
    431         transform: translate3d(0, 0, 0);
    432     }
    433 }
    434 
    435 .bounceInUp {
    436     animation-name: bounceInUp;
    437 }
    438 
    439 @keyframes fadeIn {
    440     from {
    441         opacity: 0;
    442     }
    443 
    444     to {
    445         opacity: 1;
    446     }
    447 }
    448 
    449 .fadeIn {
    450     animation-name: fadeIn;
    451 }
    452 
    453 @keyframes fadeInDown {
    454     from {
    455         opacity: 0;
    456         transform: translate3d(0, -100%, 0);
    457     }
    458 
    459     to {
    460         opacity: 1;
    461         transform: none;
    462     }
    463 }
    464 
    465 .fadeInDown {
    466     animation-name: fadeInDown;
    467 }
    468 
    469 @keyframes fadeInLeft {
    470     from {
    471         opacity: 0;
    472         transform: translate3d(-100%, 0, 0);
    473     }
    474 
    475     to {
    476         opacity: 1;
    477         transform: none;
    478     }
    479 }
    480 
    481 .fadeInLeft {
    482     animation-name: fadeInLeft;
    483 }
    484 
    485 @keyframes fadeInRight {
    486     from {
    487         opacity: 0;
    488         transform: translate3d(100%, 0, 0);
    489     }
    490 
    491     to {
    492         opacity: 1;
    493         transform: none;
    494     }
    495 }
    496 
    497 .fadeInRight {
    498     animation-name: fadeInRight;
    499 }
    500 
    501 @keyframes fadeInUp {
    502     from {
    503         opacity: 0;
    504         transform: translate3d(0, 100%, 0);
    505     }
    506 
    507     to {
    508         opacity: 1;
    509         transform: none;
    510     }
    511 }
    512 
    513 .fadeInUp {
    514     animation-name: fadeInUp;
    515 }
    516 
    517 @keyframes lightSpeedIn {
    518     from {
    519         transform: translate3d(100%, 0, 0) skewX(-30deg);
    520         opacity: 0;
    521     }
    522 
    523     60% {
    524         transform: skewX(20deg);
    525         opacity: 1;
    526     }
    527 
    528     80% {
    529         transform: skewX(-5deg);
    530         opacity: 1;
    531     }
    532 
    533     to {
    534         transform: none;
    535         opacity: 1;
    536     }
    537 }
    538 
    539 .lightSpeedIn {
    540     animation-name: lightSpeedIn;
    541     animation-timing-function: ease-out;
    542 }
    543 
    544 @keyframes rotateIn {
    545     from {
    546         transform-origin: center;
    547         transform: rotate3d(0, 0, 1, -200deg);
    548         opacity: 0;
    549     }
    550 
    551     to {
    552         transform-origin: center;
    553         transform: none;
    554         opacity: 1;
    555     }
    556 }
    557 
    558 .rotateIn {
    559     animation-name: rotateIn;
    560 }
    561 
    562 @keyframes rotateInDownLeft {
    563     from {
    564         transform-origin: left bottom;
    565         transform: rotate3d(0, 0, 1, -45deg);
    566         opacity: 0;
    567     }
    568 
    569     to {
    570         transform-origin: left bottom;
    571         transform: none;
    572         opacity: 1;
    573     }
    574 }
    575 
    576 .rotateInDownLeft {
    577     animation-name: rotateInDownLeft;
    578 }
    579 
    580 @keyframes rotateInDownRight {
    581     from {
    582         transform-origin: right bottom;
    583         transform: rotate3d(0, 0, 1, 45deg);
    584         opacity: 0;
    585     }
    586 
    587     to {
    588         transform-origin: right bottom;
    589         transform: none;
    590         opacity: 1;
    591     }
    592 }
    593 
    594 .rotateInDownRight {
    595     animation-name: rotateInDownRight;
    596 }
    597 
    598 @keyframes rotateInUpLeft {
    599     from {
    600         transform-origin: left bottom;
    601         transform: rotate3d(0, 0, 1, 45deg);
    602         opacity: 0;
    603     }
    604 
    605     to {
    606         transform-origin: left bottom;
    607         transform: none;
    608         opacity: 1;
    609     }
    610 }
    611 
    612 .rotateInUpLeft {
    613     animation-name: rotateInUpLeft;
    614 }
    615 
    616 @keyframes rotateInUpRight {
    617     from {
    618         transform-origin: right bottom;
    619         transform: rotate3d(0, 0, 1, -90deg);
    620         opacity: 0;
    621     }
    622 
    623     to {
    624         transform-origin: right bottom;
    625         transform: none;
    626         opacity: 1;
    627     }
    628 }
    629 
    630 .rotateInUpRight {
    631     animation-name: rotateInUpRight;
    632 }
    633 
    634 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
    635 
    636 @keyframes rollIn {
    637     from {
    638         opacity: 0;
    639         transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    640     }
    641 
    642     to {
    643         opacity: 1;
    644         transform: none;
    645     }
    646 }
    647 
    648 .rollIn {
    649     animation-name: rollIn;
    650 }
    651 
    652 @keyframes zoomIn {
    653     from {
    654         opacity: 0;
    655         transform: scale3d(.3, .3, .3);
    656     }
    657 
    658     50% {
    659         opacity: 1;
    660     }
    661 }
    662 
    663 .zoomIn {
    664     animation-name: zoomIn;
    665 }
    666 
    667 @keyframes zoomInDown {
    668     from {
    669         opacity: 0;
    670         transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    671         animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    672     }
    673 
    674     60% {
    675         opacity: 1;
    676         transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    677         animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    678     }
    679 }
    680 
    681 .zoomInDown {
    682     animation-name: zoomInDown;
    683 }
    684 
    685 @keyframes zoomInLeft {
    686     from {
    687         opacity: 0;
    688         transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    689         animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    690     }
    691 
    692     60% {
    693         opacity: 1;
    694         transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    695         animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    696     }
    697 }
    698 
    699 .zoomInLeft {
    700     animation-name: zoomInLeft;
    701 }
    702 
    703 @keyframes zoomInRight {
    704     from {
    705         opacity: 0;
    706         transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    707         animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    708     }
    709 
    710     60% {
    711         opacity: 1;
    712         transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    713         animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    714     }
    715 }
    716 
    717 .zoomInRight {
    718     animation-name: zoomInRight;
    719 }
    720 
    721 @keyframes zoomInUp {
    722     from {
    723         opacity: 0;
    724         transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    725         animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    726     }
    727 
    728     60% {
    729         opacity: 1;
    730         transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    731         animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    732     }
    733 }
    734 
    735 .zoomInUp {
    736     animation-name: zoomInUp;
    737 }
    738 
    739 @keyframes slideInDown {
    740     from {
    741         transform: translate3d(0, -100%, 0);
    742         visibility: visible;
    743     }
    744 
    745     to {
    746         transform: translate3d(0, 0, 0);
    747     }
    748 }
    749 
    750 .slideInDown {
    751     animation-name: slideInDown;
    752 }
    753 
    754 @keyframes slideInLeft {
    755     from {
    756         transform: translate3d(-100%, 0, 0);
    757         visibility: visible;
    758     }
    759 
    760     to {
    761         transform: translate3d(0, 0, 0);
    762     }
    763 }
    764 
    765 .slideInLeft {
    766     animation-name: slideInLeft;
    767 }
    768 
    769 @keyframes slideInRight {
    770     from {
    771         transform: translate3d(100%, 0, 0);
    772         visibility: visible;
    773     }
    774 
    775     to {
    776         transform: translate3d(0, 0, 0);
    777     }
    778 }
    779 
    780 .slideInRight {
    781     animation-name: slideInRight;
    782 }
    783 
    784 @keyframes slideInUp {
    785     from {
    786         transform: translate3d(0, 100%, 0);
    787         visibility: visible;
    788     }
    789 
    790     to {
    791         transform: translate3d(0, 0, 0);
    792     }
    793 }
    794 
    795 .slideInUp {
    796     animation-name: slideInUp;
    797 }