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 }