├── LICENSE ├── README.md ├── package.json ├── vivify.css ├── vivify.min.css └── vivify.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Martin Knize 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Vivify Logo](http://vivify.mkcreative.cz/assets/img/vivify.png) 2 | 3 | [Vivify web presentation](http://vivify.mkcreative.cz) 4 | 5 | Vivify is free CSS animation library. 6 | 7 | 8 | ## Usage 9 | Simply include vivify css file into your document's `````` 10 | ```HTML 11 | 12 | ``` 13 | Add class ```vivify``` to the element you want to animate. If you want your animation to be infinite, you can also add ```infinite``` class. 14 | 15 | ### List of class names you can add 16 | - ball 17 | - blink 18 | - driveInBottom 19 | - driveInLeft 20 | - driveInRight 21 | - driveInTop 22 | - driveOutBottom 23 | - driveOutLeft 24 | - driveOutRight 25 | - driveOutTop 26 | - fadeIn 27 | - fadeInBottom 28 | - fadeInLeft 29 | - fadeInRight 30 | - fadeInTop 31 | - fadeOut 32 | - fadeOutBottom 33 | - fadeOutLeft 34 | - fadeOutRight 35 | - fadeOutTop 36 | - flip 37 | - flipInX 38 | - flipInY 39 | - flipOutX 40 | - flipOutY 41 | - fold 42 | - hitLeft 43 | - hitRight 44 | - jumpInLeft 45 | - jumpInRight 46 | - jumpOutLeft 47 | - jumpOutRight 48 | - popIn 49 | - popInBottom 50 | - popInLeft 51 | - popInRight 52 | - popInTop 53 | - popOut 54 | - popOutBottom 55 | - popOutLeft 56 | - popOutRight 57 | - popOutTop 58 | - pullDown 59 | - pullLeft 60 | - pullRight 61 | - pullUp 62 | - pulsate 63 | - rollInBottom 64 | - rollInLeft 65 | - rollInRight 66 | - rollInTop 67 | - rollOutBottom 68 | - rollOutLeft 69 | - rollOutRight 70 | - rollOutTop 71 | - shake 72 | - spin 73 | - spinIn 74 | - spinOut 75 | - swoopInBottom 76 | - swoopInLeft 77 | - swoopInRight 78 | - swoopInTop 79 | - swoopOutBottom 80 | - swoopOutLeft 81 | - swoopOutRight 82 | - swoopOutTop 83 | - unfold 84 | 85 | [Preview all animations here](http://vivify.mkcreative.cz) 86 | 87 | 88 | ### delay and duration classes 89 | If you want to quickly change delay or duration you can just add ```delay-``` or ```duration-``` and number in ms. 90 | 91 | **Available times:** 92 | 100,150 **to** 900,950 93 | 1000,1250,1500,1750 **to** 10000,10250,10500,10750 94 | 95 | **example:** ```delay-2500``` for 2.5 second delay. or ```duration-550``` for 550 ms duration. 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vivifycss", 3 | "version": "1.0.0", 4 | "description": "Vivify is free CSS animation library", 5 | "main": "vivify.css", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/Martz90/vivify.git" 9 | }, 10 | "keywords": [ 11 | "vivify", 12 | "css", 13 | "animation" 14 | ], 15 | "author": "Martin Kníže", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/Martz90/vivify/issues" 19 | }, 20 | "homepage": "http://vivify.mkcreative.cz/" 21 | } 22 | -------------------------------------------------------------------------------- /vivify.css: -------------------------------------------------------------------------------- 1 | /* 2 | Vivify 3 | version: 1.0 4 | Licensed under the MIT license - http://opensource.org/licenses/MIT 5 | 6 | The MIT License 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy 9 | of this software and associated documentation files (the "Software"), to deal 10 | in the Software without restriction, including without limitation the rights 11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | copies of the Software, and to permit persons to whom the Software is 13 | furnished to do so, subject to the following conditions: 14 | 15 | The above copyright notice and this permission notice shall be included in 16 | all copies or substantial portions of the Software. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 | THE SOFTWARE. 25 | */ 26 | /* 27 | Copyright (c) 2017 Martin Knize. 28 | 29 | */ 30 | .vivify { 31 | -webkit-animation-duration: .8s; 32 | -webkit-animation-fill-mode: both; 33 | animation-duration: .8s; 34 | animation-fill-mode: both; } 35 | 36 | .infinite { 37 | -webkit-animation-iteration-count: infinite; 38 | animation-iteration-count: infinite; } 39 | 40 | .pulsate { 41 | -webkit-animation-name: pulsate; 42 | animation-name: pulsate; 43 | -webkit-transform-origin: center; 44 | transform-origin: center; } 45 | 46 | @keyframes pulsate { 47 | 0% { 48 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 49 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 50 | -webkit-transform: scale3d(1, 1, 1); 51 | transform: scale3d(1, 1, 1); } 52 | 50% { 53 | -webkit-transform: scale3d(0.8, 0.8, 0.8); 54 | transform: scale3d(0.8, 0.8, 0.8); } 55 | 100% { 56 | -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); 57 | animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); 58 | -webkit-transform: scale3d(1, 1, 1); 59 | transform: scale3d(1, 1, 1); } } 60 | .blink { 61 | -webkit-animation-name: blink; 62 | animation-name: blink; 63 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 64 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 65 | -webkit-animation-duration: 1s; 66 | animation-duration: 1s; } 67 | 68 | @keyframes blink { 69 | 0% { 70 | opacity: 1; } 71 | 25% { 72 | opacity: 0; } 73 | 50% { 74 | opacity: 1; } 75 | 75% { 76 | opacity: 0; } 77 | 100% { 78 | opacity: 1; } } 79 | .hitLeft { 80 | -webkit-animation-name: hitLeft; 81 | animation-name: hitLeft; 82 | -webkit-backface-visibility: hidden; 83 | backface-visibility: hidden; } 84 | 85 | @keyframes hitLeft { 86 | 0% { 87 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 88 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 89 | -webkit-transform: translateX(0); 90 | transform: translateX(0); } 91 | 40% { 92 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 93 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 94 | -webkit-transform: translateX(20px) rotate(4deg); 95 | transform: translateX(20px) rotate(4deg); } } 96 | .hitRight { 97 | -webkit-animation-name: hitRight; 98 | animation-name: hitRight; 99 | -webkit-backface-visibility: hidden; 100 | backface-visibility: hidden; } 101 | 102 | @keyframes hitRight { 103 | 0% { 104 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 105 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 106 | -webkit-transform: translateX(0); 107 | transform: translateX(0); } 108 | 40% { 109 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 110 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 111 | -webkit-transform: translateX(-20px) rotate(-4deg); 112 | transform: translateX(-20px) rotate(-4deg); } } 113 | .shake { 114 | -webkit-animation-name: shake; 115 | animation-name: shake; 116 | -webkit-animation-duration: 1s; 117 | animation-duration: 1s; 118 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 119 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 120 | 121 | @keyframes shake { 122 | 10% { 123 | -webkit-transform: translateX(-10px); 124 | transform: translateX(-10px); } 125 | 20% { 126 | -webkit-transform: translateX(10px); 127 | transform: translateX(10px); } 128 | 30% { 129 | -webkit-transform: translateX(-10px); 130 | transform: translateX(-10px); } 131 | 40% { 132 | -webkit-transform: translateX(10px); 133 | transform: translateX(10px); } 134 | 50% { 135 | -webkit-transform: translateX(-10px); 136 | transform: translateX(-10px); } 137 | 60% { 138 | -webkit-transform: translateX(10px); 139 | transform: translateX(10px); } 140 | 70% { 141 | -webkit-transform: translateX(-10px); 142 | transform: translateX(-10px); } 143 | 80% { 144 | -webkit-transform: translateX(10px); 145 | transform: translateX(10px); } 146 | 90% { 147 | -webkit-transform: translateX(-10px); 148 | transform: translateX(-10px); } } 149 | .ball { 150 | -webkit-animation-name: ball; 151 | animation-name: ball; 152 | -webkit-animation-duration: 2s; 153 | animation-duration: 2s; } 154 | 155 | @keyframes ball { 156 | 0% { 157 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 158 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 159 | -webkit-transform: translate3d(0, 0, 0); 160 | transform: translate3d(0, 0, 0); } 161 | 20% { 162 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); 163 | animation-timing-function: cubic-bezier(0.42, 0, 1, 1); 164 | -webkit-transform: translate3d(0, -100px, 0); 165 | transform: translate3d(0, -100px, 0); } 166 | 40% { 167 | -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); 168 | animation-timing-function: cubic-bezier(0, 0, 0.58, 1); 169 | -webkit-transform: translate3d(0, 0, 0); 170 | transform: translate3d(0, 0, 0); } 171 | 60% { 172 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); 173 | animation-timing-function: cubic-bezier(0.42, 0, 1, 1); 174 | -webkit-transform: translate3d(0, -30px, 0); 175 | transform: translate3d(0, -30px, 0); } 176 | 75% { 177 | -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); 178 | animation-timing-function: cubic-bezier(0, 0, 0.58, 1); 179 | -webkit-transform: translate3d(0, 0, 0); 180 | transform: translate3d(0, 0, 0); } 181 | 85% { 182 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); 183 | animation-timing-function: cubic-bezier(0.42, 0, 1, 1); 184 | -webkit-transform: translate3d(0, -15px, 0); 185 | transform: translate3d(0, -15px, 0); } 186 | 100% { 187 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 188 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 189 | -webkit-transform: translate3d(0, 0, 0); 190 | transform: translate3d(0, 0, 0); } } 191 | .pullUp { 192 | -webkit-animation-name: pullUp; 193 | animation-name: pullUp; 194 | -webkit-backface-visibility: hidden; 195 | backface-visibility: hidden; } 196 | 197 | @keyframes pullUp { 198 | 0% { 199 | -webkit-transform: scale3d(0, 0, 0); 200 | transform: scale3d(0, 0, 0); } 201 | 30% { 202 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 203 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 204 | -webkit-transform: scale3d(1, 0, 1); 205 | transform: scale3d(1, 0, 1); 206 | -webkit-transform-origin: center bottom; 207 | transform-origin: center bottom; } 208 | 100% { 209 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 210 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 211 | -webkit-transform: scale3d(1, 1, 1); 212 | transform: scale3d(1, 1, 1); } } 213 | .pullDown { 214 | -webkit-animation-name: pullDown; 215 | animation-name: pullDown; 216 | -webkit-backface-visibility: hidden; 217 | backface-visibility: hidden; } 218 | 219 | @keyframes pullDown { 220 | 0% { 221 | -webkit-transform: scale3d(0, 0, 0); 222 | transform: scale3d(0, 0, 0); } 223 | 50% { 224 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 225 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 226 | -webkit-transform: scale3d(1, 0, 1); 227 | transform: scale3d(1, 0, 1); 228 | -webkit-transform-origin: center top; 229 | transform-origin: center top; } 230 | 100% { 231 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 232 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 233 | -webkit-transform: scale3d(1, 1, 1); 234 | transform: scale3d(1, 1, 1); } } 235 | .pullLeft { 236 | -webkit-animation-name: pullLeft; 237 | animation-name: pullLeft; 238 | -webkit-backface-visibility: hidden; 239 | backface-visibility: hidden; } 240 | 241 | @keyframes pullLeft { 242 | 0% { 243 | -webkit-transform: scale3d(0, 1, 1); 244 | transform: scale3d(0, 1, 1); } 245 | 50% { 246 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 247 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 248 | -webkit-transform: scale3d(0, 1, 1); 249 | transform: scale3d(0, 1, 1); 250 | -webkit-transform-origin: center left; 251 | transform-origin: center left; } 252 | 100% { 253 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 254 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 255 | -webkit-transform: scale3d(1, 1, 1); 256 | transform: scale3d(1, 1, 1); } } 257 | .pullRight { 258 | -webkit-animation-name: pullRight; 259 | animation-name: pullRight; 260 | -webkit-backface-visibility: hidden; 261 | backface-visibility: hidden; } 262 | 263 | @keyframes pullRight { 264 | 0% { 265 | -webkit-transform: scale3d(0, 1, 1); 266 | transform: scale3d(0, 1, 1); } 267 | 50% { 268 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 269 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 270 | -webkit-transform: scale3d(0, 1, 1); 271 | transform: scale3d(0, 1, 1); 272 | -webkit-transform-origin: center right; 273 | transform-origin: center right; } 274 | 100% { 275 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 276 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 277 | -webkit-transform: scale3d(1, 1, 1); 278 | transform: scale3d(1, 1, 1); } } 279 | .jumpInLeft { 280 | -webkit-animation-name: jumpInLeft; 281 | animation-name: jumpInLeft; 282 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 283 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 284 | -webkit-backface-visibility: hidden; 285 | backface-visibility: hidden; } 286 | 287 | @keyframes jumpInLeft { 288 | 0% { 289 | opacity: 0; 290 | -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); 291 | transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } 292 | 50% { 293 | opacity: 1; 294 | -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); 295 | transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 296 | 70% { 297 | -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); 298 | transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 299 | 90% { 300 | -webkit-transform: scale3d(1, 1, 1) rotate(0deg); 301 | transform: scale3d(1, 1, 1) rotate(0deg); } } 302 | .jumpInRight { 303 | -webkit-animation-name: jumpInRight; 304 | animation-name: jumpInRight; 305 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 306 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 307 | -webkit-backface-visibility: hidden; 308 | backface-visibility: hidden; } 309 | 310 | @keyframes jumpInRight { 311 | 0% { 312 | opacity: 0; 313 | -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); 314 | transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } 315 | 50% { 316 | opacity: 1; 317 | -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); 318 | transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 319 | 70% { 320 | -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); 321 | transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 322 | 90% { 323 | -webkit-transform: scale3d(1, 1, 1) rotate(0deg); 324 | transform: scale3d(1, 1, 1) rotate(0deg); } } 325 | .jumpOutRight { 326 | -webkit-animation-name: jumpOutRight; 327 | animation-name: jumpOutRight; 328 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 329 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 330 | -webkit-backface-visibility: hidden; 331 | backface-visibility: hidden; } 332 | 333 | @keyframes jumpOutRight { 334 | 0% { 335 | -webkit-transform: scale3d(1, 1, 1) rotate(0deg); 336 | transform: scale3d(1, 1, 1) rotate(0deg); } 337 | 30% { 338 | -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); 339 | transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 340 | 70% { 341 | opacity: 1; 342 | -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); 343 | transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 344 | 100% { 345 | opacity: 0; 346 | -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); 347 | transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } } 348 | .jumpOutLeft { 349 | -webkit-animation-name: jumpOutLeft; 350 | animation-name: jumpOutLeft; 351 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 352 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 353 | -webkit-backface-visibility: hidden; 354 | backface-visibility: hidden; } 355 | 356 | @keyframes jumpOutLeft { 357 | 0% { 358 | -webkit-transform: scale3d(1, 1, 1) rotate(0deg); 359 | transform: scale3d(1, 1, 1) rotate(0deg); } 360 | 30% { 361 | -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); 362 | transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 363 | 70% { 364 | opacity: 1; 365 | -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); 366 | transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 367 | 100% { 368 | opacity: 0; 369 | -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); 370 | transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } } 371 | .rollInLeft { 372 | -webkit-animation-name: rollInLeft; 373 | animation-name: rollInLeft; 374 | -webkit-animation-duration: 0.9s; 375 | animation-duration: 0.9s; 376 | -webkit-backface-visibility: hidden; 377 | backface-visibility: hidden; } 378 | 379 | @keyframes rollInLeft { 380 | 0% { 381 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 382 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 383 | -webkit-transform: translateX(-400px) rotate(445deg); 384 | transform: translateX(-400px) rotate(445deg); 385 | opacity: 0; } 386 | 30% { 387 | opacity: 1; } 388 | 50% { 389 | -webkit-transform: translateX(20px) rotate(20deg); 390 | transform: translateX(20px) rotate(20deg); } 391 | 100% { 392 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 393 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 394 | -webkit-transform: translateX(0) rotate(0deg); 395 | transform: translateX(0) rotate(0deg); } } 396 | .rollInRight { 397 | -webkit-animation-name: rollInRight; 398 | animation-name: rollInRight; 399 | -webkit-animation-duration: 0.9s; 400 | animation-duration: 0.9s; 401 | -webkit-backface-visibility: hidden; 402 | backface-visibility: hidden; } 403 | 404 | @keyframes rollInRight { 405 | 0% { 406 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 407 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 408 | -webkit-transform: translateX(400px) rotate(-445deg); 409 | transform: translateX(400px) rotate(-445deg); 410 | opacity: 0; } 411 | 30% { 412 | opacity: 1; } 413 | 50% { 414 | -webkit-transform: translateX(-20px) rotate(-20deg); 415 | transform: translateX(-20px) rotate(-20deg); } 416 | 100% { 417 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 418 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 419 | -webkit-transform: translateX(0) rotate(0deg); 420 | transform: translateX(0) rotate(0deg); } } 421 | .rollInTop { 422 | -webkit-animation-name: rollInTop; 423 | animation-name: rollInTop; 424 | -webkit-animation-duration: 0.9s; 425 | animation-duration: 0.9s; 426 | -webkit-backface-visibility: hidden; 427 | backface-visibility: hidden; } 428 | 429 | @keyframes rollInTop { 430 | 0% { 431 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 432 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 433 | -webkit-transform: translateY(-400px) rotate(-445deg); 434 | transform: translateY(-400px) rotate(-445deg); 435 | opacity: 0; } 436 | 30% { 437 | opacity: 1; } 438 | 50% { 439 | -webkit-transform: translateY(20px) rotate(-20deg); 440 | transform: translateY(20px) rotate(-20deg); } 441 | 100% { 442 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 443 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 444 | -webkit-transform: translateY(0) rotate(0deg); 445 | transform: translateY(0) rotate(0deg); } } 446 | .rollInBottom { 447 | -webkit-animation-name: rollInBottom; 448 | animation-name: rollInBottom; 449 | -webkit-animation-duration: 0.9s; 450 | animation-duration: 0.9s; 451 | -webkit-backface-visibility: hidden; 452 | backface-visibility: hidden; } 453 | 454 | @keyframes rollInBottom { 455 | 0% { 456 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 457 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 458 | -webkit-transform: translateY(400px) rotate(-445deg); 459 | transform: translateY(400px) rotate(-445deg); 460 | opacity: 0; } 461 | 30% { 462 | opacity: 1; } 463 | 50% { 464 | -webkit-transform: translateY(-20px) rotate(-20deg); 465 | transform: translateY(-20px) rotate(-20deg); } 466 | 100% { 467 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 468 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 469 | -webkit-transform: translateY(0) rotate(0deg); 470 | transform: translateY(0) rotate(0deg); } } 471 | .rollOutLeft { 472 | -webkit-animation-name: rollOutLeft; 473 | animation-name: rollOutLeft; 474 | -webkit-animation-duration: 0.9s; 475 | animation-duration: 0.9s; 476 | -webkit-backface-visibility: hidden; 477 | backface-visibility: hidden; } 478 | 479 | @keyframes rollOutLeft { 480 | 0% { 481 | opacity: 1; 482 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 483 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 484 | -webkit-transform: translateX(0) rotate(0deg); 485 | transform: translateX(0) rotate(0deg); } 486 | 40% { 487 | opacity: 1; 488 | -webkit-transform: translateX(20px) rotate(-20deg); 489 | transform: translateX(20px) rotate(-20deg); } 490 | 100% { 491 | opacity: 0; 492 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 493 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 494 | -webkit-transform: translateX(-400px) rotate(-445deg); 495 | transform: translateX(-400px) rotate(-445deg); } } 496 | .rollOutRight { 497 | -webkit-animation-name: rollOutRight; 498 | animation-name: rollOutRight; 499 | -webkit-animation-duration: 0.9s; 500 | animation-duration: 0.9s; 501 | -webkit-backface-visibility: hidden; 502 | backface-visibility: hidden; } 503 | 504 | @keyframes rollOutRight { 505 | 0% { 506 | opacity: 1; 507 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 508 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 509 | -webkit-transform: translateX(0) rotate(0deg); 510 | transform: translateX(0) rotate(0deg); } 511 | 40% { 512 | opacity: 1; 513 | -webkit-transform: translateX(-20px) rotate(20deg); 514 | transform: translateX(-20px) rotate(20deg); } 515 | 100% { 516 | opacity: 0; 517 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 518 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 519 | -webkit-transform: translateX(400px) rotate(445deg); 520 | transform: translateX(400px) rotate(445deg); } } 521 | .rollOutTop { 522 | -webkit-animation-name: rollOutTop; 523 | animation-name: rollOutTop; 524 | -webkit-animation-duration: 0.9s; 525 | animation-duration: 0.9s; 526 | -webkit-backface-visibility: hidden; 527 | backface-visibility: hidden; } 528 | 529 | @keyframes rollOutTop { 530 | 0% { 531 | opacity: 1; 532 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 533 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 534 | -webkit-transform: translateY(0) rotate(0deg); 535 | transform: translateY(0) rotate(0deg); } 536 | 40% { 537 | opacity: 1; 538 | -webkit-transform: translateY(20px) rotate(20deg); 539 | transform: translateY(20px) rotate(20deg); } 540 | 100% { 541 | opacity: 0; 542 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 543 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 544 | -webkit-transform: translateY(-400px) rotate(445deg); 545 | transform: translateY(-400px) rotate(445deg); } } 546 | .rollOutBottom { 547 | -webkit-animation-name: rollOutBottom; 548 | animation-name: rollOutBottom; 549 | -webkit-animation-duration: 0.9s; 550 | animation-duration: 0.9s; 551 | -webkit-backface-visibility: hidden; 552 | backface-visibility: hidden; } 553 | 554 | @keyframes rollOutBottom { 555 | 0% { 556 | opacity: 1; 557 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 558 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 559 | -webkit-transform: translateY(0) rotate(0deg); 560 | transform: translateY(0) rotate(0deg); } 561 | 40% { 562 | opacity: 1; 563 | -webkit-transform: translateY(-20px) rotate(-20deg); 564 | transform: translateY(-20px) rotate(-20deg); } 565 | 100% { 566 | opacity: 0; 567 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 568 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 569 | -webkit-transform: translateY(400px) rotate(-445deg); 570 | transform: translateY(400px) rotate(-445deg); } } 571 | .popIn { 572 | -webkit-animation-name: popIn; 573 | animation-name: popIn; 574 | -webkit-animation-duration: 1s; 575 | animation-duration: 1s; } 576 | 577 | @keyframes popIn { 578 | 0% { 579 | -webkit-transform: scale3d(0, 0, 0); 580 | transform: scale3d(0, 0, 0); 581 | opacity: 0; } 582 | 20% { 583 | opacity: 1; } 584 | 40% { 585 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 586 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 587 | -webkit-transform: scale3d(1.08, 1.08, 1.08); 588 | transform: scale3d(1.08, 1.08, 1.08); } 589 | 60% { 590 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 591 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 592 | -webkit-transform: scale3d(1, 1, 1); 593 | transform: scale3d(1, 1, 1); } 594 | 80% { 595 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 596 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 597 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 598 | transform: scale3d(1.03, 1.03, 1.03); } 599 | 100% { 600 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 601 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 602 | -webkit-transform: scale3d(1, 1, 1); 603 | transform: scale3d(1, 1, 1); } } 604 | .popInLeft { 605 | -webkit-animation-name: popInLeft; 606 | animation-name: popInLeft; 607 | -webkit-animation-duration: 1s; 608 | animation-duration: 1s; } 609 | 610 | @keyframes popInLeft { 611 | 0% { 612 | opacity: 0; 613 | -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); 614 | transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); } 615 | 40% { 616 | opacity: 1; 617 | -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); 618 | transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); 619 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 620 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 621 | 60% { 622 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 623 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 624 | -webkit-transform: scale3d(1, 1, 1); 625 | transform: scale3d(1, 1, 1); } 626 | 80% { 627 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 628 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 629 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 630 | transform: scale3d(1.03, 1.03, 1.03); } 631 | 100% { 632 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 633 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 634 | -webkit-transform: scale3d(1, 1, 1); 635 | transform: scale3d(1, 1, 1); } } 636 | .popInRight { 637 | -webkit-animation-name: popInRight; 638 | animation-name: popInRight; 639 | -webkit-animation-duration: 1s; 640 | animation-duration: 1s; } 641 | 642 | @keyframes popInRight { 643 | 0% { 644 | -webkit-transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); 645 | transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); 646 | opacity: 0; } 647 | 40% { 648 | opacity: 1; 649 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 650 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 651 | -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); 652 | transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 653 | 60% { 654 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 655 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 656 | -webkit-transform: scale3d(1, 1, 1); 657 | transform: scale3d(1, 1, 1); } 658 | 80% { 659 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 660 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 661 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 662 | transform: scale3d(1.03, 1.03, 1.03); } 663 | 100% { 664 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 665 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 666 | -webkit-transform: scale3d(1, 1, 1); 667 | transform: scale3d(1, 1, 1); } } 668 | .popInTop { 669 | -webkit-animation-name: popInTop; 670 | animation-name: popInTop; 671 | -webkit-animation-duration: 1s; 672 | animation-duration: 1s; } 673 | 674 | @keyframes popInTop { 675 | 0% { 676 | -webkit-transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); 677 | transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); 678 | opacity: 0; } 679 | 40% { 680 | opacity: 1; 681 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 682 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 683 | -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); 684 | transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 685 | 60% { 686 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 687 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 688 | -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 689 | transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 690 | 80% { 691 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 692 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 693 | -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); 694 | transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 695 | 100% { 696 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 697 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 698 | -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 699 | transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } 700 | .popInBottom { 701 | -webkit-animation-name: popInBottom; 702 | animation-name: popInBottom; 703 | -webkit-animation-duration: 1s; 704 | animation-duration: 1s; } 705 | 706 | @keyframes popInBottom { 707 | 0% { 708 | -webkit-transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); 709 | transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); 710 | opacity: 0; } 711 | 40% { 712 | opacity: 1; 713 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 714 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 715 | -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); 716 | transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 717 | 60% { 718 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 719 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 720 | -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 721 | transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 722 | 80% { 723 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 724 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 725 | -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); 726 | transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 727 | 100% { 728 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 729 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 730 | -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 731 | transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } 732 | .popOut { 733 | -webkit-animation-name: popOut; 734 | animation-name: popOut; 735 | -webkit-animation-duration: 0.5s; 736 | animation-duration: 0.5s; } 737 | 738 | @keyframes popOut { 739 | 0% { 740 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 741 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 742 | -webkit-transform: scale3d(1, 1, 1); 743 | transform: scale3d(1, 1, 1); } 744 | 60% { 745 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 746 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 747 | -webkit-transform: scale3d(1.08, 1.08, 1.08); 748 | transform: scale3d(1.08, 1.08, 1.08); } 749 | 80% { 750 | opacity: 1; 751 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 752 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 753 | 100% { 754 | opacity: 0; 755 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 756 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 757 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 758 | transform: scale3d(0.3, 0.3, 0.3); } } 759 | .popOutLeft { 760 | -webkit-animation-name: popOutLeft; 761 | animation-name: popOutLeft; 762 | -webkit-animation-duration: 0.5s; 763 | animation-duration: 0.5s; } 764 | 765 | @keyframes popOutLeft { 766 | 0% { 767 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 768 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 769 | -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 770 | transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 771 | -webkit-transform-origin: left center; 772 | transform-origin: left center; } 773 | 40% { 774 | opacity: 1; 775 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 776 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 777 | -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); 778 | transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 779 | 100% { 780 | opacity: 0; 781 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 782 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 783 | -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); 784 | transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); } } 785 | .popOutRight { 786 | -webkit-animation-name: popOutRight; 787 | animation-name: popOutRight; 788 | -webkit-backface-visibility: hidden; 789 | backface-visibility: hidden; 790 | -webkit-animation-duration: 0.5s; 791 | animation-duration: 0.5s; } 792 | 793 | @keyframes popOutRight { 794 | 0% { 795 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 796 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 797 | -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 798 | transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 799 | -webkit-transform-origin: right center; 800 | transform-origin: right center; } 801 | 40% { 802 | opacity: 1; 803 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 804 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 805 | -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); 806 | transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 807 | 100% { 808 | opacity: 0; 809 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 810 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 811 | -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); 812 | transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); } } 813 | .popOutTop { 814 | -webkit-animation-name: popOutTop; 815 | animation-name: popOutTop; 816 | -webkit-backface-visibility: hidden; 817 | backface-visibility: hidden; 818 | -webkit-animation-duration: 0.5s; 819 | animation-duration: 0.5s; } 820 | 821 | @keyframes popOutTop { 822 | 0% { 823 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 824 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 825 | -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 826 | transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 827 | -webkit-transform-origin: top center; 828 | transform-origin: top center; } 829 | 40% { 830 | opacity: 1; 831 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 832 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 833 | -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); 834 | transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 835 | 100% { 836 | opacity: 0; 837 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 838 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 839 | -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); 840 | transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); } } 841 | .popOutBottom { 842 | -webkit-animation-name: popOutBottom; 843 | animation-name: popOutBottom; 844 | -webkit-backface-visibility: hidden; 845 | backface-visibility: hidden; 846 | -webkit-animation-duration: 0.5s; 847 | animation-duration: 0.5s; } 848 | 849 | @keyframes popOutBottom { 850 | 0% { 851 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 852 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 853 | -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 854 | transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 855 | -webkit-transform-origin: bottom center; 856 | transform-origin: bottom center; } 857 | 40% { 858 | opacity: 1; 859 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 860 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 861 | -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); 862 | transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 863 | 100% { 864 | opacity: 0; 865 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 866 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 867 | -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); 868 | transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); } } 869 | .flip { 870 | -webkit-animation-name: flip; 871 | animation-name: flip; } 872 | 873 | @keyframes flip { 874 | from { 875 | -webkit-transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); 876 | transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); 877 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 878 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 879 | 50% { 880 | -webkit-transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); 881 | transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); 882 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 883 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 884 | to { 885 | -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); 886 | transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); 887 | -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); 888 | animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } } 889 | .flipInX { 890 | -webkit-animation-name: flipInX; 891 | animation-name: flipInX; 892 | -webkit-animation-duration: 1s; 893 | animation-duration: 1s; } 894 | 895 | @keyframes flipInX { 896 | from { 897 | opacity: 0; 898 | -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); 899 | transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } 900 | 50% { 901 | opacity: 1; 902 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 903 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 904 | -webkit-transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); 905 | transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); } 906 | to { 907 | -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); 908 | transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } } 909 | .flipInY { 910 | -webkit-animation-name: flipInY; 911 | animation-name: flipInY; 912 | -webkit-animation-duration: 1s; 913 | animation-duration: 1s; } 914 | 915 | @keyframes flipInY { 916 | from { 917 | opacity: 0; 918 | -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); 919 | transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } 920 | 50% { 921 | opacity: 1; 922 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 923 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 924 | -webkit-transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); 925 | transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); } 926 | to { 927 | -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); 928 | transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } } 929 | .flipOutX { 930 | -webkit-animation-name: flipOutX; 931 | animation-name: flipOutX; } 932 | 933 | @keyframes flipOutX { 934 | from { 935 | -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); 936 | transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } 937 | 60% { 938 | opacity: 1; 939 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 940 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 941 | -webkit-transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); 942 | transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); } 943 | to { 944 | opacity: 0; 945 | -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); 946 | transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } } 947 | .flipOutY { 948 | -webkit-animation-name: flipOutY; 949 | animation-name: flipOutY; } 950 | 951 | @keyframes flipOutY { 952 | from { 953 | -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); 954 | transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } 955 | 60% { 956 | opacity: 1; 957 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 958 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 959 | -webkit-transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); 960 | transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); } 961 | to { 962 | opacity: 0; 963 | -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); 964 | transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } } 965 | .fadeIn { 966 | -webkit-animation-name: fadeIn; 967 | animation-name: fadeIn; 968 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 969 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 970 | 971 | @keyframes fadeIn { 972 | 0% { 973 | opacity: 0; } 974 | 100% { 975 | opacity: 1; } } 976 | .fadeInRight { 977 | -webkit-animation-name: fadeInRight; 978 | animation-name: fadeInRight; 979 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 980 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 981 | 982 | @keyframes fadeInRight { 983 | 0% { 984 | -webkit-transform: translate3d(400px, 0, 0); 985 | transform: translate3d(400px, 0, 0); 986 | opacity: 0; } 987 | 100% { 988 | -webkit-transform: translate3d(0, 0, 0); 989 | transform: translate3d(0, 0, 0); 990 | opacity: 1; } } 991 | .fadeInLeft { 992 | -webkit-animation-name: fadeInLeft; 993 | animation-name: fadeInLeft; 994 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 995 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 996 | 997 | @keyframes fadeInLeft { 998 | 0% { 999 | -webkit-transform: translate3d(-400px, 0, 0); 1000 | transform: translate3d(-400px, 0, 0); 1001 | opacity: 0; } 1002 | 100% { 1003 | -webkit-transform: translate3d(0, 0, 0); 1004 | transform: translate3d(0, 0, 0); 1005 | opacity: 1; } } 1006 | .fadeInTop { 1007 | -webkit-animation-name: fadeInTop; 1008 | animation-name: fadeInTop; 1009 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1010 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 1011 | 1012 | @keyframes fadeInTop { 1013 | 0% { 1014 | -webkit-transform: translate3d(0, -400px, 0); 1015 | transform: translate3d(0, -400px, 0); 1016 | opacity: 0; } 1017 | 50% { 1018 | opacity: 0.2; } 1019 | 100% { 1020 | -webkit-transform: translate3d(0, 0, 0); 1021 | transform: translate3d(0, 0, 0); 1022 | opacity: 1; } } 1023 | .fadeInBottom { 1024 | -webkit-animation-name: fadeInBottom; 1025 | animation-name: fadeInBottom; 1026 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1027 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 1028 | 1029 | @keyframes fadeInBottom { 1030 | 0% { 1031 | -webkit-transform: translate3d(0, 400px, 0); 1032 | transform: translate3d(0, 400px, 0); 1033 | opacity: 0; } 1034 | 50% { 1035 | opacity: 0.2; } 1036 | 100% { 1037 | -webkit-transform: translate3d(0, 0, 0); 1038 | transform: translate3d(0, 0, 0); 1039 | opacity: 1; } } 1040 | .fadeOut { 1041 | -webkit-animation-name: fadeOut; 1042 | animation-name: fadeOut; 1043 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1044 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 1045 | 1046 | @keyframes fadeOut { 1047 | 0% { 1048 | opacity: 1; } 1049 | 100% { 1050 | opacity: 0; } } 1051 | .fadeOutLeft { 1052 | -webkit-animation-name: fadeOutLeft; 1053 | animation-name: fadeOutLeft; 1054 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1055 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 1056 | 1057 | @keyframes fadeOutLeft { 1058 | 0% { 1059 | -webkit-transform: translate3d(0, 0, 0); 1060 | transform: translate3d(0, 0, 0); 1061 | opacity: 1; } 1062 | 100% { 1063 | -webkit-transform: translate3d(-400px, 0, 0); 1064 | transform: translate3d(-400px, 0, 0); 1065 | opacity: 0; } } 1066 | .fadeOutRight { 1067 | -webkit-animation-name: fadeOutRight; 1068 | animation-name: fadeOutRight; 1069 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1070 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 1071 | 1072 | @keyframes fadeOutRight { 1073 | 0% { 1074 | -webkit-transform: translate3d(0, 0, 0); 1075 | transform: translate3d(0, 0, 0); 1076 | opacity: 1; } 1077 | 100% { 1078 | -webkit-transform: translate3d(400px, 0, 0); 1079 | transform: translate3d(400px, 0, 0); 1080 | opacity: 0; } } 1081 | .fadeOutTop { 1082 | -webkit-animation-name: fadeOutTop; 1083 | animation-name: fadeOutTop; 1084 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1085 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 1086 | 1087 | @keyframes fadeOutTop { 1088 | 0% { 1089 | -webkit-transform: translate3d(0, 0, 0); 1090 | transform: translate3d(0, 0, 0); 1091 | opacity: 1; } 1092 | 40% { 1093 | opacity: 0.2; } 1094 | 100% { 1095 | -webkit-transform: translate3d(0, -300px, 0); 1096 | transform: translate3d(0, -300px, 0); 1097 | opacity: 0; } } 1098 | .fadeOutBottom { 1099 | -webkit-animation-name: fadeOutBottom; 1100 | animation-name: fadeOutBottom; 1101 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1102 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } 1103 | 1104 | @keyframes fadeOutBottom { 1105 | 0% { 1106 | -webkit-transform: translate3d(0, 0, 0); 1107 | transform: translate3d(0, 0, 0); 1108 | opacity: 1; } 1109 | 40% { 1110 | opacity: 0.2; } 1111 | 100% { 1112 | -webkit-transform: translate3d(0, 300px, 0); 1113 | transform: translate3d(0, 300px, 0); 1114 | opacity: 0; } } 1115 | .driveInLeft { 1116 | -webkit-animation-name: driveInLeft; 1117 | animation-name: driveInLeft; 1118 | -webkit-animation-duration: 1s; 1119 | animation-duration: 1s; } 1120 | 1121 | @keyframes driveInLeft { 1122 | 0% { 1123 | opacity: 0; 1124 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1125 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1126 | -webkit-transform: translate3d(-400px, 0, 0); 1127 | transform: translate3d(-400px, 0, 0); } 1128 | 30% { 1129 | opacity: 1; } 1130 | 60% { 1131 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1132 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1133 | -webkit-transform: translate3d(30px, 0, 0); 1134 | transform: translate3d(30px, 0, 0); } 1135 | 100% { 1136 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1137 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1138 | -webkit-transform: translate3d(0, 0, 0); 1139 | transform: translate3d(0, 0, 0); } } 1140 | .driveInRight { 1141 | -webkit-animation-name: driveInRight; 1142 | animation-name: driveInRight; 1143 | -webkit-animation-duration: 1s; 1144 | animation-duration: 1s; } 1145 | 1146 | @keyframes driveInRight { 1147 | 0% { 1148 | opacity: 0; 1149 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1150 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1151 | -webkit-transform: translate3d(400px, 0, 0); 1152 | transform: translate3d(400px, 0, 0); } 1153 | 30% { 1154 | opacity: 1; } 1155 | 60% { 1156 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1157 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1158 | -webkit-transform: translate3d(-30px, 0, 0); 1159 | transform: translate3d(-30px, 0, 0); } 1160 | 100% { 1161 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1162 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1163 | -webkit-transform: translate3d(0, 0, 0); 1164 | transform: translate3d(0, 0, 0); } } 1165 | .driveInTop { 1166 | -webkit-animation-name: driveInTop; 1167 | animation-name: driveInTop; 1168 | -webkit-animation-duration: 1s; 1169 | animation-duration: 1s; } 1170 | 1171 | @keyframes driveInTop { 1172 | 0% { 1173 | opacity: 0; 1174 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1175 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1176 | -webkit-transform: translate3d(0, -400px, 0); 1177 | transform: translate3d(0, -400px, 0); } 1178 | 30% { 1179 | opacity: 1; } 1180 | 60% { 1181 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1182 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1183 | -webkit-transform: translate3d(0, 30px, 0); 1184 | transform: translate3d(0, 30px, 0); } 1185 | 100% { 1186 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1187 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1188 | -webkit-transform: translate3d(0, 0, 0); 1189 | transform: translate3d(0, 0, 0); } } 1190 | .driveInBottom { 1191 | -webkit-animation-name: driveInBottom; 1192 | animation-name: driveInBottom; 1193 | -webkit-animation-duration: 1s; 1194 | animation-duration: 1s; } 1195 | 1196 | @keyframes driveInBottom { 1197 | 0% { 1198 | opacity: 0; 1199 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1200 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1201 | -webkit-transform: translate3d(0, 300px, 0); 1202 | transform: translate3d(0, 300px, 0); } 1203 | 30% { 1204 | opacity: 1; } 1205 | 60% { 1206 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1207 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1208 | -webkit-transform: translate3d(0, -30px, 0); 1209 | transform: translate3d(0, -30px, 0); } 1210 | 100% { 1211 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1212 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); 1213 | -webkit-transform: translate3d(0, 0, 0); 1214 | transform: translate3d(0, 0, 0); } } 1215 | .driveOutLeft { 1216 | -webkit-animation-name: driveOutLeft; 1217 | animation-name: driveOutLeft; 1218 | -webkit-animation-duration: 1s; 1219 | animation-duration: 1s; } 1220 | 1221 | @keyframes driveOutLeft { 1222 | 0% { 1223 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1224 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1225 | -webkit-transform: translate3d(0, 0, 0); 1226 | transform: translate3d(0, 0, 0); } 1227 | 30% { 1228 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1229 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1230 | -webkit-transform: translate3d(30px, 0, 0); 1231 | transform: translate3d(30px, 0, 0); } 1232 | 60% { 1233 | opacity: 1; } 1234 | 100% { 1235 | opacity: 0; 1236 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1237 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1238 | -webkit-transform: translate3d(-400px, 0, 0); 1239 | transform: translate3d(-400px, 0, 0); } } 1240 | .driveOutRight { 1241 | -webkit-animation-name: driveOutRight; 1242 | animation-name: driveOutRight; 1243 | -webkit-animation-duration: 1s; 1244 | animation-duration: 1s; } 1245 | 1246 | @keyframes driveOutRight { 1247 | 0% { 1248 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1249 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1250 | -webkit-transform: translate3d(0, 0, 0); 1251 | transform: translate3d(0, 0, 0); } 1252 | 30% { 1253 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1254 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1255 | -webkit-transform: translate3d(-30px, 0, 0); 1256 | transform: translate3d(-30px, 0, 0); } 1257 | 60% { 1258 | opacity: 1; } 1259 | 100% { 1260 | opacity: 0; 1261 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1262 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1263 | -webkit-transform: translate3d(400px, 0, 0); 1264 | transform: translate3d(400px, 0, 0); } } 1265 | .driveOutTop { 1266 | -webkit-animation-name: driveOutTop; 1267 | animation-name: driveOutTop; 1268 | -webkit-animation-duration: 1s; 1269 | animation-duration: 1s; } 1270 | 1271 | @keyframes driveOutTop { 1272 | 0% { 1273 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1274 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1275 | -webkit-transform: translate3d(0, 0, 0); 1276 | transform: translate3d(0, 0, 0); } 1277 | 30% { 1278 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1279 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1280 | -webkit-transform: translate3d(0, 30px, 0); 1281 | transform: translate3d(0, 30px, 0); } 1282 | 60% { 1283 | opacity: 1; } 1284 | 100% { 1285 | opacity: 0; 1286 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1287 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1288 | -webkit-transform: translate3d(0, -400px, 0); 1289 | transform: translate3d(0, -400px, 0); } } 1290 | .driveOutBottom { 1291 | -webkit-animation-name: driveOutBottom; 1292 | animation-name: driveOutBottom; 1293 | -webkit-animation-duration: 1s; 1294 | animation-duration: 1s; } 1295 | 1296 | @keyframes driveOutBottom { 1297 | 0% { 1298 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1299 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1300 | -webkit-transform: translate3d(0, 0, 0); 1301 | transform: translate3d(0, 0, 0); } 1302 | 30% { 1303 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1304 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1305 | -webkit-transform: translate3d(0, -30px, 0); 1306 | transform: translate3d(0, -30px, 0); } 1307 | 60% { 1308 | opacity: 1; } 1309 | 100% { 1310 | opacity: 0; 1311 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1312 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1313 | -webkit-transform: translate3d(0, 300px, 0); 1314 | transform: translate3d(0, 300px, 0); } } 1315 | .spin { 1316 | -webkit-animation-name: spin; 1317 | animation-name: spin; 1318 | -webkit-animation-duration: 1.2s; 1319 | animation-duration: 1.2s; } 1320 | 1321 | @keyframes spin { 1322 | 0% { 1323 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1324 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1325 | -webkit-transform: rotateZ(0deg); 1326 | transform: rotateZ(0deg); 1327 | -webkit-transform-origin: center center; 1328 | transform-origin: center center; } 1329 | 20% { 1330 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1331 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1332 | -webkit-transform: rotateZ(-20deg); 1333 | transform: rotateZ(-20deg); 1334 | -webkit-transform-origin: center center; 1335 | transform-origin: center center; } 1336 | 70% { 1337 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1338 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1339 | -webkit-transform: rotateZ(380deg); 1340 | transform: rotateZ(380deg); 1341 | -webkit-transform-origin: center center; 1342 | transform-origin: center center; } 1343 | 100% { 1344 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 1345 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 1346 | -webkit-transform: rotateZ(360deg); 1347 | transform: rotateZ(360deg); 1348 | -webkit-transform-origin: center center; 1349 | transform-origin: center center; } } 1350 | .spinIn { 1351 | -webkit-animation-name: spinIn; 1352 | animation-name: spinIn; 1353 | -webkit-animation-duration: 1s; 1354 | animation-duration: 1s; } 1355 | 1356 | @keyframes spinIn { 1357 | 0% { 1358 | opacity: 0; 1359 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1360 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1361 | -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0); 1362 | transform: rotateZ(0deg) scale3d(0, 0, 0); 1363 | -webkit-transform-origin: center center; 1364 | transform-origin: center center; } 1365 | 50% { 1366 | opacity: 1; } 1367 | 70% { 1368 | -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1); 1369 | transform: rotateZ(380deg) scale3d(1, 1, 1); 1370 | -webkit-transform-origin: center center; 1371 | transform-origin: center center; } 1372 | 100% { 1373 | -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1); 1374 | transform: rotateZ(360deg) scale3d(1, 1, 1); 1375 | -webkit-transform-origin: center center; 1376 | transform-origin: center center; } } 1377 | .spinOut { 1378 | -webkit-animation-name: spinOut; 1379 | animation-name: spinOut; 1380 | -webkit-animation-duration: 1s; 1381 | animation-duration: 1s; } 1382 | 1383 | @keyframes spinOut { 1384 | 0% { 1385 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1386 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1387 | -webkit-transform: rotateZ(0deg) scale3d(1, 1, 1); 1388 | transform: rotateZ(0deg) scale3d(1, 1, 1); 1389 | -webkit-transform-origin: center center; 1390 | transform-origin: center center; } 1391 | 20% { 1392 | opacity: 1; 1393 | -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1394 | animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 1395 | -webkit-transform: rotateZ(-20deg) scale3d(1, 1, 1); 1396 | transform: rotateZ(-20deg) scale3d(1, 1, 1); 1397 | -webkit-transform-origin: center center; 1398 | transform-origin: center center; } 1399 | 30% { 1400 | opacity: 1; } 1401 | 100% { 1402 | opacity: 0; 1403 | -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 1404 | animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); 1405 | -webkit-transform: rotateZ(360deg) scale3d(0, 0, 0); 1406 | transform: rotateZ(360deg) scale3d(0, 0, 0); 1407 | -webkit-transform-origin: center center; 1408 | transform-origin: center center; } } 1409 | .swoopInLeft { 1410 | -webkit-animation-name: swoopInLeft; 1411 | animation-name: swoopInLeft; 1412 | -webkit-animation-duration: 0.5s; 1413 | animation-duration: 0.5s; } 1414 | 1415 | @keyframes swoopInLeft { 1416 | 0% { 1417 | opacity: 0; 1418 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1419 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1420 | -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); 1421 | transform: scaleX(1.5) translate3d(-400px, 0, 0); } 1422 | 40% { 1423 | opacity: 1; 1424 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1425 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1426 | -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); 1427 | transform: scaleX(1.2) translate3d(0, 0, 0); } 1428 | 65% { 1429 | -webkit-transform: scaleX(1) translate3d(20px, 0, 0); 1430 | transform: scaleX(1) translate3d(20px, 0, 0); } 1431 | 100% { 1432 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1433 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1434 | -webkit-transform: scaleX(1) translate3d(0, 0, 0); 1435 | transform: scaleX(1) translate3d(0, 0, 0); } } 1436 | .swoopInRight { 1437 | -webkit-animation-name: swoopInRight; 1438 | animation-name: swoopInRight; 1439 | -webkit-animation-duration: 0.5s; 1440 | animation-duration: 0.5s; } 1441 | 1442 | @keyframes swoopInRight { 1443 | 0% { 1444 | opacity: 0; 1445 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1446 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1447 | -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); 1448 | transform: scaleX(1.5) translate3d(400px, 0, 0); } 1449 | 40% { 1450 | opacity: 1; 1451 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1452 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1453 | -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); 1454 | transform: scaleX(1.2) translate3d(0, 0, 0); } 1455 | 65% { 1456 | -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); 1457 | transform: scaleX(1) translate3d(-20px, 0, 0); } 1458 | 100% { 1459 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1460 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1461 | -webkit-transform: scaleX(1) translate3d(0, 0, 0); 1462 | transform: scaleX(1) translate3d(0, 0, 0); } } 1463 | .swoopInTop { 1464 | -webkit-animation-name: swoopInTop; 1465 | animation-name: swoopInTop; 1466 | -webkit-animation-duration: 0.5s; 1467 | animation-duration: 0.5s; } 1468 | 1469 | @keyframes swoopInTop { 1470 | 0% { 1471 | opacity: 0; 1472 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1473 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1474 | -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); 1475 | transform: scaleY(1.5) translate3d(0, -400px, 0); } 1476 | 40% { 1477 | opacity: 1; 1478 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1479 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1480 | -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); 1481 | transform: scaleY(1.2) translate3d(0, 0, 0); } 1482 | 65% { 1483 | -webkit-transform: scaleY(1) translate3d(0, 20px, 0); 1484 | transform: scaleY(1) translate3d(0, 20px, 0); } 1485 | 100% { 1486 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1487 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1488 | -webkit-transform: scaleY(1) translate3d(0, 0, 0); 1489 | transform: scaleY(1) translate3d(0, 0, 0); } } 1490 | .swoopInBottom { 1491 | -webkit-animation-name: swoopInBottom; 1492 | animation-name: swoopInBottom; 1493 | -webkit-animation-duration: 0.5s; 1494 | animation-duration: 0.5s; } 1495 | 1496 | @keyframes swoopInBottom { 1497 | 0% { 1498 | opacity: 0; 1499 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1500 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1501 | -webkit-transform: scaleY(1.5) translate3d(0, 250px, 0); 1502 | transform: scaleY(1.5) translate3d(0, 250px, 0); } 1503 | 40% { 1504 | opacity: 1; 1505 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1506 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1507 | -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); 1508 | transform: scaleY(1.2) translate3d(0, 0, 0); } 1509 | 65% { 1510 | -webkit-transform: scaleY(1) translate3d(0, -20px, 0); 1511 | transform: scaleY(1) translate3d(0, -20px, 0); } 1512 | 100% { 1513 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1514 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1515 | -webkit-transform: scaleY(1) translate3d(0, 0, 0); 1516 | transform: scaleY(1) translate3d(0, 0, 0); } } 1517 | .swoopOutLeft { 1518 | -webkit-animation-name: swoopOutLeft; 1519 | animation-name: swoopOutLeft; 1520 | -webkit-animation-duration: 0.5s; 1521 | animation-duration: 0.5s; } 1522 | 1523 | @keyframes swoopOutLeft { 1524 | 0% { 1525 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1526 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1527 | -webkit-transform: scaleX(1) translate3d(0, 0, 0); 1528 | transform: scaleX(1) translate3d(0, 0, 0); } 1529 | 40% { 1530 | opacity: 1; 1531 | -webkit-transform: scaleX(1) translate3d(20px, 0, 0); 1532 | transform: scaleX(1) translate3d(20px, 0, 0); } 1533 | 60% { 1534 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1535 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1536 | -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); 1537 | transform: scaleX(1.2) translate3d(0, 0, 0); } 1538 | 100% { 1539 | opacity: 0; 1540 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1541 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1542 | -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); 1543 | transform: scaleX(1.5) translate3d(-400px, 0, 0); } } 1544 | .swoopOutRight { 1545 | -webkit-animation-name: swoopOutRight; 1546 | animation-name: swoopOutRight; 1547 | -webkit-animation-duration: 0.5s; 1548 | animation-duration: 0.5s; } 1549 | 1550 | @keyframes swoopOutRight { 1551 | 0% { 1552 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1553 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1554 | -webkit-transform: scaleX(1) translate3d(0, 0, 0); 1555 | transform: scaleX(1) translate3d(0, 0, 0); } 1556 | 40% { 1557 | opacity: 1; 1558 | -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); 1559 | transform: scaleX(1) translate3d(-20px, 0, 0); } 1560 | 60% { 1561 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1562 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1563 | -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); 1564 | transform: scaleX(1.2) translate3d(0, 0, 0); } 1565 | 100% { 1566 | opacity: 0; 1567 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1568 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1569 | -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); 1570 | transform: scaleX(1.5) translate3d(400px, 0, 0); } } 1571 | .swoopOutTop { 1572 | -webkit-animation-name: swoopOutTop; 1573 | animation-name: swoopOutTop; 1574 | -webkit-animation-duration: 0.5s; 1575 | animation-duration: 0.5s; } 1576 | 1577 | @keyframes swoopOutTop { 1578 | 0% { 1579 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1580 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1581 | -webkit-transform: scaleY(1) translate3d(0, 0, 0); 1582 | transform: scaleY(1) translate3d(0, 0, 0); } 1583 | 40% { 1584 | opacity: 1; 1585 | -webkit-transform: scaleY(1) translate3d(0, 20px, 0); 1586 | transform: scaleY(1) translate3d(0, 20px, 0); } 1587 | 60% { 1588 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1589 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1590 | -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); 1591 | transform: scaleY(1.2) translate3d(0, 0, 0); } 1592 | 100% { 1593 | opacity: 0; 1594 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1595 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1596 | -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); 1597 | transform: scaleY(1.5) translate3d(0, -400px, 0); } } 1598 | .swoopOutBottom { 1599 | -webkit-animation-name: swoopOutBottom; 1600 | animation-name: swoopOutBottom; 1601 | -webkit-animation-duration: 0.5s; 1602 | animation-duration: 0.5s; } 1603 | 1604 | @keyframes swoopOutBottom { 1605 | 0% { 1606 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1607 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1608 | -webkit-transform: scaleY(1) translate3d(0, 0, 0); 1609 | transform: scaleY(1) translate3d(0, 0, 0); } 1610 | 40% { 1611 | opacity: 1; 1612 | -webkit-transform: scaleY(1) translate3d(0, -20px, 0); 1613 | transform: scaleY(1) translate3d(0, -20px, 0); } 1614 | 60% { 1615 | -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1616 | animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 1617 | -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); 1618 | transform: scaleY(1.2) translate3d(0, 0, 0); } 1619 | 100% { 1620 | opacity: 0; 1621 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1622 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 1623 | -webkit-transform: scaleY(1.5) translate3d(0, 200px, 0); 1624 | transform: scaleY(1.5) translate3d(0, 200px, 0); } } 1625 | .fold { 1626 | -webkit-animation-name: fold; 1627 | animation-name: fold; } 1628 | 1629 | @keyframes fold { 1630 | 0% { 1631 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 1632 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 1633 | -webkit-transform: scale3d(1, 1, 1); 1634 | transform: scale3d(1, 1, 1); } 1635 | 30% { 1636 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1637 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1638 | -webkit-transform: scale3d(1, 0.4, 1); 1639 | transform: scale3d(1, 0.4, 1); } 1640 | 60% { 1641 | opacity: 1; 1642 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1643 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1644 | -webkit-transform: scale3d(0.4, 0.4, 1); 1645 | transform: scale3d(0.4, 0.4, 1); } 1646 | 100% { 1647 | opacity: 0; 1648 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); 1649 | animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); 1650 | -webkit-transform: scale3d(0.2, 0.2, 0.2); 1651 | transform: scale3d(0.2, 0.2, 0.2); } } 1652 | .unfold { 1653 | -webkit-animation-name: unfold; 1654 | animation-name: unfold; } 1655 | 1656 | @keyframes unfold { 1657 | 0% { 1658 | opacity: 0; 1659 | -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 1660 | animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 1661 | -webkit-transform: scale3d(0, 0, 0); 1662 | transform: scale3d(0, 0, 0); } 1663 | 30% { 1664 | opacity: 1; 1665 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1666 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1667 | -webkit-transform: scale3d(0.4, 0.4, 1); 1668 | transform: scale3d(0.4, 0.4, 1); } 1669 | 60% { 1670 | -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1671 | animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 1672 | -webkit-transform: scale3d(0.4, 1, 1); 1673 | transform: scale3d(0.4, 1, 1); } 1674 | 100% { 1675 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); 1676 | animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); 1677 | -webkit-transform: scale3d(1, 1, 1); 1678 | transform: scale3d(1, 1, 1); } } 1679 | .delay-100 { 1680 | -webkit-animation-delay: .1s; 1681 | animation-delay: .1s; } 1682 | 1683 | .delay-150 { 1684 | -webkit-animation-delay: 150ms; 1685 | animation-delay: 150ms; } 1686 | 1687 | .duration-100 { 1688 | -webkit-animation-duration: .1s; 1689 | animation-duration: .1s; } 1690 | 1691 | .duration-150 { 1692 | -webkit-animation-duration: 150ms; 1693 | animation-duration: 150ms; } 1694 | 1695 | .delay-200 { 1696 | -webkit-animation-delay: .2s; 1697 | animation-delay: .2s; } 1698 | 1699 | .delay-250 { 1700 | -webkit-animation-delay: 250ms; 1701 | animation-delay: 250ms; } 1702 | 1703 | .duration-200 { 1704 | -webkit-animation-duration: .2s; 1705 | animation-duration: .2s; } 1706 | 1707 | .duration-250 { 1708 | -webkit-animation-duration: 250ms; 1709 | animation-duration: 250ms; } 1710 | 1711 | .delay-300 { 1712 | -webkit-animation-delay: .3s; 1713 | animation-delay: .3s; } 1714 | 1715 | .delay-350 { 1716 | -webkit-animation-delay: 350ms; 1717 | animation-delay: 350ms; } 1718 | 1719 | .duration-300 { 1720 | -webkit-animation-duration: .3s; 1721 | animation-duration: .3s; } 1722 | 1723 | .duration-350 { 1724 | -webkit-animation-duration: 350ms; 1725 | animation-duration: 350ms; } 1726 | 1727 | .delay-400 { 1728 | -webkit-animation-delay: .4s; 1729 | animation-delay: .4s; } 1730 | 1731 | .delay-450 { 1732 | -webkit-animation-delay: 450ms; 1733 | animation-delay: 450ms; } 1734 | 1735 | .duration-400 { 1736 | -webkit-animation-duration: .4s; 1737 | animation-duration: .4s; } 1738 | 1739 | .duration-450 { 1740 | -webkit-animation-duration: 450ms; 1741 | animation-duration: 450ms; } 1742 | 1743 | .delay-500 { 1744 | -webkit-animation-delay: .5s; 1745 | animation-delay: .5s; } 1746 | 1747 | .delay-550 { 1748 | -webkit-animation-delay: 550ms; 1749 | animation-delay: 550ms; } 1750 | 1751 | .duration-500 { 1752 | -webkit-animation-duration: .5s; 1753 | animation-duration: .5s; } 1754 | 1755 | .duration-550 { 1756 | -webkit-animation-duration: 550ms; 1757 | animation-duration: 550ms; } 1758 | 1759 | .delay-600 { 1760 | -webkit-animation-delay: .6s; 1761 | animation-delay: .6s; } 1762 | 1763 | .delay-650 { 1764 | -webkit-animation-delay: 650ms; 1765 | animation-delay: 650ms; } 1766 | 1767 | .duration-600 { 1768 | -webkit-animation-duration: .6s; 1769 | animation-duration: .6s; } 1770 | 1771 | .duration-650 { 1772 | -webkit-animation-duration: 650ms; 1773 | animation-duration: 650ms; } 1774 | 1775 | .delay-700 { 1776 | -webkit-animation-delay: .7s; 1777 | animation-delay: .7s; } 1778 | 1779 | .delay-750 { 1780 | -webkit-animation-delay: 750ms; 1781 | animation-delay: 750ms; } 1782 | 1783 | .duration-700 { 1784 | -webkit-animation-duration: .7s; 1785 | animation-duration: .7s; } 1786 | 1787 | .duration-750 { 1788 | -webkit-animation-duration: 750ms; 1789 | animation-duration: 750ms; } 1790 | 1791 | .delay-800 { 1792 | -webkit-animation-delay: .8s; 1793 | animation-delay: .8s; } 1794 | 1795 | .delay-850 { 1796 | -webkit-animation-delay: 850ms; 1797 | animation-delay: 850ms; } 1798 | 1799 | .duration-800 { 1800 | -webkit-animation-duration: .8s; 1801 | animation-duration: .8s; } 1802 | 1803 | .duration-850 { 1804 | -webkit-animation-duration: 850ms; 1805 | animation-duration: 850ms; } 1806 | 1807 | .delay-900 { 1808 | -webkit-animation-delay: .9s; 1809 | animation-delay: .9s; } 1810 | 1811 | .delay-950 { 1812 | -webkit-animation-delay: 950ms; 1813 | animation-delay: 950ms; } 1814 | 1815 | .duration-900 { 1816 | -webkit-animation-duration: .9s; 1817 | animation-duration: .9s; } 1818 | 1819 | .duration-950 { 1820 | -webkit-animation-duration: 950ms; 1821 | animation-duration: 950ms; } 1822 | 1823 | .delay-1000 { 1824 | -webkit-animation-delay: 1s; 1825 | animation-delay: 1s; } 1826 | 1827 | .delay-1250 { 1828 | -webkit-animation-delay: 1250ms; 1829 | animation-delay: 1250ms; } 1830 | 1831 | .delay-1500 { 1832 | -webkit-animation-delay: 1.5s; 1833 | animation-delay: 1.5s; } 1834 | 1835 | .delay-1750 { 1836 | -webkit-animation-delay: 1750ms; 1837 | animation-delay: 1750ms; } 1838 | 1839 | .duration-1000 { 1840 | -webkit-animation-duration: 1s; 1841 | animation-duration: 1s; } 1842 | 1843 | .duration-1250 { 1844 | -webkit-animation-duration: 1250ms; 1845 | animation-duration: 1250ms; } 1846 | 1847 | .duration-1500 { 1848 | -webkit-animation-duration: 1.5s; 1849 | animation-duration: 1.5s; } 1850 | 1851 | .duration-1750 { 1852 | -webkit-animation-duration: 1750ms; 1853 | animation-duration: 1750ms; } 1854 | 1855 | .delay-2000 { 1856 | -webkit-animation-delay: 2s; 1857 | animation-delay: 2s; } 1858 | 1859 | .delay-2250 { 1860 | -webkit-animation-delay: 2250ms; 1861 | animation-delay: 2250ms; } 1862 | 1863 | .delay-2500 { 1864 | -webkit-animation-delay: 2.5s; 1865 | animation-delay: 2.5s; } 1866 | 1867 | .delay-2750 { 1868 | -webkit-animation-delay: 2750ms; 1869 | animation-delay: 2750ms; } 1870 | 1871 | .duration-2000 { 1872 | -webkit-animation-duration: 2s; 1873 | animation-duration: 2s; } 1874 | 1875 | .duration-2250 { 1876 | -webkit-animation-duration: 2250ms; 1877 | animation-duration: 2250ms; } 1878 | 1879 | .duration-2500 { 1880 | -webkit-animation-duration: 2.5s; 1881 | animation-duration: 2.5s; } 1882 | 1883 | .duration-2750 { 1884 | -webkit-animation-duration: 2750ms; 1885 | animation-duration: 2750ms; } 1886 | 1887 | .delay-3000 { 1888 | -webkit-animation-delay: 3s; 1889 | animation-delay: 3s; } 1890 | 1891 | .delay-3250 { 1892 | -webkit-animation-delay: 3250ms; 1893 | animation-delay: 3250ms; } 1894 | 1895 | .delay-3500 { 1896 | -webkit-animation-delay: 3.5s; 1897 | animation-delay: 3.5s; } 1898 | 1899 | .delay-3750 { 1900 | -webkit-animation-delay: 3750ms; 1901 | animation-delay: 3750ms; } 1902 | 1903 | .duration-3000 { 1904 | -webkit-animation-duration: 3s; 1905 | animation-duration: 3s; } 1906 | 1907 | .duration-3250 { 1908 | -webkit-animation-duration: 3250ms; 1909 | animation-duration: 3250ms; } 1910 | 1911 | .duration-3500 { 1912 | -webkit-animation-duration: 3.5s; 1913 | animation-duration: 3.5s; } 1914 | 1915 | .duration-3750 { 1916 | -webkit-animation-duration: 3750ms; 1917 | animation-duration: 3750ms; } 1918 | 1919 | .delay-4000 { 1920 | -webkit-animation-delay: 4s; 1921 | animation-delay: 4s; } 1922 | 1923 | .delay-4250 { 1924 | -webkit-animation-delay: 4250ms; 1925 | animation-delay: 4250ms; } 1926 | 1927 | .delay-4500 { 1928 | -webkit-animation-delay: 4.5s; 1929 | animation-delay: 4.5s; } 1930 | 1931 | .delay-4750 { 1932 | -webkit-animation-delay: 4750ms; 1933 | animation-delay: 4750ms; } 1934 | 1935 | .duration-4000 { 1936 | -webkit-animation-duration: 4s; 1937 | animation-duration: 4s; } 1938 | 1939 | .duration-4250 { 1940 | -webkit-animation-duration: 4250ms; 1941 | animation-duration: 4250ms; } 1942 | 1943 | .duration-4500 { 1944 | -webkit-animation-duration: 4.5s; 1945 | animation-duration: 4.5s; } 1946 | 1947 | .duration-4750 { 1948 | -webkit-animation-duration: 4750ms; 1949 | animation-duration: 4750ms; } 1950 | 1951 | .delay-5000 { 1952 | -webkit-animation-delay: 5s; 1953 | animation-delay: 5s; } 1954 | 1955 | .delay-5250 { 1956 | -webkit-animation-delay: 5250ms; 1957 | animation-delay: 5250ms; } 1958 | 1959 | .delay-5500 { 1960 | -webkit-animation-delay: 5.5s; 1961 | animation-delay: 5.5s; } 1962 | 1963 | .delay-5750 { 1964 | -webkit-animation-delay: 5750ms; 1965 | animation-delay: 5750ms; } 1966 | 1967 | .duration-5000 { 1968 | -webkit-animation-duration: 5s; 1969 | animation-duration: 5s; } 1970 | 1971 | .duration-5250 { 1972 | -webkit-animation-duration: 5250ms; 1973 | animation-duration: 5250ms; } 1974 | 1975 | .duration-5500 { 1976 | -webkit-animation-duration: 5.5s; 1977 | animation-duration: 5.5s; } 1978 | 1979 | .duration-5750 { 1980 | -webkit-animation-duration: 5750ms; 1981 | animation-duration: 5750ms; } 1982 | 1983 | .duration-6000 { 1984 | -webkit-animation-duration: 6s; 1985 | animation-duration: 6s; } 1986 | 1987 | .duration-6250 { 1988 | -webkit-animation-duration: 6250ms; 1989 | animation-duration: 6250ms; } 1990 | 1991 | .duration-6500 { 1992 | -webkit-animation-duration: 6.5s; 1993 | animation-duration: 6.5s; } 1994 | 1995 | .duration-6750 { 1996 | -webkit-animation-duration: 6750ms; 1997 | animation-duration: 6750ms; } 1998 | 1999 | .duration-7000 { 2000 | -webkit-animation-duration: 7s; 2001 | animation-duration: 7s; } 2002 | 2003 | .duration-7250 { 2004 | -webkit-animation-duration: 7250ms; 2005 | animation-duration: 7250ms; } 2006 | 2007 | .duration-7500 { 2008 | -webkit-animation-duration: 7.5s; 2009 | animation-duration: 7.5s; } 2010 | 2011 | .duration-7750 { 2012 | -webkit-animation-duration: 7750ms; 2013 | animation-duration: 7750ms; } 2014 | 2015 | .duration-8000 { 2016 | -webkit-animation-duration: 8s; 2017 | animation-duration: 8s; } 2018 | 2019 | .duration-8250 { 2020 | -webkit-animation-duration: 8250ms; 2021 | animation-duration: 8250ms; } 2022 | 2023 | .duration-8500 { 2024 | -webkit-animation-duration: 8.5s; 2025 | animation-duration: 8.5s; } 2026 | 2027 | .duration-8750 { 2028 | -webkit-animation-duration: 8750ms; 2029 | animation-duration: 8750ms; } 2030 | 2031 | .duration-9000 { 2032 | -webkit-animation-duration: 9s; 2033 | animation-duration: 9s; } 2034 | 2035 | .duration-9250 { 2036 | -webkit-animation-duration: 9250ms; 2037 | animation-duration: 9250ms; } 2038 | 2039 | .duration-9500 { 2040 | -webkit-animation-duration: 9.5s; 2041 | animation-duration: 9.5s; } 2042 | 2043 | .duration-9750 { 2044 | -webkit-animation-duration: 9750ms; 2045 | animation-duration: 9750ms; } 2046 | 2047 | .duration-10000 { 2048 | -webkit-animation-duration: 10s; 2049 | animation-duration: 10s; } 2050 | 2051 | .duration-10250 { 2052 | -webkit-animation-duration: 10250ms; 2053 | animation-duration: 10250ms; } 2054 | 2055 | .duration-10500 { 2056 | -webkit-animation-duration: 10.5s; 2057 | animation-duration: 10.5s; } 2058 | 2059 | .duration-10750 { 2060 | -webkit-animation-duration: 10750ms; 2061 | animation-duration: 10750ms; } 2062 | 2063 | /*# sourceMappingURL=vivify.css.map */ 2064 | -------------------------------------------------------------------------------- /vivify.min.css: -------------------------------------------------------------------------------- 1 | .vivify{-webkit-animation-duration:.8s;-webkit-animation-fill-mode:both;animation-duration:.8s;animation-fill-mode:both}.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.pulsate{-webkit-animation-name:pulsate;animation-name:pulsate;-webkit-transform-origin:center;transform-origin:center}@keyframes pulsate{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(0.8,0.8,0.8);transform:scale3d(0.8,0.8,0.8)}100%{-webkit-animation-timing-function:cubic-bezier(0.895,0.03,0.685,0.22);animation-timing-function:cubic-bezier(0.895,0.03,0.685,0.22);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.blink{-webkit-animation-name:blink;animation-name:blink;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-animation-duration:1s;animation-duration:1s}@keyframes blink{0%{opacity:1}25%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:1}}.hitLeft{-webkit-animation-name:hitLeft;animation-name:hitLeft;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes hitLeft{0%{-webkit-animation-timing-function:cubic-bezier(0.23,1,0.32,1);animation-timing-function:cubic-bezier(0.23,1,0.32,1);-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:translateX(20px) rotate(4deg);transform:translateX(20px) rotate(4deg)}}.hitRight{-webkit-animation-name:hitRight;animation-name:hitRight;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes hitRight{0%{-webkit-animation-timing-function:cubic-bezier(0.23,1,0.32,1);animation-timing-function:cubic-bezier(0.23,1,0.32,1);-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:translateX(-20px) rotate(-4deg);transform:translateX(-20px) rotate(-4deg)}}.shake{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1)}@keyframes shake{10%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%{-webkit-transform:translateX(10px);transform:translateX(10px)}30%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}40%{-webkit-transform:translateX(10px);transform:translateX(10px)}50%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}60%{-webkit-transform:translateX(10px);transform:translateX(10px)}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}.ball{-webkit-animation-name:ball;animation-name:ball;-webkit-animation-duration:2s;animation-duration:2s}@keyframes ball{0%{-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}20%{-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);animation-timing-function:cubic-bezier(0.42,0,1,1);-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}40%{-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);animation-timing-function:cubic-bezier(0,0,0.58,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);animation-timing-function:cubic-bezier(0.42,0,1,1);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}75%{-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);animation-timing-function:cubic-bezier(0,0,0.58,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}85%{-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);animation-timing-function:cubic-bezier(0.42,0,1,1);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.pullUp{-webkit-animation-name:pullUp;animation-name:pullUp;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes pullUp{0%{-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0)}30%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scale3d(1,0,1);transform:scale3d(1,0,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}100%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pullDown{-webkit-animation-name:pullDown;animation-name:pullDown;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes pullDown{0%{-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0)}50%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scale3d(1,0,1);transform:scale3d(1,0,1);-webkit-transform-origin:center top;transform-origin:center top}100%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pullLeft{-webkit-animation-name:pullLeft;animation-name:pullLeft;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes pullLeft{0%{-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1)}50%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1);-webkit-transform-origin:center left;transform-origin:center left}100%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pullRight{-webkit-animation-name:pullRight;animation-name:pullRight;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes pullRight{0%{-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1)}50%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1);-webkit-transform-origin:center right;transform-origin:center right}100%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.jumpInLeft{-webkit-animation-name:jumpInLeft;animation-name:jumpInLeft;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes jumpInLeft{0%{opacity:0;-webkit-transform:scale3d(0.5,0.5,0.5) rotate(-90deg);transform:scale3d(0.5,0.5,0.5) rotate(-90deg)}50%{opacity:1;-webkit-transform:scale3d(1.2,1.2,1.2) rotate(10deg);transform:scale3d(1.2,1.2,1.2) rotate(10deg)}70%{-webkit-transform:scale3d(0.9,0.9,0.9) rotate(-5deg);transform:scale3d(0.9,0.9,0.9) rotate(-5deg)}90%{-webkit-transform:scale3d(1,1,1) rotate(0deg);transform:scale3d(1,1,1) rotate(0deg)}}.jumpInRight{-webkit-animation-name:jumpInRight;animation-name:jumpInRight;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes jumpInRight{0%{opacity:0;-webkit-transform:scale3d(0.5,0.5,0.5) rotate(90deg);transform:scale3d(0.5,0.5,0.5) rotate(90deg)}50%{opacity:1;-webkit-transform:scale3d(1.2,1.2,1.2) rotate(-10deg);transform:scale3d(1.2,1.2,1.2) rotate(-10deg)}70%{-webkit-transform:scale3d(0.9,0.9,0.9) rotate(5deg);transform:scale3d(0.9,0.9,0.9) rotate(5deg)}90%{-webkit-transform:scale3d(1,1,1) rotate(0deg);transform:scale3d(1,1,1) rotate(0deg)}}.jumpOutRight{-webkit-animation-name:jumpOutRight;animation-name:jumpOutRight;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes jumpOutRight{0%{-webkit-transform:scale3d(1,1,1) rotate(0deg);transform:scale3d(1,1,1) rotate(0deg)}30%{-webkit-transform:scale3d(0.9,0.9,0.9) rotate(5deg);transform:scale3d(0.9,0.9,0.9) rotate(5deg)}70%{opacity:1;-webkit-transform:scale3d(1.2,1.2,1.2) rotate(-10deg);transform:scale3d(1.2,1.2,1.2) rotate(-10deg)}100%{opacity:0;-webkit-transform:scale3d(0.5,0.5,0.5) rotate(90deg);transform:scale3d(0.5,0.5,0.5) rotate(90deg)}}.jumpOutLeft{-webkit-animation-name:jumpOutLeft;animation-name:jumpOutLeft;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes jumpOutLeft{0%{-webkit-transform:scale3d(1,1,1) rotate(0deg);transform:scale3d(1,1,1) rotate(0deg)}30%{-webkit-transform:scale3d(0.9,0.9,0.9) rotate(-5deg);transform:scale3d(0.9,0.9,0.9) rotate(-5deg)}70%{opacity:1;-webkit-transform:scale3d(1.2,1.2,1.2) rotate(10deg);transform:scale3d(1.2,1.2,1.2) rotate(10deg)}100%{opacity:0;-webkit-transform:scale3d(0.5,0.5,0.5) rotate(-90deg);transform:scale3d(0.5,0.5,0.5) rotate(-90deg)}}.rollInLeft{-webkit-animation-name:rollInLeft;animation-name:rollInLeft;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollInLeft{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateX(-400px) rotate(445deg);transform:translateX(-400px) rotate(445deg);opacity:0}30%{opacity:1}50%{-webkit-transform:translateX(20px) rotate(20deg);transform:translateX(20px) rotate(20deg)}100%{-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg)}}.rollInRight{-webkit-animation-name:rollInRight;animation-name:rollInRight;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollInRight{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateX(400px) rotate(-445deg);transform:translateX(400px) rotate(-445deg);opacity:0}30%{opacity:1}50%{-webkit-transform:translateX(-20px) rotate(-20deg);transform:translateX(-20px) rotate(-20deg)}100%{-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg)}}.rollInTop{-webkit-animation-name:rollInTop;animation-name:rollInTop;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollInTop{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateY(-400px) rotate(-445deg);transform:translateY(-400px) rotate(-445deg);opacity:0}30%{opacity:1}50%{-webkit-transform:translateY(20px) rotate(-20deg);transform:translateY(20px) rotate(-20deg)}100%{-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}}.rollInBottom{-webkit-animation-name:rollInBottom;animation-name:rollInBottom;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollInBottom{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateY(400px) rotate(-445deg);transform:translateY(400px) rotate(-445deg);opacity:0}30%{opacity:1}50%{-webkit-transform:translateY(-20px) rotate(-20deg);transform:translateY(-20px) rotate(-20deg)}100%{-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}}.rollOutLeft{-webkit-animation-name:rollOutLeft;animation-name:rollOutLeft;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollOutLeft{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg)}40%{opacity:1;-webkit-transform:translateX(20px) rotate(-20deg);transform:translateX(20px) rotate(-20deg)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateX(-400px) rotate(-445deg);transform:translateX(-400px) rotate(-445deg)}}.rollOutRight{-webkit-animation-name:rollOutRight;animation-name:rollOutRight;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollOutRight{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg)}40%{opacity:1;-webkit-transform:translateX(-20px) rotate(20deg);transform:translateX(-20px) rotate(20deg)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateX(400px) rotate(445deg);transform:translateX(400px) rotate(445deg)}}.rollOutTop{-webkit-animation-name:rollOutTop;animation-name:rollOutTop;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollOutTop{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}40%{opacity:1;-webkit-transform:translateY(20px) rotate(20deg);transform:translateY(20px) rotate(20deg)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateY(-400px) rotate(445deg);transform:translateY(-400px) rotate(445deg)}}.rollOutBottom{-webkit-animation-name:rollOutBottom;animation-name:rollOutBottom;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes rollOutBottom{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}40%{opacity:1;-webkit-transform:translateY(-20px) rotate(-20deg);transform:translateY(-20px) rotate(-20deg)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translateY(400px) rotate(-445deg);transform:translateY(400px) rotate(-445deg)}}.popIn{-webkit-animation-name:popIn;animation-name:popIn}@keyframes popIn{0%{-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);opacity:0}20%{opacity:1}40%{-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:scale3d(1.08,1.08,1.08);transform:scale3d(1.08,1.08,1.08)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}80%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}100%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.popInLeft{-webkit-animation-name:popInLeft;animation-name:popInLeft}@keyframes popInLeft{0%{opacity:0;-webkit-transform:translate3d(-200px,0,0) scale3d(0.1,0.1,0.1);transform:translate3d(-200px,0,0) scale3d(0.1,0.1,0.1)}40%{opacity:1;-webkit-transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08);transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08);-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}80%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}100%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.popInRight{-webkit-animation-name:popInRight;animation-name:popInRight}@keyframes popInRight{0%{-webkit-transform:translate3d(200px,0,0) scale3d(0.1,0.1,0.1);transform:translate3d(200px,0,0) scale3d(0.1,0.1,0.1);opacity:0}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08);transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}80%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}100%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.popInTop{-webkit-animation-name:popInTop;animation-name:popInTop}@keyframes popInTop{0%{-webkit-transform:translate3d(0,-200px,0) scale3d(0.1,0.1,0.1);transform:translate3d(0,-200px,0) scale3d(0.1,0.1,0.1);opacity:0}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08);transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:translate3d(0,0,0) scale3d(1,1,1);transform:translate3d(0,0,0) scale3d(1,1,1)}80%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:translate3d(0,0,0) scale3d(1.03,1.03,1.03);transform:translate3d(0,0,0) scale3d(1.03,1.03,1.03)}100%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translate3d(0,0,0) scale3d(1,1,1);transform:translate3d(0,0,0) scale3d(1,1,1)}}.popInBottom{-webkit-animation-name:popInBottom;animation-name:popInBottom}@keyframes popInBottom{0%{-webkit-transform:translate3d(0,200px,0) scale3d(0.1,0.1,0.1);transform:translate3d(0,200px,0) scale3d(0.1,0.1,0.1);opacity:0}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08);transform:translate3d(0,0,0) scale3d(1.08,1.08,1.08)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:translate3d(0,0,0) scale3d(1,1,1);transform:translate3d(0,0,0) scale3d(1,1,1)}80%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:translate3d(0,0,0) scale3d(1.03,1.03,1.03);transform:translate3d(0,0,0) scale3d(1.03,1.03,1.03)}100%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:translate3d(0,0,0) scale3d(1,1,1);transform:translate3d(0,0,0) scale3d(1,1,1)}}.popOut{-webkit-animation-name:popOut;animation-name:popOut;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes popOut{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.08,1.08,1.08);transform:scale3d(1.08,1.08,1.08)}80%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}}.popOutLeft{-webkit-animation-name:popOutLeft;animation-name:popOutLeft;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes popOutLeft{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1) translate3d(0,0,0);transform:scale3d(1,1,1) translate3d(0,0,0);-webkit-transform-origin:left center;transform-origin:left center}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0);transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:scale3d(0.5,0.5,0.5) translate3d(-200px,0,0);transform:scale3d(0.5,0.5,0.5) translate3d(-200px,0,0)}}.popOutRight{-webkit-animation-name:popOutRight;animation-name:popOutRight;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes popOutRight{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1) translate3d(0,0,0);transform:scale3d(1,1,1) translate3d(0,0,0);-webkit-transform-origin:right center;transform-origin:right center}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0);transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:scale3d(0.5,0.5,0.5) translate3d(200px,0,0);transform:scale3d(0.5,0.5,0.5) translate3d(200px,0,0)}}.popOutTop{-webkit-animation-name:popOutTop;animation-name:popOutTop;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes popOutTop{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1) translate3d(0,0,0);transform:scale3d(1,1,1) translate3d(0,0,0);-webkit-transform-origin:top center;transform-origin:top center}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0);transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:scale3d(0.5,0.5,0.5) translate3d(0,-400px,0);transform:scale3d(0.5,0.5,0.5) translate3d(0,-400px,0)}}.popOutBottom{-webkit-animation-name:popOutBottom;animation-name:popOutBottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes popOutBottom{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1) translate3d(0,0,0);transform:scale3d(1,1,1) translate3d(0,0,0);-webkit-transform-origin:bottom center;transform-origin:bottom center}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0);transform:scale3d(1.08,1.08,1.08) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:scale3d(0.5,0.5,0.5) translate3d(0,400px,0);transform:scale3d(0.5,0.5,0.5) translate3d(0,400px,0)}}.flip{-webkit-animation-name:flip;animation-name:flip}@keyframes flip{from{-webkit-transform:perspective(400px) rotateY(-360deg) scale3d(1,1,1);transform:perspective(400px) rotateY(-360deg) scale3d(1,1,1);-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94)}50%{-webkit-transform:perspective(400px) rotateY(-180deg) scale3d(1.2,1.2,1.2);transform:perspective(400px) rotateY(-180deg) scale3d(1.2,1.2,1.2);-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94)}to{-webkit-transform:perspective(400px) rotateY(0deg) scale3d(1,1,1);transform:perspective(400px) rotateY(0deg) scale3d(1,1,1);-webkit-animation-timing-function:cubic-bezier(0.95,0.05,0.795,0.035);animation-timing-function:cubic-bezier(0.95,0.05,0.795,0.035)}}.flipInX{-webkit-animation-name:flipInX;animation-name:flipInX;-webkit-animation-duration:1s;animation-duration:1s}@keyframes flipInX{from{opacity:0;-webkit-transform:perspective(400px) rotateX(90deg) scale3d(1.2,1.2,1.2);transform:perspective(400px) rotateX(90deg) scale3d(1.2,1.2,1.2)}50%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:perspective(400px) rotateX(-20deg) scale3d(1,1,1);transform:perspective(400px) rotateX(-20deg) scale3d(1,1,1)}to{-webkit-transform:perspective(400px) rotateX(0deg) scale3d(1,1,1);transform:perspective(400px) rotateX(0deg) scale3d(1,1,1)}}.flipInY{-webkit-animation-name:flipInY;animation-name:flipInY;-webkit-animation-duration:1s;animation-duration:1s}@keyframes flipInY{from{opacity:0;-webkit-transform:perspective(400px) rotateY(90deg) scale3d(1.2,1.2,1.2);transform:perspective(400px) rotateY(90deg) scale3d(1.2,1.2,1.2)}50%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:perspective(400px) rotateY(-20deg) scale3d(1,1,1);transform:perspective(400px) rotateY(-20deg) scale3d(1,1,1)}to{-webkit-transform:perspective(400px) rotateY(0deg) scale3d(1,1,1);transform:perspective(400px) rotateY(0deg) scale3d(1,1,1)}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX}@keyframes flipOutX{from{-webkit-transform:perspective(400px) rotateX(0deg) scale3d(1,1,1);transform:perspective(400px) rotateX(0deg) scale3d(1,1,1)}60%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:perspective(400px) rotateX(-30deg) scale3d(1,1,1);transform:perspective(400px) rotateX(-30deg) scale3d(1,1,1)}to{opacity:0;-webkit-transform:perspective(400px) rotateX(90deg) scale3d(1.2,1.2,1.2);transform:perspective(400px) rotateX(90deg) scale3d(1.2,1.2,1.2)}}.flipOutY{-webkit-animation-name:flipOutY;animation-name:flipOutY}@keyframes flipOutY{from{-webkit-transform:perspective(400px) rotateY(0deg) scale3d(1,1,1);transform:perspective(400px) rotateY(0deg) scale3d(1,1,1)}60%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:perspective(400px) rotateY(-30deg) scale3d(1,1,1);transform:perspective(400px) rotateY(-30deg) scale3d(1,1,1)}to{opacity:0;-webkit-transform:perspective(400px) rotateY(90deg) scale3d(1.2,1.2,1.2);transform:perspective(400px) rotateY(90deg) scale3d(1.2,1.2,1.2)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeInRight{0%{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeInLeft{0%{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.fadeInTop{-webkit-animation-name:fadeInTop;animation-name:fadeInTop;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeInTop{0%{-webkit-transform:translate3d(0,-400px,0);transform:translate3d(0,-400px,0);opacity:0}50%{opacity:.2}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.fadeInBottom{-webkit-animation-name:fadeInBottom;animation-name:fadeInBottom;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeInBottom{0%{-webkit-transform:translate3d(0,400px,0);transform:translate3d(0,400px,0);opacity:0}50%{opacity:.2}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0);opacity:0}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0);opacity:0}}.fadeOutTop{-webkit-animation-name:fadeOutTop;animation-name:fadeOutTop;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeOutTop{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}40%{opacity:.2}100%{-webkit-transform:translate3d(0,-300px,0);transform:translate3d(0,-300px,0);opacity:0}}.fadeOutBottom{-webkit-animation-name:fadeOutBottom;animation-name:fadeOutBottom;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes fadeOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}40%{opacity:.2}100%{-webkit-transform:translate3d(0,300px,0);transform:translate3d(0,300px,0);opacity:0}}.driveInLeft{-webkit-animation-name:driveInLeft;animation-name:driveInLeft;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveInLeft{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}30%{opacity:1}60%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.driveInRight{-webkit-animation-name:driveInRight;animation-name:driveInRight;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveInRight{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}30%{opacity:1}60%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.driveInTop{-webkit-animation-name:driveInTop;animation-name:driveInTop;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveInTop{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,-400px,0);transform:translate3d(0,-400px,0)}30%{opacity:1}60%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.driveInBottom{-webkit-animation-name:driveInBottom;animation-name:driveInBottom;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveInBottom{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,300px,0);transform:translate3d(0,300px,0)}30%{opacity:1}60%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);animation-timing-function:cubic-bezier(0.645,0.045,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.driveOutLeft{-webkit-animation-name:driveOutLeft;animation-name:driveOutLeft;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveOutLeft{0%{-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}30%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}60%{opacity:1}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}}.driveOutRight{-webkit-animation-name:driveOutRight;animation-name:driveOutRight;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveOutRight{0%{-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}30%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}60%{opacity:1}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}}.driveOutTop{-webkit-animation-name:driveOutTop;animation-name:driveOutTop;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveOutTop{0%{-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}30%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}60%{opacity:1}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,-400px,0);transform:translate3d(0,-400px,0)}}.driveOutBottom{-webkit-animation-name:driveOutBottom;animation-name:driveOutBottom;-webkit-animation-duration:1s;animation-duration:1s}@keyframes driveOutBottom{0%{-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}30%{-webkit-animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}60%{opacity:1}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:translate3d(0,300px,0);transform:translate3d(0,300px,0)}}.spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1.2s;animation-duration:1.2s}@keyframes spin{0%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg);-webkit-transform-origin:center center;transform-origin:center center}20%{-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:rotateZ(-20deg);transform:rotateZ(-20deg);-webkit-transform-origin:center center;transform-origin:center center}70%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:rotateZ(380deg);transform:rotateZ(380deg);-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg);-webkit-transform-origin:center center;transform-origin:center center}}.spinIn{-webkit-animation-name:spinIn;animation-name:spinIn;-webkit-animation-duration:1s;animation-duration:1s}@keyframes spinIn{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.23,1,0.32,1);animation-timing-function:cubic-bezier(0.23,1,0.32,1);-webkit-transform:rotateZ(0deg) scale3d(0,0,0);transform:rotateZ(0deg) scale3d(0,0,0);-webkit-transform-origin:center center;transform-origin:center center}50%{opacity:1}70%{-webkit-transform:rotateZ(380deg) scale3d(1,1,1);transform:rotateZ(380deg) scale3d(1,1,1);-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotateZ(360deg) scale3d(1,1,1);transform:rotateZ(360deg) scale3d(1,1,1);-webkit-transform-origin:center center;transform-origin:center center}}.spinOut{-webkit-animation-name:spinOut;animation-name:spinOut;-webkit-animation-duration:1s;animation-duration:1s}@keyframes spinOut{0%{-webkit-animation-timing-function:cubic-bezier(0.23,1,0.32,1);animation-timing-function:cubic-bezier(0.23,1,0.32,1);-webkit-transform:rotateZ(0deg) scale3d(1,1,1);transform:rotateZ(0deg) scale3d(1,1,1);-webkit-transform-origin:center center;transform-origin:center center}20%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);-webkit-transform:rotateZ(-20deg) scale3d(1,1,1);transform:rotateZ(-20deg) scale3d(1,1,1);-webkit-transform-origin:center center;transform-origin:center center}30%{opacity:1}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715);-webkit-transform:rotateZ(360deg) scale3d(0,0,0);transform:rotateZ(360deg) scale3d(0,0,0);-webkit-transform-origin:center center;transform-origin:center center}}.swoopInLeft{-webkit-animation-name:swoopInLeft;animation-name:swoopInLeft;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopInLeft{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleX(1.5) translate3d(-400px,0,0);transform:scaleX(1.5) translate3d(-400px,0,0)}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1.2) translate3d(0,0,0);transform:scaleX(1.2) translate3d(0,0,0)}65%{-webkit-transform:scaleX(1) translate3d(20px,0,0);transform:scaleX(1) translate3d(20px,0,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1) translate3d(0,0,0);transform:scaleX(1) translate3d(0,0,0)}}.swoopInRight{-webkit-animation-name:swoopInRight;animation-name:swoopInRight;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopInRight{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleX(1.5) translate3d(400px,0,0);transform:scaleX(1.5) translate3d(400px,0,0)}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1.2) translate3d(0,0,0);transform:scaleX(1.2) translate3d(0,0,0)}65%{-webkit-transform:scaleX(1) translate3d(-20px,0,0);transform:scaleX(1) translate3d(-20px,0,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1) translate3d(0,0,0);transform:scaleX(1) translate3d(0,0,0)}}.swoopInTop{-webkit-animation-name:swoopInTop;animation-name:swoopInTop;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopInTop{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleY(1.5) translate3d(0,-400px,0);transform:scaleY(1.5) translate3d(0,-400px,0)}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1.2) translate3d(0,0,0);transform:scaleY(1.2) translate3d(0,0,0)}65%{-webkit-transform:scaleY(1) translate3d(0,20px,0);transform:scaleY(1) translate3d(0,20px,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1) translate3d(0,0,0);transform:scaleY(1) translate3d(0,0,0)}}.swoopInBottom{-webkit-animation-name:swoopInBottom;animation-name:swoopInBottom;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopInBottom{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleY(1.5) translate3d(0,250px,0);transform:scaleY(1.5) translate3d(0,250px,0)}40%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1.2) translate3d(0,0,0);transform:scaleY(1.2) translate3d(0,0,0)}65%{-webkit-transform:scaleY(1) translate3d(0,-20px,0);transform:scaleY(1) translate3d(0,-20px,0)}100%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1) translate3d(0,0,0);transform:scaleY(1) translate3d(0,0,0)}}.swoopOutLeft{-webkit-animation-name:swoopOutLeft;animation-name:swoopOutLeft;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopOutLeft{0%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1) translate3d(0,0,0);transform:scaleX(1) translate3d(0,0,0)}40%{opacity:1;-webkit-transform:scaleX(1) translate3d(20px,0,0);transform:scaleX(1) translate3d(20px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1.2) translate3d(0,0,0);transform:scaleX(1.2) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleX(1.5) translate3d(-400px,0,0);transform:scaleX(1.5) translate3d(-400px,0,0)}}.swoopOutRight{-webkit-animation-name:swoopOutRight;animation-name:swoopOutRight;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopOutRight{0%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1) translate3d(0,0,0);transform:scaleX(1) translate3d(0,0,0)}40%{opacity:1;-webkit-transform:scaleX(1) translate3d(-20px,0,0);transform:scaleX(1) translate3d(-20px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleX(1.2) translate3d(0,0,0);transform:scaleX(1.2) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleX(1.5) translate3d(400px,0,0);transform:scaleX(1.5) translate3d(400px,0,0)}}.swoopOutTop{-webkit-animation-name:swoopOutTop;animation-name:swoopOutTop;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopOutTop{0%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1) translate3d(0,0,0);transform:scaleY(1) translate3d(0,0,0)}40%{opacity:1;-webkit-transform:scaleY(1) translate3d(0,20px,0);transform:scaleY(1) translate3d(0,20px,0)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1.2) translate3d(0,0,0);transform:scaleY(1.2) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleY(1.5) translate3d(0,-400px,0);transform:scaleY(1.5) translate3d(0,-400px,0)}}.swoopOutBottom{-webkit-animation-name:swoopOutBottom;animation-name:swoopOutBottom;-webkit-animation-duration:.5s;animation-duration:.5s}@keyframes swoopOutBottom{0%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1) translate3d(0,0,0);transform:scaleY(1) translate3d(0,0,0)}40%{opacity:1;-webkit-transform:scaleY(1) translate3d(0,-20px,0);transform:scaleY(1) translate3d(0,-20px,0)}60%{-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-timing-function:cubic-bezier(0.42,0,0.58,1);-webkit-transform:scaleY(1.2) translate3d(0,0,0);transform:scaleY(1.2) translate3d(0,0,0)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:scaleY(1.5) translate3d(0,200px,0);transform:scaleY(1.5) translate3d(0,200px,0)}}.fold{-webkit-animation-name:fold;animation-name:fold}@keyframes fold{0%{-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:scale3d(1,0.4,1);transform:scale3d(1,0.4,1)}60%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:scale3d(0.4,0.4,1);transform:scale3d(0.4,0.4,1)}100%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.55,0.085,0.68,0.53);animation-timing-function:cubic-bezier(0.55,0.085,0.68,0.53);-webkit-transform:scale3d(0.2,0.2,0.2);transform:scale3d(0.2,0.2,0.2)}}.unfold{-webkit-animation-name:unfold;animation-name:unfold}@keyframes unfold{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0)}30%{opacity:1;-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:scale3d(0.4,0.4,1);transform:scale3d(0.4,0.4,1)}60%{-webkit-animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);animation-timing-function:cubic-bezier(0.455,0.03,0.515,0.955);-webkit-transform:scale3d(0.4,1,1);transform:scale3d(0.4,1,1)}100%{-webkit-animation-timing-function:cubic-bezier(0.55,0.085,0.68,0.53);animation-timing-function:cubic-bezier(0.55,0.085,0.68,0.53);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.delay-100{-webkit-animation-delay:.1s;animation-delay:.1s}.delay-150{-webkit-animation-delay:150ms;animation-delay:150ms}.duration-100{-webkit-animation-duration:.1s;animation-duration:.1s}.duration-150{-webkit-animation-duration:150ms;animation-duration:150ms}.delay-200{-webkit-animation-delay:.2s;animation-delay:.2s}.delay-250{-webkit-animation-delay:250ms;animation-delay:250ms}.duration-200{-webkit-animation-duration:.2s;animation-duration:.2s}.duration-250{-webkit-animation-duration:250ms;animation-duration:250ms}.delay-300{-webkit-animation-delay:.3s;animation-delay:.3s}.delay-350{-webkit-animation-delay:350ms;animation-delay:350ms}.duration-300{-webkit-animation-duration:.3s;animation-duration:.3s}.duration-350{-webkit-animation-duration:350ms;animation-duration:350ms}.delay-400{-webkit-animation-delay:.4s;animation-delay:.4s}.delay-450{-webkit-animation-delay:450ms;animation-delay:450ms}.duration-400{-webkit-animation-duration:.4s;animation-duration:.4s}.duration-450{-webkit-animation-duration:450ms;animation-duration:450ms}.delay-500{-webkit-animation-delay:.5s;animation-delay:.5s}.delay-550{-webkit-animation-delay:550ms;animation-delay:550ms}.duration-500{-webkit-animation-duration:.5s;animation-duration:.5s}.duration-550{-webkit-animation-duration:550ms;animation-duration:550ms}.delay-600{-webkit-animation-delay:.6s;animation-delay:.6s}.delay-650{-webkit-animation-delay:650ms;animation-delay:650ms}.duration-600{-webkit-animation-duration:.6s;animation-duration:.6s}.duration-650{-webkit-animation-duration:650ms;animation-duration:650ms}.delay-700{-webkit-animation-delay:.7s;animation-delay:.7s}.delay-750{-webkit-animation-delay:750ms;animation-delay:750ms}.duration-700{-webkit-animation-duration:.7s;animation-duration:.7s}.duration-750{-webkit-animation-duration:750ms;animation-duration:750ms}.delay-800{-webkit-animation-delay:.8s;animation-delay:.8s}.delay-850{-webkit-animation-delay:850ms;animation-delay:850ms}.duration-800{-webkit-animation-duration:.8s;animation-duration:.8s}.duration-850{-webkit-animation-duration:850ms;animation-duration:850ms}.delay-900{-webkit-animation-delay:.9s;animation-delay:.9s}.delay-950{-webkit-animation-delay:950ms;animation-delay:950ms}.duration-900{-webkit-animation-duration:.9s;animation-duration:.9s}.duration-950{-webkit-animation-duration:950ms;animation-duration:950ms}.delay-1000{-webkit-animation-delay:1s;animation-delay:1s}.delay-1250{-webkit-animation-delay:1250ms;animation-delay:1250ms}.delay-1500{-webkit-animation-delay:1.5s;animation-delay:1.5s}.delay-1750{-webkit-animation-delay:1750ms;animation-delay:1750ms}.duration-1000{-webkit-animation-duration:1s;animation-duration:1s}.duration-1250{-webkit-animation-duration:1250ms;animation-duration:1250ms}.duration-1500{-webkit-animation-duration:1.5s;animation-duration:1.5s}.duration-1750{-webkit-animation-duration:1750ms;animation-duration:1750ms}.delay-2000{-webkit-animation-delay:2s;animation-delay:2s}.delay-2250{-webkit-animation-delay:2250ms;animation-delay:2250ms}.delay-2500{-webkit-animation-delay:2.5s;animation-delay:2.5s}.delay-2750{-webkit-animation-delay:2750ms;animation-delay:2750ms}.duration-2000{-webkit-animation-duration:2s;animation-duration:2s}.duration-2250{-webkit-animation-duration:2250ms;animation-duration:2250ms}.duration-2500{-webkit-animation-duration:2.5s;animation-duration:2.5s}.duration-2750{-webkit-animation-duration:2750ms;animation-duration:2750ms}.delay-3000{-webkit-animation-delay:3s;animation-delay:3s}.delay-3250{-webkit-animation-delay:3250ms;animation-delay:3250ms}.delay-3500{-webkit-animation-delay:3.5s;animation-delay:3.5s}.delay-3750{-webkit-animation-delay:3750ms;animation-delay:3750ms}.duration-3000{-webkit-animation-duration:3s;animation-duration:3s}.duration-3250{-webkit-animation-duration:3250ms;animation-duration:3250ms}.duration-3500{-webkit-animation-duration:3.5s;animation-duration:3.5s}.duration-3750{-webkit-animation-duration:3750ms;animation-duration:3750ms}.delay-4000{-webkit-animation-delay:4s;animation-delay:4s}.delay-4250{-webkit-animation-delay:4250ms;animation-delay:4250ms}.delay-4500{-webkit-animation-delay:4.5s;animation-delay:4.5s}.delay-4750{-webkit-animation-delay:4750ms;animation-delay:4750ms}.duration-4000{-webkit-animation-duration:4s;animation-duration:4s}.duration-4250{-webkit-animation-duration:4250ms;animation-duration:4250ms}.duration-4500{-webkit-animation-duration:4.5s;animation-duration:4.5s}.duration-4750{-webkit-animation-duration:4750ms;animation-duration:4750ms}.delay-5000{-webkit-animation-delay:5s;animation-delay:5s}.delay-5250{-webkit-animation-delay:5250ms;animation-delay:5250ms}.delay-5500{-webkit-animation-delay:5.5s;animation-delay:5.5s}.delay-5750{-webkit-animation-delay:5750ms;animation-delay:5750ms}.duration-5000{-webkit-animation-duration:5s;animation-duration:5s}.duration-5250{-webkit-animation-duration:5250ms;animation-duration:5250ms}.duration-5500{-webkit-animation-duration:5.5s;animation-duration:5.5s}.duration-5750{-webkit-animation-duration:5750ms;animation-duration:5750ms}.duration-6000{-webkit-animation-duration:6s;animation-duration:6s}.duration-6250{-webkit-animation-duration:6250ms;animation-duration:6250ms}.duration-6500{-webkit-animation-duration:6.5s;animation-duration:6.5s}.duration-6750{-webkit-animation-duration:6750ms;animation-duration:6750ms}.duration-7000{-webkit-animation-duration:7s;animation-duration:7s}.duration-7250{-webkit-animation-duration:7250ms;animation-duration:7250ms}.duration-7500{-webkit-animation-duration:7.5s;animation-duration:7.5s}.duration-7750{-webkit-animation-duration:7750ms;animation-duration:7750ms}.duration-8000{-webkit-animation-duration:8s;animation-duration:8s}.duration-8250{-webkit-animation-duration:8250ms;animation-duration:8250ms}.duration-8500{-webkit-animation-duration:8.5s;animation-duration:8.5s}.duration-8750{-webkit-animation-duration:8750ms;animation-duration:8750ms}.duration-9000{-webkit-animation-duration:9s;animation-duration:9s}.duration-9250{-webkit-animation-duration:9250ms;animation-duration:9250ms}.duration-9500{-webkit-animation-duration:9.5s;animation-duration:9.5s}.duration-9750{-webkit-animation-duration:9750ms;animation-duration:9750ms}.duration-10000{-webkit-animation-duration:10s;animation-duration:10s}.duration-10250{-webkit-animation-duration:10250ms;animation-duration:10250ms}.duration-10500{-webkit-animation-duration:10.5s;animation-duration:10.5s}.duration-10750{-webkit-animation-duration:10750ms;animation-duration:10750ms} -------------------------------------------------------------------------------- /vivify.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Vivify 3 | version: 1.0 4 | Licensed under the MIT license - http://opensource.org/licenses/MIT 5 | 6 | The MIT License 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy 9 | of this software and associated documentation files (the "Software"), to deal 10 | in the Software without restriction, including without limitation the rights 11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | copies of the Software, and to permit persons to whom the Software is 13 | furnished to do so, subject to the following conditions: 14 | 15 | The above copyright notice and this permission notice shall be included in 16 | all copies or substantial portions of the Software. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 | THE SOFTWARE. 25 | */ 26 | /* 27 | Copyright (c) 2017 Martin Knize. 28 | 29 | */ 30 | 31 | 32 | //------------------------------------------------------------------------------ 33 | // MIXINS 34 | //------------------------------------------------------------------------------ 35 | 36 | @mixin name($name) { 37 | -webkit-animation-name: $name; 38 | animation-name: $name; 39 | } 40 | 41 | @mixin delay($time) { 42 | -webkit-animation-delay: $time; 43 | animation-delay: $time; 44 | } 45 | 46 | @mixin bezier($bezier) { 47 | -webkit-animation-timing-function: $bezier; 48 | animation-timing-function: $bezier; 49 | } 50 | 51 | @mixin transform($transform...) { 52 | -webkit-transform: $transform; 53 | transform: $transform; 54 | } 55 | 56 | @mixin duration($time) { 57 | -webkit-animation-duration: $time; 58 | animation-duration: $time; 59 | } 60 | 61 | @mixin transformOrigin($origin) { 62 | -webkit-transform-origin: $origin; 63 | transform-origin: $origin; 64 | } 65 | 66 | @mixin backFaceVisibility($state) { 67 | -webkit-backface-visibility: $state; 68 | backface-visibility: $state; 69 | } 70 | 71 | //********** 72 | 73 | //------------------------------------------------------------------------------ 74 | // EASINGS 75 | //------------------------------------------------------------------------------ 76 | 77 | // Cubic 78 | $easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190); 79 | $easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000); 80 | $easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000); 81 | 82 | // Circ 83 | $easeInCirc : cubic-bezier(0.600, 0.040, 0.980, 0.335); 84 | $easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000); 85 | $easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860); 86 | 87 | // Expo 88 | $easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035); 89 | $easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000); 90 | $easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000); 91 | 92 | // Quad 93 | $easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530); 94 | $easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940); 95 | $easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955); 96 | 97 | // Quart 98 | $easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220); 99 | $easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000); 100 | $easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000); 101 | 102 | // Quint 103 | $easeInQuint : cubic-bezier(0.755, 0.050, 0.855, 0.060); 104 | $easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000); 105 | $easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000); 106 | 107 | // Sine 108 | $easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715); 109 | $easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000); 110 | $easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950); 111 | 112 | // Back 113 | $easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045); 114 | $easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275); 115 | $easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550); 116 | 117 | // classic 118 | $easeInOut : cubic-bezier(0.420, 0.000, 0.580, 1.000); 119 | 120 | //------------------------------------------------------------------------------ 121 | // MAIN CLASSES 122 | //------------------------------------------------------------------------------ 123 | 124 | .vivify { 125 | -webkit-animation-duration: .8s; 126 | -webkit-animation-fill-mode: both; 127 | animation-duration: .8s; 128 | animation-fill-mode: both; 129 | } 130 | 131 | .infinite { 132 | -webkit-animation-iteration-count: infinite; 133 | animation-iteration-count: infinite; 134 | } 135 | 136 | //********** 137 | 138 | 139 | //------------------------------------------------------------------------------ 140 | // SINGLE ANIMATIONS 141 | //------------------------------------------------------------------------------ 142 | 143 | .pulsate { 144 | @include name(pulsate); 145 | @include transformOrigin(center); 146 | } 147 | 148 | @keyframes pulsate { 149 | 0% { 150 | @include bezier($easeOutQuad); 151 | @include transform(scale3d(1,1,1)); 152 | } 153 | 50% { 154 | @include transform(scale3d(.8,.8,.8)); 155 | } 156 | 100% { 157 | @include bezier($easeInQuart); 158 | @include transform(scale3d(1,1,1)); 159 | } 160 | } 161 | 162 | .blink { 163 | @include name(blink); 164 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 165 | @include duration(1s); 166 | } 167 | 168 | @keyframes blink { 169 | 170 | 0% { 171 | opacity: 1; 172 | } 173 | 174 | 25% { 175 | opacity: 0; 176 | } 177 | 178 | 50% { 179 | opacity: 1; 180 | } 181 | 182 | 75% { 183 | opacity: 0; 184 | } 185 | 186 | 100% { 187 | opacity: 1; 188 | } 189 | 190 | } 191 | 192 | .hitLeft { 193 | @include name(hitLeft); 194 | @include backFaceVisibility(hidden); 195 | } 196 | 197 | @keyframes hitLeft { 198 | 0% { 199 | @include bezier($easeOutQuint); 200 | @include transform(translateX(0)); 201 | } 202 | 203 | 40% { 204 | @include bezier($easeInSine); 205 | @include transform(translateX(20px) rotate(4deg)); 206 | } 207 | } 208 | 209 | .hitRight { 210 | @include name(hitRight); 211 | @include backFaceVisibility(hidden); 212 | } 213 | 214 | @keyframes hitRight { 215 | 0% { 216 | @include bezier($easeOutQuint); 217 | @include transform(translateX(0)); 218 | } 219 | 220 | 40% { 221 | @include bezier($easeInSine); 222 | @include transform(translateX(-20px) rotate(-4deg)); 223 | } 224 | } 225 | 226 | .shake { 227 | @include name(shake); 228 | @include duration(1s); 229 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 230 | } 231 | 232 | @keyframes shake { 233 | 234 | 10% { 235 | @include transform(translateX(-10px)); 236 | } 237 | 20% { 238 | @include transform(translateX(10px)); 239 | } 240 | 30% { 241 | @include transform(translateX(-10px)); 242 | } 243 | 40% { 244 | @include transform(translateX(10px)); 245 | } 246 | 50% { 247 | @include transform(translateX(-10px)); 248 | } 249 | 60% { 250 | @include transform(translateX(10px)); 251 | } 252 | 70% { 253 | @include transform(translateX(-10px)); 254 | } 255 | 80% { 256 | @include transform(translateX(10px)); 257 | } 258 | 90% { 259 | @include transform(translateX(-10px)); 260 | } 261 | 262 | } 263 | 264 | 265 | .ball { 266 | @include name(ball); 267 | @include duration(2s); 268 | } 269 | 270 | @keyframes ball { 271 | 0% { 272 | @include bezier(cubic-bezier(0.175, 0.885, 0.320, 1.275)); 273 | @include transform(translate3d(0,0,0)); 274 | } 275 | 20% { 276 | @include bezier(cubic-bezier(0.420, 0.000, 1.000, 1.000)); 277 | @include transform(translate3d(0,-100px,0)); 278 | } 279 | 40% { 280 | @include bezier(cubic-bezier(0.000, 0.000, 0.580, 1.000)); 281 | @include transform(translate3d(0,0,0)); 282 | } 283 | 60% { 284 | @include bezier(cubic-bezier(0.420, 0.000, 1.000, 1.000)); 285 | @include transform(translate3d(0,-30px,0)); 286 | } 287 | 75% { 288 | @include bezier(cubic-bezier(0.000, 0.000, 0.580, 1.000)); 289 | @include transform(translate3d(0,0,0)); 290 | } 291 | 85% { 292 | @include bezier(cubic-bezier(0.420, 0.000, 1.000, 1.000)); 293 | @include transform(translate3d(0,-15px,0)); 294 | } 295 | 100% { 296 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 297 | @include transform(translate3d(0,0,0)); 298 | } 299 | } 300 | 301 | 302 | //********** 303 | 304 | //------------------------------------------------------------------------------ 305 | // PULL ANIMATIONS 306 | //------------------------------------------------------------------------------ 307 | 308 | .pullUp { 309 | @include name(pullUp); 310 | @include backFaceVisibility(hidden); 311 | } 312 | 313 | @keyframes pullUp { 314 | 0% { 315 | @include transform(scale3d(0,0,0)); 316 | } 317 | 30% { 318 | @include bezier($easeOutCubic); 319 | @include transform(scale3d(1,0,1)); 320 | @include transformOrigin(center bottom); 321 | } 322 | 100% { 323 | @include bezier($easeInQuint); 324 | @include transform(scale3d(1,1,1)); 325 | } 326 | } 327 | 328 | .pullDown { 329 | @include name(pullDown); 330 | @include backFaceVisibility(hidden); 331 | } 332 | 333 | @keyframes pullDown { 334 | 0% { 335 | @include transform(scale3d(0,0,0)); 336 | } 337 | 50% { 338 | @include bezier($easeOutCubic); 339 | @include transform(scale3d(1,0,1)); 340 | @include transformOrigin(center top); 341 | } 342 | 100% { 343 | @include bezier($easeInQuint); 344 | @include transform(scale3d(1,1,1)); 345 | } 346 | } 347 | 348 | .pullLeft { 349 | @include name(pullLeft); 350 | @include backFaceVisibility(hidden); 351 | } 352 | 353 | @keyframes pullLeft { 354 | 0% { 355 | @include transform(scale3d(0,1,1)); 356 | } 357 | 50% { 358 | @include bezier($easeOutCubic); 359 | @include transform(scale3d(0,1,1)); 360 | @include transformOrigin(center left); 361 | } 362 | 100% { 363 | @include bezier($easeInQuint); 364 | @include transform(scale3d(1,1,1)); 365 | } 366 | } 367 | 368 | .pullRight { 369 | @include name(pullRight); 370 | @include backFaceVisibility(hidden); 371 | } 372 | 373 | @keyframes pullRight { 374 | 0% { 375 | @include transform(scale3d(0,1,1)); 376 | } 377 | 50% { 378 | @include bezier($easeOutCubic); 379 | @include transform(scale3d(0,1,1)); 380 | @include transformOrigin(center right); 381 | } 382 | 100% { 383 | @include bezier($easeInQuint); 384 | @include transform(scale3d(1,1,1)); 385 | } 386 | } 387 | 388 | //********** 389 | 390 | 391 | //------------------------------------------------------------------------------ 392 | // JUMP ANIMATIONS 393 | //------------------------------------------------------------------------------ 394 | 395 | .jumpInLeft { 396 | @include name(jumpInLeft); 397 | @include bezier($easeOutQuad); 398 | @include backFaceVisibility(hidden); 399 | } 400 | 401 | @keyframes jumpInLeft { 402 | 0% { 403 | opacity: 0; 404 | @include transform(scale3d(0.5, 0.5, 0.5) rotate(-90deg)); 405 | } 406 | 407 | 50% { 408 | opacity: 1; 409 | @include transform(scale3d(1.2, 1.2, 1.2) rotate(10deg)); 410 | } 411 | 70% { 412 | @include transform(scale3d(0.9, 0.9, 0.9) rotate(-5deg)); 413 | } 414 | 90% { 415 | @include transform(scale3d(1, 1, 1) rotate(0deg)); 416 | } 417 | 418 | } 419 | 420 | .jumpInRight { 421 | @include name(jumpInRight); 422 | @include bezier($easeOutQuad); 423 | @include backFaceVisibility(hidden); 424 | } 425 | 426 | @keyframes jumpInRight { 427 | 0% { 428 | opacity: 0; 429 | @include transform(scale3d(0.5, 0.5, 0.5) rotate(90deg)); 430 | } 431 | 432 | 50% { 433 | opacity: 1; 434 | @include transform(scale3d(1.2, 1.2, 1.2) rotate(-10deg)); 435 | } 436 | 70% { 437 | @include transform(scale3d(0.9, 0.9, 0.9) rotate(5deg)); 438 | } 439 | 90% { 440 | @include transform(scale3d(1, 1, 1) rotate(0deg)); 441 | } 442 | 443 | } 444 | 445 | .jumpOutRight { 446 | @include name(jumpOutRight); 447 | @include bezier($easeOutQuad); 448 | @include backFaceVisibility(hidden); 449 | } 450 | 451 | @keyframes jumpOutRight { 452 | 0% { 453 | @include transform(scale3d(1, 1, 1) rotate(0deg)); 454 | } 455 | 30% { 456 | @include transform(scale3d(0.9, 0.9, 0.9) rotate(5deg)); 457 | } 458 | 70% { 459 | opacity: 1; 460 | @include transform(scale3d(1.2, 1.2, 1.2) rotate(-10deg)); 461 | } 462 | 100% { 463 | opacity: 0; 464 | @include transform(scale3d(0.5, 0.5, 0.5) rotate(90deg)); 465 | } 466 | } 467 | 468 | .jumpOutLeft { 469 | @include name(jumpOutLeft); 470 | @include bezier($easeOutQuad); 471 | @include backFaceVisibility(hidden); 472 | } 473 | 474 | @keyframes jumpOutLeft { 475 | 0% { 476 | @include transform(scale3d(1, 1, 1) rotate(0deg)); 477 | } 478 | 30% { 479 | @include transform(scale3d(0.9, 0.9, 0.9) rotate(-5deg)); 480 | } 481 | 70% { 482 | opacity: 1; 483 | @include transform(scale3d(1.2, 1.2, 1.2) rotate(10deg)); 484 | } 485 | 100% { 486 | opacity: 0; 487 | @include transform(scale3d(0.5, 0.5, 0.5) rotate(-90deg)); 488 | } 489 | } 490 | 491 | 492 | //********** 493 | 494 | //------------------------------------------------------------------------------ 495 | // ROLL ANIMATIONS 496 | //------------------------------------------------------------------------------ 497 | 498 | .rollInLeft { 499 | @include name(rollInLeft); 500 | @include duration(.9s); 501 | @include backFaceVisibility(hidden); 502 | } 503 | 504 | @keyframes rollInLeft { 505 | 0% { 506 | @include bezier($easeOutQuad); 507 | @include transform(translateX(-400px) rotate(445deg)); 508 | opacity: 0; 509 | } 510 | 30% { 511 | opacity: 1; 512 | } 513 | 50% { 514 | @include transform(translateX(20px) rotate(20deg)); 515 | } 516 | 100% { 517 | @include bezier($easeInOutQuad); 518 | @include transform(translateX(0) rotate(0deg)); 519 | } 520 | } 521 | 522 | .rollInRight { 523 | @include name(rollInRight); 524 | @include duration(.9s); 525 | @include backFaceVisibility(hidden); 526 | } 527 | 528 | @keyframes rollInRight { 529 | 0% { 530 | @include bezier($easeOutQuad); 531 | @include transform(translateX(400px) rotate(-445deg)); 532 | opacity: 0; 533 | } 534 | 30% { 535 | opacity: 1; 536 | } 537 | 50% { 538 | @include transform(translateX(-20px) rotate(-20deg)); 539 | } 540 | 100% { 541 | @include bezier($easeInOutQuad); 542 | @include transform(translateX(0) rotate(0deg)); 543 | } 544 | } 545 | 546 | 547 | .rollInTop { 548 | @include name(rollInTop); 549 | @include duration(.9s); 550 | @include backFaceVisibility(hidden); 551 | } 552 | 553 | @keyframes rollInTop { 554 | 0% { 555 | @include bezier($easeOutQuad); 556 | @include transform(translateY(-400px) rotate(-445deg)); 557 | opacity: 0; 558 | } 559 | 30% { 560 | opacity: 1; 561 | } 562 | 50% { 563 | @include transform(translateY(20px) rotate(-20deg)); 564 | } 565 | 100% { 566 | @include bezier($easeInOutQuad); 567 | @include transform(translateY(0) rotate(0deg)); 568 | } 569 | } 570 | 571 | .rollInBottom { 572 | @include name(rollInBottom); 573 | @include duration(.9s); 574 | @include backFaceVisibility(hidden); 575 | } 576 | 577 | @keyframes rollInBottom { 578 | 0% { 579 | @include bezier($easeOutQuad); 580 | @include transform(translateY(400px) rotate(-445deg)); 581 | opacity: 0; 582 | } 583 | 30% { 584 | opacity: 1; 585 | } 586 | 50% { 587 | @include transform(translateY(-20px) rotate(-20deg)); 588 | } 589 | 100% { 590 | @include bezier($easeInOutQuad); 591 | @include transform(translateY(0) rotate(0deg)); 592 | } 593 | } 594 | 595 | 596 | .rollOutLeft { 597 | @include name(rollOutLeft); 598 | @include duration(.9s); 599 | @include backFaceVisibility(hidden); 600 | } 601 | 602 | @keyframes rollOutLeft { 603 | 0% { 604 | opacity: 1; 605 | @include bezier($easeInOutQuad); 606 | @include transform(translateX(0) rotate(0deg)); 607 | } 608 | 40% { 609 | opacity: 1; 610 | @include transform(translateX(20px) rotate(-20deg)); 611 | } 612 | 100% { 613 | opacity: 0; 614 | @include bezier($easeOutQuad); 615 | @include transform(translateX(-400px) rotate(-445deg)); 616 | } 617 | } 618 | 619 | .rollOutRight { 620 | @include name(rollOutRight); 621 | @include duration(.9s); 622 | @include backFaceVisibility(hidden); 623 | } 624 | 625 | @keyframes rollOutRight { 626 | 0% { 627 | opacity: 1; 628 | @include bezier($easeInOutQuad); 629 | @include transform(translateX(0) rotate(0deg)); 630 | } 631 | 40% { 632 | opacity: 1; 633 | @include transform(translateX(-20px) rotate(20deg)); 634 | } 635 | 100% { 636 | opacity: 0; 637 | @include bezier($easeOutQuad); 638 | @include transform(translateX(400px) rotate(445deg)); 639 | } 640 | } 641 | 642 | .rollOutTop { 643 | @include name(rollOutTop); 644 | @include duration(.9s); 645 | @include backFaceVisibility(hidden); 646 | } 647 | 648 | @keyframes rollOutTop { 649 | 0% { 650 | opacity: 1; 651 | @include bezier($easeInOutQuad); 652 | @include transform(translateY(0) rotate(0deg)); 653 | } 654 | 40% { 655 | opacity: 1; 656 | @include transform(translateY(20px) rotate(20deg)); 657 | } 658 | 100% { 659 | opacity: 0; 660 | @include bezier($easeOutQuad); 661 | @include transform(translateY(-400px) rotate(445deg)); 662 | } 663 | } 664 | 665 | .rollOutBottom { 666 | @include name(rollOutBottom); 667 | @include duration(.9s); 668 | @include backFaceVisibility(hidden); 669 | } 670 | 671 | @keyframes rollOutBottom { 672 | 0% { 673 | opacity: 1; 674 | @include bezier($easeInOutQuad); 675 | @include transform(translateY(0) rotate(0deg)); 676 | } 677 | 40% { 678 | opacity: 1; 679 | @include transform(translateY(-20px) rotate(-20deg)); 680 | } 681 | 100% { 682 | opacity: 0; 683 | @include bezier($easeOutQuad); 684 | @include transform(translateY(400px) rotate(-445deg)); 685 | } 686 | } 687 | 688 | //********** 689 | 690 | //------------------------------------------------------------------------------ 691 | // POP ANIMATIONS 692 | //------------------------------------------------------------------------------ 693 | 694 | .popIn { 695 | @include name(popIn); 696 | } 697 | 698 | @keyframes popIn { 699 | 0% { 700 | @include transform(scale3d(0, 0, 0)); 701 | opacity: 0; 702 | } 703 | 20% { opacity: 1; } 704 | 40% { 705 | @include bezier($easeInSine); 706 | @include transform(scale3d(1.08, 1.08, 1.08)); 707 | } 708 | 60% { 709 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 710 | @include transform(scale3d(1, 1, 1)); 711 | } 712 | 80% { 713 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 714 | @include transform(scale3d(1.03, 1.03, 1.03)); 715 | } 716 | 100% { 717 | @include bezier($easeOutQuad); 718 | @include transform(scale3d(1, 1, 1)); 719 | } 720 | } 721 | 722 | .popInLeft { 723 | @include name(popInLeft); 724 | } 725 | 726 | @keyframes popInLeft { 727 | 0% { 728 | opacity: 0; 729 | @include transform(translate3d(-200px, 0, 0) scale3d(.1, .1, .1)); 730 | } 731 | 40% { 732 | opacity: 1; 733 | @include transform(translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08)); 734 | @include bezier($easeInSine); 735 | } 736 | 60% { 737 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 738 | @include transform(scale3d(1, 1, 1)); 739 | } 740 | 80% { 741 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 742 | @include transform(scale3d(1.03, 1.03, 1.03)); 743 | } 744 | 100% { 745 | @include bezier($easeOutQuad); 746 | @include transform(scale3d(1, 1, 1)); 747 | } 748 | } 749 | 750 | .popInRight { 751 | @include name(popInRight); 752 | } 753 | 754 | @keyframes popInRight { 755 | 0% { 756 | @include transform(translate3d(200px, 0, 0) scale3d(.1, .1, .1)); 757 | opacity: 0; 758 | } 759 | 40% { 760 | opacity: 1; 761 | @include bezier($easeInSine); 762 | @include transform(translate3d(0,0,0) scale3d(1.08, 1.08, 1.08)); 763 | } 764 | 60% { 765 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 766 | @include transform(scale3d(1, 1, 1)); 767 | } 768 | 80% { 769 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 770 | @include transform(scale3d(1.03, 1.03, 1.03)); 771 | } 772 | 100% { 773 | @include bezier($easeOutQuad); 774 | @include transform(scale3d(1, 1, 1)); 775 | } 776 | } 777 | 778 | .popInTop { 779 | @include name(popInTop); 780 | } 781 | 782 | @keyframes popInTop { 783 | 0% { 784 | @include transform(translate3d(0,-200px,0) scale3d(.1, .1, .1)); 785 | opacity: 0; 786 | } 787 | 40% { 788 | opacity: 1; 789 | @include bezier($easeInSine); 790 | @include transform(translate3d(0,0,0) scale3d(1.08, 1.08, 1.08)); 791 | } 792 | 60% { 793 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 794 | @include transform(translate3d(0,0,0) scale3d(1, 1, 1)); 795 | } 796 | 80% { 797 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 798 | @include transform(translate3d(0,0,0) scale3d(1.03, 1.03, 1.03)); 799 | } 800 | 100% { 801 | @include bezier($easeOutQuad); 802 | @include transform(translate3d(0,0,0) scale3d(1, 1, 1)); 803 | } 804 | } 805 | 806 | .popInBottom { 807 | @include name(popInBottom); 808 | } 809 | 810 | @keyframes popInBottom { 811 | 0% { 812 | @include transform(translate3d(0,200px,0) scale3d(.1, .1, .1)); 813 | opacity: 0; 814 | } 815 | 40% { 816 | opacity: 1; 817 | @include bezier($easeInSine); 818 | @include transform(translate3d(0,0,0) scale3d(1.08, 1.08, 1.08)); 819 | } 820 | 60% { 821 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 822 | @include transform(translate3d(0,0,0) scale3d(1, 1, 1)); 823 | } 824 | 80% { 825 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 826 | @include transform(translate3d(0,0,0) scale3d(1.03, 1.03, 1.03)); 827 | } 828 | 100% { 829 | @include bezier($easeOutQuad); 830 | @include transform(translate3d(0,0,0) scale3d(1, 1, 1)); 831 | } 832 | } 833 | 834 | 835 | .popOut { 836 | @include name(popOut); 837 | @include duration(.5s); 838 | } 839 | 840 | @keyframes popOut { 841 | 0% { 842 | @include bezier($easeOutQuad); 843 | @include transform(scale3d(1.0, 1.0, 1.0)); 844 | } 845 | 60% { 846 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 847 | @include transform(scale3d(1.08, 1.08, 1.08)); 848 | } 849 | 80% { opacity: 1; 850 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 851 | } 852 | 853 | 854 | 100% { 855 | opacity: 0; 856 | @include bezier($easeInSine); 857 | @include transform(scale3d(.3, .3, .3)); 858 | 859 | } 860 | } 861 | 862 | .popOutLeft { 863 | @include name(popOutLeft); 864 | @include duration(.5s); 865 | } 866 | 867 | @keyframes popOutLeft { 868 | 0% { 869 | @include bezier($easeOutQuad); 870 | @include transform(scale3d(1, 1, 1) translate3d(0,0,0)); 871 | @include transformOrigin(left center); 872 | } 873 | 874 | 40% { 875 | opacity: 1; 876 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 877 | @include transform(scale3d(1.08, 1.08, 1.08) translate3d(0,0,0)); 878 | } 879 | 880 | 881 | 100% { 882 | opacity: 0; 883 | @include bezier($easeInSine); 884 | @include transform(scale3d(.5, .5, .5) translate3d(-200px,0,0)); 885 | 886 | } 887 | } 888 | 889 | .popOutRight { 890 | @include name(popOutRight); 891 | @include backFaceVisibility(hidden); 892 | @include duration(.5s); 893 | } 894 | 895 | @keyframes popOutRight { 896 | 0% { 897 | @include bezier($easeOutQuad); 898 | @include transform(scale3d(1, 1, 1) translate3d(0,0,0)); 899 | @include transformOrigin(right center); 900 | } 901 | 902 | 40% { 903 | opacity: 1; 904 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 905 | @include transform(scale3d(1.08, 1.08, 1.08) translate3d(0,0,0)); 906 | } 907 | 908 | 100% { 909 | opacity: 0; 910 | @include bezier($easeInSine); 911 | @include transform(scale3d(.5, .5, .5) translate3d(200px,0,0)); 912 | 913 | } 914 | } 915 | 916 | .popOutTop { 917 | @include name(popOutTop); 918 | @include backFaceVisibility(hidden); 919 | @include duration(.5s); 920 | } 921 | 922 | @keyframes popOutTop { 923 | 0% { 924 | @include bezier($easeOutQuad); 925 | @include transform(scale3d(1, 1, 1) translate3d(0,0,0)); 926 | @include transformOrigin(top center); 927 | } 928 | 929 | 40% { 930 | opacity: 1; 931 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 932 | @include transform(scale3d(1.08, 1.08, 1.08) translate3d(0,0,0)); 933 | } 934 | 935 | 100% { 936 | opacity: 0; 937 | @include bezier($easeInSine); 938 | @include transform(scale3d(.5, .5, .5) translate3d(0,-400px,0)); 939 | 940 | 941 | } 942 | } 943 | 944 | .popOutBottom { 945 | @include name(popOutBottom); 946 | @include backFaceVisibility(hidden); 947 | @include duration(.5s); 948 | } 949 | 950 | @keyframes popOutBottom { 951 | 0% { 952 | @include bezier($easeOutQuad); 953 | @include transform(scale3d(1, 1, 1) translate3d(0,0,0)); 954 | @include transformOrigin(bottom center); 955 | } 956 | 957 | 40% { 958 | opacity: 1; 959 | @include bezier(cubic-bezier(0.420, 0.000, 0.580, 1.000)); 960 | @include transform(scale3d(1.08, 1.08, 1.08) translate3d(0,0,0)); 961 | } 962 | 963 | 100% { 964 | opacity: 0; 965 | @include bezier($easeInSine); 966 | @include transform(scale3d(.5, .5, .5) translate3d(0,400px,0)); 967 | 968 | 969 | } 970 | } 971 | 972 | //********** 973 | 974 | 975 | //------------------------------------------------------------------------------ 976 | // FLIP ANIMATIONS 977 | //------------------------------------------------------------------------------ 978 | 979 | .flip { 980 | @include name(flip); 981 | } 982 | 983 | @keyframes flip { 984 | from { 985 | @include transform(perspective(400px) rotateY(-360deg) scale3d(1, 1, 1)); 986 | @include bezier($easeOutQuad); 987 | } 988 | 50% { 989 | @include transform(perspective(400px)rotateY(-180deg) scale3d(1.2, 1.2, 1.2)); 990 | @include bezier($easeOutQuad); 991 | } 992 | to { 993 | @include transform(perspective(400px) rotateY(-0deg) scale3d(1, 1, 1)); 994 | @include bezier($easeInExpo); 995 | } 996 | } 997 | 998 | .flipInX { 999 | @include name(flipInX); 1000 | @include duration(1s); 1001 | } 1002 | 1003 | @keyframes flipInX { 1004 | from { 1005 | opacity: 0; 1006 | @include transform(perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2)); 1007 | } 1008 | 50% { 1009 | opacity: 1; 1010 | @include bezier($easeInOutQuad); 1011 | @include transform(perspective(400px) rotateX(-20deg) scale3d(1, 1, 1)); 1012 | } 1013 | to { 1014 | 1015 | @include transform(perspective(400px) rotateX(0deg) scale3d(1, 1, 1)); 1016 | } 1017 | } 1018 | 1019 | .flipInY { 1020 | @include name(flipInY); 1021 | @include duration(1s); 1022 | } 1023 | 1024 | @keyframes flipInY { 1025 | from { 1026 | opacity: 0; 1027 | @include transform(perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2)); 1028 | } 1029 | 50% { 1030 | opacity: 1; 1031 | @include bezier($easeInOutQuad); 1032 | @include transform(perspective(400px) rotateY(-20deg) scale3d(1, 1, 1)); 1033 | } 1034 | to { 1035 | @include transform(perspective(400px) rotateY(0deg) scale3d(1, 1, 1)); 1036 | } 1037 | } 1038 | 1039 | .flipOutX { 1040 | @include name(flipOutX); 1041 | } 1042 | 1043 | @keyframes flipOutX { 1044 | 1045 | from { 1046 | @include transform(perspective(400px) rotateX(0deg) scale3d(1, 1, 1)); 1047 | } 1048 | 60% { 1049 | opacity: 1; 1050 | @include bezier($easeInOutQuad); 1051 | @include transform(perspective(400px) rotateX(-30deg) scale3d(1, 1, 1)); 1052 | } 1053 | to { 1054 | opacity: 0; 1055 | @include transform(perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2)); 1056 | } 1057 | 1058 | } 1059 | 1060 | .flipOutY { 1061 | @include name(flipOutY); 1062 | } 1063 | 1064 | @keyframes flipOutY { 1065 | 1066 | from { 1067 | @include transform(perspective(400px) rotateY(0deg) scale3d(1, 1, 1)); 1068 | } 1069 | 60% { 1070 | opacity: 1; 1071 | @include bezier($easeInOutQuad); 1072 | @include transform(perspective(400px) rotateY(-30deg) scale3d(1, 1, 1)); 1073 | } 1074 | to { 1075 | opacity: 0; 1076 | @include transform(perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2)); 1077 | } 1078 | 1079 | } 1080 | 1081 | 1082 | //------------------------------------------------------------------------------ 1083 | // FADE ANIMATIONS 1084 | //------------------------------------------------------------------------------ 1085 | 1086 | .fadeIn { 1087 | @include name(fadeIn); 1088 | @include bezier($easeInOutQuad); 1089 | } 1090 | 1091 | @keyframes fadeIn { 1092 | 0% { 1093 | opacity: 0; 1094 | } 1095 | 100% { 1096 | opacity: 1; 1097 | } 1098 | } 1099 | 1100 | 1101 | .fadeInRight { 1102 | @include name(fadeInRight); 1103 | @include bezier($easeInOutQuad); 1104 | } 1105 | 1106 | @keyframes fadeInRight { 1107 | 0% { 1108 | @include transform(translate3d(400px,0,0)); 1109 | opacity: 0; 1110 | } 1111 | 100% { 1112 | @include transform(translate3d(0,0,0)); 1113 | opacity: 1; 1114 | } 1115 | } 1116 | 1117 | .fadeInLeft { 1118 | @include name(fadeInLeft); 1119 | @include bezier($easeInOutQuad); 1120 | } 1121 | 1122 | @keyframes fadeInLeft { 1123 | 0% { 1124 | @include transform(translate3d(-400px,0,0)); 1125 | opacity: 0; 1126 | } 1127 | 100% { 1128 | @include transform(translate3d(0,0,0)); 1129 | opacity: 1; 1130 | } 1131 | } 1132 | 1133 | .fadeInTop { 1134 | @include name(fadeInTop); 1135 | @include bezier($easeInOutQuad); 1136 | } 1137 | 1138 | @keyframes fadeInTop { 1139 | 0% { 1140 | @include transform(translate3d(0,-400px,0)); 1141 | opacity: 0; 1142 | } 1143 | 50% { 1144 | opacity: 0.2; 1145 | } 1146 | 100% { 1147 | @include transform(translate3d(0,0,0)); 1148 | opacity: 1; 1149 | } 1150 | } 1151 | 1152 | .fadeInBottom { 1153 | @include name(fadeInBottom); 1154 | @include bezier($easeInOutQuad); 1155 | } 1156 | 1157 | @keyframes fadeInBottom { 1158 | 0% { 1159 | @include transform(translate3d(0,400px,0)); 1160 | opacity: 0; 1161 | } 1162 | 50% { 1163 | opacity: 0.2; 1164 | } 1165 | 100% { 1166 | @include transform(translate3d(0,0,0)); 1167 | opacity: 1; 1168 | } 1169 | } 1170 | 1171 | .fadeOut { 1172 | @include name(fadeOut); 1173 | @include bezier($easeInOutQuad); 1174 | } 1175 | 1176 | @keyframes fadeOut { 1177 | 0% { 1178 | opacity: 1; 1179 | } 1180 | 100% { 1181 | opacity: 0; 1182 | } 1183 | } 1184 | 1185 | .fadeOutLeft { 1186 | @include name(fadeOutLeft); 1187 | @include bezier($easeInOutQuad); 1188 | } 1189 | 1190 | @keyframes fadeOutLeft { 1191 | 0% { 1192 | @include transform(translate3d(0,0,0)); 1193 | opacity: 1; 1194 | } 1195 | 100% { 1196 | @include transform(translate3d(-400px,0,0)); 1197 | opacity: 0; 1198 | } 1199 | } 1200 | 1201 | .fadeOutRight { 1202 | @include name(fadeOutRight); 1203 | @include bezier($easeInOutQuad); 1204 | } 1205 | 1206 | @keyframes fadeOutRight { 1207 | 0% { 1208 | @include transform(translate3d(0,0,0)); 1209 | opacity: 1; 1210 | } 1211 | 100% { 1212 | @include transform(translate3d(400px,0,0)); 1213 | opacity: 0; 1214 | } 1215 | } 1216 | 1217 | .fadeOutTop { 1218 | @include name(fadeOutTop); 1219 | @include bezier($easeInOutQuad); 1220 | } 1221 | 1222 | @keyframes fadeOutTop { 1223 | 0% { 1224 | @include transform(translate3d(0,0,0)); 1225 | opacity: 1; 1226 | } 1227 | 40% { 1228 | opacity: 0.2; 1229 | } 1230 | 100% { 1231 | @include transform(translate3d(0,-300px,0)); 1232 | opacity: 0; 1233 | } 1234 | } 1235 | 1236 | .fadeOutBottom { 1237 | @include name(fadeOutBottom); 1238 | @include bezier($easeInOutQuad); 1239 | } 1240 | 1241 | @keyframes fadeOutBottom { 1242 | 0% { 1243 | @include transform(translate3d(0,0,0)); 1244 | opacity: 1; 1245 | } 1246 | 40% { 1247 | opacity: 0.2; 1248 | } 1249 | 100% { 1250 | @include transform(translate3d(0,300px,0)); 1251 | opacity: 0; 1252 | } 1253 | } 1254 | 1255 | 1256 | //------------------------------------------------------------------------------ 1257 | // DRIVE ANIMATIONS 1258 | //------------------------------------------------------------------------------ 1259 | 1260 | .driveInLeft { 1261 | @include name(driveInLeft); 1262 | @include duration(1s); 1263 | } 1264 | 1265 | @keyframes driveInLeft { 1266 | 0% { 1267 | opacity: 0; 1268 | @include bezier($easeOutQuart); 1269 | @include transform(translate3d(-400px,0,0)); 1270 | } 1271 | 30% { opacity: 1; } 1272 | 60% { 1273 | @include bezier($easeInCubic); 1274 | @include transform(translate3d(30px,0,0)); 1275 | } 1276 | 100% { 1277 | @include bezier($easeInOutCubic); 1278 | @include transform(translate3d(0,0,0)); 1279 | } 1280 | } 1281 | 1282 | .driveInRight { 1283 | @include name(driveInRight); 1284 | @include duration(1s); 1285 | } 1286 | 1287 | @keyframes driveInRight { 1288 | 0% { 1289 | opacity: 0; 1290 | @include bezier($easeOutQuart); 1291 | @include transform(translate3d(400px,0,0)); 1292 | } 1293 | 30% { opacity: 1; } 1294 | 60% { 1295 | @include bezier($easeInCubic); 1296 | @include transform(translate3d(-30px,0,0)); 1297 | } 1298 | 100% { 1299 | @include bezier($easeInOutCubic); 1300 | @include transform(translate3d(0,0,0)); 1301 | } 1302 | } 1303 | 1304 | .driveInTop { 1305 | @include name(driveInTop); 1306 | @include duration(1s); 1307 | } 1308 | 1309 | @keyframes driveInTop { 1310 | 0% { 1311 | opacity: 0; 1312 | @include bezier($easeOutQuart); 1313 | @include transform(translate3d(0,-400px,0)); 1314 | } 1315 | 30% { opacity: 1; } 1316 | 60% { 1317 | @include bezier($easeInCubic); 1318 | @include transform(translate3d(0,30px,0)); 1319 | } 1320 | 100% { 1321 | @include bezier($easeInOutCubic); 1322 | @include transform(translate3d(0,0,0)); 1323 | } 1324 | } 1325 | 1326 | 1327 | .driveInBottom { 1328 | @include name(driveInBottom); 1329 | @include duration(1s); 1330 | } 1331 | 1332 | @keyframes driveInBottom { 1333 | 0% { 1334 | opacity: 0; 1335 | @include bezier($easeOutQuart); 1336 | @include transform(translate3d(0,300px,0)); 1337 | } 1338 | 30% { opacity: 1; } 1339 | 60% { 1340 | @include bezier($easeInCubic); 1341 | @include transform(translate3d(0,-30px,0)); 1342 | } 1343 | 100% { 1344 | @include bezier($easeInOutCubic); 1345 | @include transform(translate3d(0,0,0)); 1346 | } 1347 | } 1348 | 1349 | .driveOutLeft { 1350 | @include name(driveOutLeft); 1351 | @include duration(1s); 1352 | } 1353 | 1354 | @keyframes driveOutLeft { 1355 | 1356 | 0% { 1357 | @include bezier($easeOutQuart); 1358 | @include transform(translate3d(0,0,0)); 1359 | } 1360 | 30% { 1361 | @include bezier($easeInCubic); 1362 | @include transform(translate3d(30px,0,0)); 1363 | } 1364 | 60% { 1365 | opacity: 1; 1366 | } 1367 | 100% { 1368 | opacity: 0; 1369 | @include bezier($easeOutQuart); 1370 | @include transform(translate3d(-400px,0,0)); 1371 | } 1372 | 1373 | } 1374 | 1375 | .driveOutRight { 1376 | @include name(driveOutRight); 1377 | @include duration(1s); 1378 | } 1379 | 1380 | @keyframes driveOutRight { 1381 | 1382 | 0% { 1383 | @include bezier($easeOutQuart); 1384 | @include transform(translate3d(0,0,0)); 1385 | } 1386 | 30% { 1387 | @include bezier($easeInCubic); 1388 | @include transform(translate3d(-30px,0,0)); 1389 | } 1390 | 60% { 1391 | opacity: 1; 1392 | } 1393 | 100% { 1394 | opacity: 0; 1395 | @include bezier($easeOutQuart); 1396 | @include transform(translate3d(400px,0,0)); 1397 | } 1398 | 1399 | } 1400 | 1401 | .driveOutTop { 1402 | @include name(driveOutTop); 1403 | @include duration(1s); 1404 | } 1405 | 1406 | @keyframes driveOutTop { 1407 | 1408 | 0% { 1409 | @include bezier($easeOutQuart); 1410 | @include transform(translate3d(0,0,0)); 1411 | } 1412 | 30% { 1413 | @include bezier($easeInCubic); 1414 | @include transform(translate3d(0,30px,0)); 1415 | } 1416 | 60% { 1417 | opacity: 1; 1418 | } 1419 | 100% { 1420 | opacity: 0; 1421 | @include bezier($easeOutQuart); 1422 | @include transform(translate3d(0,-400px,0)); 1423 | } 1424 | 1425 | } 1426 | 1427 | .driveOutBottom { 1428 | @include name(driveOutBottom); 1429 | @include duration(1s); 1430 | } 1431 | 1432 | @keyframes driveOutBottom { 1433 | 1434 | 0% { 1435 | @include bezier($easeOutQuart); 1436 | @include transform(translate3d(0,0,0)); 1437 | } 1438 | 30% { 1439 | @include bezier($easeInCubic); 1440 | @include transform(translate3d(0,-30px,0)); 1441 | } 1442 | 60% { 1443 | opacity: 1; 1444 | } 1445 | 100% { 1446 | opacity: 0; 1447 | @include bezier($easeOutQuart); 1448 | @include transform(translate3d(0,300px,0)); 1449 | } 1450 | 1451 | } 1452 | 1453 | 1454 | //------------------------------------------------------------------------------ 1455 | // SPIN ANIMATIONS 1456 | //------------------------------------------------------------------------------ 1457 | 1458 | .spin { 1459 | @include name(spin); 1460 | @include duration(1.2s); 1461 | } 1462 | 1463 | @keyframes spin { 1464 | 0% { 1465 | @include bezier($easeInQuint); 1466 | @include transform(rotateZ(0deg)); 1467 | @include transformOrigin(center center); 1468 | } 1469 | 20% { 1470 | @include bezier($easeOutQuart); 1471 | @include transform(rotateZ(-20deg)); 1472 | @include transformOrigin(center center); 1473 | } 1474 | 70% { 1475 | @include bezier($easeInOut); 1476 | @include transform(rotateZ(380deg)); 1477 | @include transformOrigin(center center); 1478 | } 1479 | 100% { 1480 | @include bezier($easeInSine); 1481 | @include transform(rotateZ(360deg)); 1482 | @include transformOrigin(center center); 1483 | } 1484 | } 1485 | 1486 | .spinIn { 1487 | @include name(spinIn); 1488 | @include duration(1s); 1489 | } 1490 | 1491 | @keyframes spinIn { 1492 | 0% { 1493 | opacity: 0; 1494 | @include bezier($easeOutQuint); 1495 | @include transform(rotateZ(0deg) scale3d(0, 0, 0)); 1496 | @include transformOrigin(center center); 1497 | } 1498 | 50% {opacity: 1} 1499 | 70% { 1500 | @include transform(rotateZ(380deg) scale3d(1, 1, 1)); 1501 | @include transformOrigin(center center); 1502 | } 1503 | 100% { 1504 | @include transform(rotateZ(360deg) scale3d(1, 1, 1)); 1505 | @include transformOrigin(center center); 1506 | } 1507 | } 1508 | 1509 | .spinOut { 1510 | @include name(spinOut); 1511 | @include duration(1s); 1512 | } 1513 | 1514 | @keyframes spinOut { 1515 | 1516 | 0% { 1517 | @include bezier($easeOutQuint); 1518 | @include transform(rotateZ(0deg) scale3d(1, 1, 1)); 1519 | @include transformOrigin(center center); 1520 | } 1521 | 20% { 1522 | opacity: 1; 1523 | @include bezier($easeOutQuart); 1524 | @include transform(rotateZ(-20deg) scale3d(1, 1, 1)); 1525 | @include transformOrigin(center center); 1526 | } 1527 | 30% { opacity: 1; } 1528 | 100% { 1529 | opacity: 0; 1530 | @include bezier($easeInSine); 1531 | @include transform(rotateZ(360deg) scale3d(0, 0, 0)); 1532 | @include transformOrigin(center center); 1533 | } 1534 | } 1535 | 1536 | 1537 | //------------------------------------------------------------------------------ 1538 | // SWOOP ANIMATIONS 1539 | //------------------------------------------------------------------------------ 1540 | 1541 | .swoopInLeft { 1542 | @include name(swoopInLeft); 1543 | @include duration(.5s); 1544 | } 1545 | 1546 | @keyframes swoopInLeft { 1547 | 0% { 1548 | opacity: 0; 1549 | @include bezier($easeOutCubic); 1550 | @include transform(scaleX(1.5) translate3d(-400px,0,0)); 1551 | } 1552 | 40% { 1553 | opacity: 1; 1554 | @include bezier($easeInOut); 1555 | @include transform(scaleX(1.2) translate3d(0,0,0)); 1556 | } 1557 | 65% { 1558 | @include transform(scaleX(1) translate3d(20px,0,0) ); 1559 | } 1560 | 100% { 1561 | @include bezier($easeInOut); 1562 | @include transform(scaleX(1) translate3d(0,0,0)); 1563 | } 1564 | } 1565 | 1566 | .swoopInRight { 1567 | @include name(swoopInRight); 1568 | @include duration(.5s); 1569 | } 1570 | 1571 | @keyframes swoopInRight { 1572 | 0% { 1573 | opacity: 0; 1574 | @include bezier($easeOutCubic); 1575 | @include transform(scaleX(1.5) translate3d(400px,0,0)); 1576 | } 1577 | 40% { 1578 | opacity: 1; 1579 | @include bezier($easeInOut); 1580 | @include transform(scaleX(1.2) translate3d(0,0,0)); 1581 | } 1582 | 65% { 1583 | @include transform(scaleX(1) translate3d(-20px,0,0) ); 1584 | } 1585 | 100% { 1586 | @include bezier($easeInOut); 1587 | @include transform(scaleX(1) translate3d(0,0,0)); 1588 | } 1589 | } 1590 | 1591 | .swoopInTop { 1592 | @include name(swoopInTop); 1593 | @include duration(.5s); 1594 | } 1595 | 1596 | @keyframes swoopInTop { 1597 | 0% { 1598 | opacity: 0; 1599 | @include bezier($easeOutCubic); 1600 | @include transform(scaleY(1.5) translate3d(0,-400px,0)); 1601 | } 1602 | 40% { 1603 | opacity: 1; 1604 | @include bezier($easeInOut); 1605 | @include transform(scaleY(1.2) translate3d(0,0,0)); 1606 | } 1607 | 65% { 1608 | @include transform(scaleY(1) translate3d(0,20px,0) ); 1609 | } 1610 | 100% { 1611 | @include bezier($easeInOut); 1612 | @include transform(scaleY(1) translate3d(0,0,0)); 1613 | } 1614 | } 1615 | 1616 | .swoopInBottom { 1617 | @include name(swoopInBottom); 1618 | @include duration(.5s); 1619 | } 1620 | 1621 | @keyframes swoopInBottom { 1622 | 0% { 1623 | opacity: 0; 1624 | @include bezier($easeOutCubic); 1625 | @include transform(scaleY(1.5) translate3d(0,250px,0)); 1626 | } 1627 | 40% { 1628 | opacity: 1; 1629 | @include bezier($easeInOut); 1630 | @include transform(scaleY(1.2) translate3d(0,0,0)); 1631 | } 1632 | 65% { 1633 | @include transform(scaleY(1) translate3d(0,-20px,0) ); 1634 | } 1635 | 100% { 1636 | @include bezier($easeInOut); 1637 | @include transform(scaleY(1) translate3d(0,0,0)); 1638 | } 1639 | } 1640 | 1641 | .swoopOutLeft { 1642 | @include name(swoopOutLeft); 1643 | @include duration(.5s); 1644 | } 1645 | 1646 | @keyframes swoopOutLeft { 1647 | 1648 | 0% { 1649 | @include bezier($easeInOut); 1650 | @include transform(scaleX(1) translate3d(0,0,0)); 1651 | } 1652 | 40% { 1653 | opacity: 1; 1654 | @include transform(scaleX(1) translate3d(20px,0,0) ); 1655 | } 1656 | 60% { 1657 | @include bezier($easeInOut); 1658 | @include transform(scaleX(1.2) translate3d(0,0,0)); 1659 | } 1660 | 100% { 1661 | opacity: 0; 1662 | @include bezier($easeOutCubic); 1663 | @include transform(scaleX(1.5) translate3d(-400px,0,0)); 1664 | } 1665 | } 1666 | 1667 | .swoopOutRight { 1668 | @include name(swoopOutRight); 1669 | @include duration(.5s); 1670 | } 1671 | 1672 | @keyframes swoopOutRight { 1673 | 1674 | 0% { 1675 | @include bezier($easeInOut); 1676 | @include transform(scaleX(1) translate3d(0,0,0)); 1677 | } 1678 | 40% { 1679 | opacity: 1; 1680 | @include transform(scaleX(1) translate3d(-20px,0,0) ); 1681 | } 1682 | 60% { 1683 | @include bezier($easeInOut); 1684 | @include transform(scaleX(1.2) translate3d(0,0,0)); 1685 | } 1686 | 100% { 1687 | opacity: 0; 1688 | @include bezier($easeOutCubic); 1689 | @include transform(scaleX(1.5) translate3d(400px,0,0)); 1690 | } 1691 | } 1692 | 1693 | .swoopOutTop { 1694 | @include name(swoopOutTop); 1695 | @include duration(.5s); 1696 | } 1697 | 1698 | @keyframes swoopOutTop { 1699 | 1700 | 0% { 1701 | @include bezier($easeInOut); 1702 | @include transform(scaleY(1) translate3d(0,0,0)); 1703 | } 1704 | 40% { 1705 | opacity: 1; 1706 | @include transform(scaleY(1) translate3d(0,20px,0) ); 1707 | } 1708 | 60% { 1709 | @include bezier($easeInOut); 1710 | @include transform(scaleY(1.2) translate3d(0,0,0)); 1711 | } 1712 | 100% { 1713 | opacity: 0; 1714 | @include bezier($easeOutCubic); 1715 | @include transform(scaleY(1.5) translate3d(0,-400px,0)); 1716 | } 1717 | } 1718 | 1719 | .swoopOutBottom { 1720 | @include name(swoopOutBottom); 1721 | @include duration(.5s); 1722 | } 1723 | 1724 | @keyframes swoopOutBottom { 1725 | 1726 | 0% { 1727 | @include bezier($easeInOut); 1728 | @include transform(scaleY(1) translate3d(0,0,0)); 1729 | } 1730 | 40% { 1731 | opacity: 1; 1732 | @include transform(scaleY(1) translate3d(0,-20px,0) ); 1733 | } 1734 | 60% { 1735 | @include bezier($easeInOut); 1736 | @include transform(scaleY(1.2) translate3d(0,0,0)); 1737 | } 1738 | 100% { 1739 | opacity: 0; 1740 | @include bezier($easeOutCubic); 1741 | @include transform(scaleY(1.5) translate3d(0,200px,0)); 1742 | } 1743 | } 1744 | 1745 | 1746 | 1747 | //------------------------------------------------------------------------------ 1748 | // FOLD ANIMATIONS 1749 | //------------------------------------------------------------------------------ 1750 | 1751 | .fold { 1752 | @include name(fold); 1753 | } 1754 | 1755 | @keyframes fold { 1756 | 0% { 1757 | @include bezier($easeOutQuad); 1758 | @include transform(scale3d(1,1,1)); 1759 | } 1760 | 30% { 1761 | @include bezier($easeInOutQuad); 1762 | @include transform(scale3d(1,.4,1)); 1763 | } 1764 | 60% { 1765 | opacity: 1; 1766 | @include bezier($easeInOutQuad); 1767 | @include transform(scale3d(.4,.4,1)); 1768 | } 1769 | 100% { 1770 | opacity: 0; 1771 | @include bezier($easeInQuad); 1772 | @include transform(scale3d(.2,.2,.2)); 1773 | } 1774 | } 1775 | 1776 | 1777 | .unfold { 1778 | @include name(unfold); 1779 | } 1780 | 1781 | @keyframes unfold { 1782 | 0% { 1783 | opacity: 0; 1784 | @include bezier($easeOutQuad); 1785 | @include transform(scale3d(0,0,0)); 1786 | } 1787 | 30% { 1788 | opacity: 1; 1789 | @include bezier($easeInOutQuad); 1790 | @include transform(scale3d(.4,.4,1)); 1791 | } 1792 | 60% { 1793 | @include bezier($easeInOutQuad); 1794 | @include transform(scale3d(.4,1,1)); 1795 | } 1796 | 100% { 1797 | @include bezier($easeInQuad); 1798 | @include transform(scale3d(1,1,1)); 1799 | } 1800 | } 1801 | 1802 | 1803 | //------------------------------------------------------------------------------ 1804 | // DELAY CLASSES 1805 | //------------------------------------------------------------------------------ 1806 | 1807 | @for $i from 1 through 9 { 1808 | .delay-#{$i}#{"00"} { @include delay(#{"."}#{$i}#{"s"}); } 1809 | .delay-#{$i}#{"50"} { @include delay(#{$i}#{"50ms"}); } 1810 | .duration-#{$i}#{"00"} { @include duration(#{"."}#{$i}#{"s"}); } 1811 | .duration-#{$i}#{"50"} { @include duration(#{$i}#{"50ms"}); } 1812 | } 1813 | 1814 | @for $i from 1 through 5 { 1815 | .delay-#{$i}#{"000"} { @include delay(#{$i}#{"s"}); } 1816 | .delay-#{$i}#{"250"} { @include delay(#{$i}#{"250ms"}); } 1817 | .delay-#{$i}#{"500"} { @include delay(#{$i}#{".5"}#{"s"}); } 1818 | .delay-#{$i}#{"750"} { @include delay(#{$i}#{"750ms"}); } 1819 | .duration-#{$i}#{"000"} { @include duration(#{$i}#{"s"}); } 1820 | .duration-#{$i}#{"250"} { @include duration(#{$i}#{"250ms"}); } 1821 | .duration-#{$i}#{"500"} { @include duration(#{$i}#{".5"}#{"s"}); } 1822 | .duration-#{$i}#{"750"} { @include duration(#{$i}#{"750ms"}); } 1823 | } 1824 | 1825 | @for $i from 6 through 10 { 1826 | .duration-#{$i}#{"000"} { @include duration(#{$i}#{"s"}); } 1827 | .duration-#{$i}#{"250"} { @include duration(#{$i}#{"250ms"}); } 1828 | .duration-#{$i}#{"500"} { @include duration(#{$i}#{".5"}#{"s"}); } 1829 | .duration-#{$i}#{"750"} { @include duration(#{$i}#{"750ms"}); } 1830 | } --------------------------------------------------------------------------------