github.com/dougm/docker@v1.5.0/docs/theme/mkdocs/css/animate-custom.css (about)

     1  /* Some awesome custom aninations, taken from https://daneden.me/animate/build/ */
     2  
     3  
     4  .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes flash {
     5    0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;}
     6  }
     7  
     8  @-moz-keyframes flash {
     9    0%, 50%, 100% {opacity: 1;} 
    10    25%, 75% {opacity: 0;}
    11  }
    12  
    13  @-o-keyframes flash {
    14    0%, 50%, 100% {opacity: 1;} 
    15    25%, 75% {opacity: 0;}
    16  }
    17  
    18  @keyframes flash {
    19    0%, 50%, 100% {opacity: 1;} 
    20    25%, 75% {opacity: 0;}
    21  }
    22  
    23  .flash {
    24    -webkit-animation-name: flash;
    25    -moz-animation-name: flash;
    26    -o-animation-name: flash;
    27    animation-name: flash;
    28  }
    29  @-webkit-keyframes shake {
    30    0%, 100% {-webkit-transform: translateX(0);}
    31    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    32    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
    33  }
    34  
    35  @-moz-keyframes shake {
    36    0%, 100% {-moz-transform: translateX(0);}
    37    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    38    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
    39  }
    40  
    41  @-o-keyframes shake {
    42    0%, 100% {-o-transform: translateX(0);}
    43    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    44    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
    45  }
    46  
    47  @keyframes shake {
    48    0%, 100% {transform: translateX(0);}
    49    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    50    20%, 40%, 60%, 80% {transform: translateX(10px);}
    51  }
    52  
    53  .shake {
    54    -webkit-animation-name: shake;
    55    -moz-animation-name: shake;
    56    -o-animation-name: shake;
    57    animation-name: shake;
    58  }
    59  @-webkit-keyframes bounce {
    60    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    61    40% {-webkit-transform: translateY(-30px);}
    62    60% {-webkit-transform: translateY(-15px);}
    63  }
    64  
    65  @-moz-keyframes bounce {
    66    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    67    40% {-moz-transform: translateY(-30px);}
    68    60% {-moz-transform: translateY(-15px);}
    69  }
    70  
    71  @-o-keyframes bounce {
    72    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    73    40% {-o-transform: translateY(-30px);}
    74    60% {-o-transform: translateY(-15px);}
    75  }
    76  @keyframes bounce {
    77    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    78    40% {transform: translateY(-30px);}
    79    60% {transform: translateY(-15px);}
    80  }
    81  
    82  .bounce {
    83    -webkit-animation-name: bounce;
    84    -moz-animation-name: bounce;
    85    -o-animation-name: bounce;
    86    animation-name: bounce;
    87  }
    88  @-webkit-keyframes tada {
    89    0% {-webkit-transform: scale(1);} 
    90    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
    91    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
    92    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
    93    100% {-webkit-transform: scale(1) rotate(0);}
    94  }
    95  
    96  @-moz-keyframes tada {
    97    0% {-moz-transform: scale(1);}  
    98    10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
    99    30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
   100    40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
   101    100% {-moz-transform: scale(1) rotate(0);}
   102  }
   103  
   104  @-o-keyframes tada {
   105    0% {-o-transform: scale(1);}  
   106    10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
   107    30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
   108    40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
   109    100% {-o-transform: scale(1) rotate(0);}
   110  }
   111  
   112  @keyframes tada {
   113    0% {transform: scale(1);} 
   114    10%, 20% {transform: scale(0.9) rotate(-3deg);}
   115    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
   116    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
   117    100% {transform: scale(1) rotate(0);}
   118  }
   119  
   120  .tada {
   121    -webkit-animation-name: tada;
   122    -moz-animation-name: tada;
   123    -o-animation-name: tada;
   124    animation-name: tada;
   125  }
   126  @-webkit-keyframes swing {
   127    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
   128    20% { -webkit-transform: rotate(15deg); } 
   129    40% { -webkit-transform: rotate(-10deg); }
   130    60% { -webkit-transform: rotate(5deg); }  
   131    80% { -webkit-transform: rotate(-5deg); } 
   132    100% { -webkit-transform: rotate(0deg); }
   133  }
   134  
   135  @-moz-keyframes swing {
   136    20% { -moz-transform: rotate(15deg); }  
   137    40% { -moz-transform: rotate(-10deg); }
   138    60% { -moz-transform: rotate(5deg); } 
   139    80% { -moz-transform: rotate(-5deg); }  
   140    100% { -moz-transform: rotate(0deg); }
   141  }
   142  
   143  @-o-keyframes swing {
   144    20% { -o-transform: rotate(15deg); }  
   145    40% { -o-transform: rotate(-10deg); }
   146    60% { -o-transform: rotate(5deg); } 
   147    80% { -o-transform: rotate(-5deg); }  
   148    100% { -o-transform: rotate(0deg); }
   149  }
   150  
   151  @keyframes swing {
   152    20% { transform: rotate(15deg); } 
   153    40% { transform: rotate(-10deg); }
   154    60% { transform: rotate(5deg); }  
   155    80% { transform: rotate(-5deg); } 
   156    100% { transform: rotate(0deg); }
   157  }
   158  
   159  .swing {
   160    -webkit-transform-origin: top center;
   161    -moz-transform-origin: top center;
   162    -o-transform-origin: top center;
   163    transform-origin: top center;
   164    -webkit-animation-name: swing;
   165    -moz-animation-name: swing;
   166    -o-animation-name: swing;
   167    animation-name: swing;
   168  }
   169  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
   170  
   171  @-webkit-keyframes wobble {
   172    0% { -webkit-transform: translateX(0%); }
   173    15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
   174    30% { -webkit-transform: translateX(20%) rotate(3deg); }
   175    45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
   176    60% { -webkit-transform: translateX(10%) rotate(2deg); }
   177    75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
   178    100% { -webkit-transform: translateX(0%); }
   179  }
   180  
   181  @-moz-keyframes wobble {
   182    0% { -moz-transform: translateX(0%); }
   183    15% { -moz-transform: translateX(-25%) rotate(-5deg); }
   184    30% { -moz-transform: translateX(20%) rotate(3deg); }
   185    45% { -moz-transform: translateX(-15%) rotate(-3deg); }
   186    60% { -moz-transform: translateX(10%) rotate(2deg); }
   187    75% { -moz-transform: translateX(-5%) rotate(-1deg); }
   188    100% { -moz-transform: translateX(0%); }
   189  }
   190  
   191  @-o-keyframes wobble {
   192    0% { -o-transform: translateX(0%); }
   193    15% { -o-transform: translateX(-25%) rotate(-5deg); }
   194    30% { -o-transform: translateX(20%) rotate(3deg); }
   195    45% { -o-transform: translateX(-15%) rotate(-3deg); }
   196    60% { -o-transform: translateX(10%) rotate(2deg); }
   197    75% { -o-transform: translateX(-5%) rotate(-1deg); }
   198    100% { -o-transform: translateX(0%); }
   199  }
   200  
   201  @keyframes wobble {
   202    0% { transform: translateX(0%); }
   203    15% { transform: translateX(-25%) rotate(-5deg); }
   204    30% { transform: translateX(20%) rotate(3deg); }
   205    45% { transform: translateX(-15%) rotate(-3deg); }
   206    60% { transform: translateX(10%) rotate(2deg); }
   207    75% { transform: translateX(-5%) rotate(-1deg); }
   208    100% { transform: translateX(0%); }
   209  }
   210  
   211  .wobble {
   212    -webkit-animation-name: wobble;
   213    -moz-animation-name: wobble;
   214    -o-animation-name: wobble;
   215    animation-name: wobble;
   216  }
   217  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
   218  
   219  @-webkit-keyframes pulse {
   220      0% { -webkit-transform: scale(1); } 
   221    50% { -webkit-transform: scale(1.1); }
   222      100% { -webkit-transform: scale(1); }
   223  }
   224  @-moz-keyframes pulse {
   225      0% { -moz-transform: scale(1); }  
   226    50% { -moz-transform: scale(1.1); }
   227      100% { -moz-transform: scale(1); }
   228  }
   229  @-o-keyframes pulse {
   230      0% { -o-transform: scale(1); }  
   231    50% { -o-transform: scale(1.1); }
   232      100% { -o-transform: scale(1); }
   233  }
   234  @keyframes pulse {
   235      0% { transform: scale(1); } 
   236    50% { transform: scale(1.1); }
   237      100% { transform: scale(1); }
   238  }
   239  
   240  .pulse {
   241    -webkit-animation-name: pulse;
   242    -moz-animation-name: pulse;
   243    -o-animation-name: pulse;
   244    animation-name: pulse;
   245  }
   246  @-webkit-keyframes hinge {
   247    0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }  
   248    20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }  
   249    40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 
   250    80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 
   251    100% { -webkit-transform: translateY(700px); opacity: 0; }
   252  }
   253  
   254  @-moz-keyframes hinge {
   255    0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 
   256    20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 
   257    40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }  
   258    80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }  
   259    100% { -moz-transform: translateY(700px); opacity: 0; }
   260  }
   261  
   262  @-o-keyframes hinge {
   263    0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 
   264    20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 
   265    40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }  
   266    80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }  
   267    100% { -o-transform: translateY(700px); opacity: 0; }
   268  }
   269  
   270  @keyframes hinge {
   271    0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
   272    20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }  
   273    40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
   274    80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
   275    100% { transform: translateY(700px); opacity: 0; }
   276  }
   277  
   278  .hinge {
   279    -webkit-animation-name: hinge;
   280    -moz-animation-name: hinge;
   281    -o-animation-name: hinge;
   282    animation-name: hinge;
   283  }