├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── bower.json ├── demo └── animate.css ├── index.html ├── package.json ├── riotAnimate.js └── riotAnimate.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | demo 29 | index.html 30 | riotAnimate.js 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Sartaj 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # riot-animate - Animate Riot 2 2 | [![npm status](http://img.shields.io/npm/v/riot-animate.svg)](https://www.npmjs.org/package/riot-animate) 3 | [![bower status](http://img.shields.io/bower/v/riot-animate.svg)]() 4 | 5 | This riot mixin is inspired by `ngAnimate`, and provides an animation system for mounts and unmounts. 6 | 7 | You can have an animation CSS class and use an ngAnimate style system, linking animations to `riot-enter`, `riot-enter-active`, `riot-leave`, and `riot-leave-active`. 8 | 9 | To have animations on unmount, you must `this.animateUnmount()`. This allows for a 'leave' animation to occur before unmounting, i.e. removing DOM elements from the file. 10 | 11 | In addition, you can easily use animate.css and use the attributes `animate`, `animate-enter`, and `animate-leave`, along with adding `animate-delay` and `animate-duration`. 12 | 13 | ## Example 14 | 15 | ```css 16 | 17 | .fade.riot-animate { 18 | transition:0.5s linear all; 19 | } 20 | 21 | .fade.riot-enter, 22 | .fade.riot-leave.riot-leave-active { 23 | opacity:0; 24 | } 25 | 26 | .fade.riot-enter.riot-enter-active , 27 | .fade.riot-leave { 28 | opacity:1; 29 | } 30 | 31 | ``` 32 | 33 | ```html 34 | 35 | 36 | 61 | 62 | 69 | 70 | ``` 71 | ## Contributing 72 | Not everything has been tested in extent yet. Please feel free to fork or submit an issue. 73 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "riot-animate", 3 | "version": "0.1.2", 4 | "homepage": "https://github.com/sartaj/riot-animate", 5 | "authors": [ 6 | "sartaj " 7 | ], 8 | "description": "Add animations to riot 2.", 9 | "main": "riotAnimate.min.js", 10 | "keywords": [ 11 | "riot", 12 | "animate", 13 | "animations", 14 | "riot2" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /demo/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | Animate.css - http://daneden.me/animate 5 | Licensed under the MIT license - http://opensource.org/licenses/MIT 6 | 7 | Copyright (c) 2015 Daniel Eden 8 | */ 9 | 10 | .animated { 11 | -webkit-animation-duration: 1s; 12 | animation-duration: 1s; 13 | -webkit-animation-fill-mode: both; 14 | animation-fill-mode: both; 15 | } 16 | 17 | .animated.infinite { 18 | -webkit-animation-iteration-count: infinite; 19 | animation-iteration-count: infinite; 20 | } 21 | 22 | .animated.hinge { 23 | -webkit-animation-duration: 2s; 24 | animation-duration: 2s; 25 | } 26 | 27 | .animated.bounceIn, 28 | .animated.bounceOut { 29 | -webkit-animation-duration: .75s; 30 | animation-duration: .75s; 31 | } 32 | 33 | .animated.flipOutX, 34 | .animated.flipOutY { 35 | -webkit-animation-duration: .75s; 36 | animation-duration: .75s; 37 | } 38 | 39 | @-webkit-keyframes bounce { 40 | 0%, 20%, 53%, 80%, 100% { 41 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 42 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 43 | -webkit-transform: translate3d(0,0,0); 44 | transform: translate3d(0,0,0); 45 | } 46 | 47 | 40%, 43% { 48 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 49 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 50 | -webkit-transform: translate3d(0, -30px, 0); 51 | transform: translate3d(0, -30px, 0); 52 | } 53 | 54 | 70% { 55 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 56 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 57 | -webkit-transform: translate3d(0, -15px, 0); 58 | transform: translate3d(0, -15px, 0); 59 | } 60 | 61 | 90% { 62 | -webkit-transform: translate3d(0,-4px,0); 63 | transform: translate3d(0,-4px,0); 64 | } 65 | } 66 | 67 | @keyframes bounce { 68 | 0%, 20%, 53%, 80%, 100% { 69 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 70 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 71 | -webkit-transform: translate3d(0,0,0); 72 | transform: translate3d(0,0,0); 73 | } 74 | 75 | 40%, 43% { 76 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 77 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 78 | -webkit-transform: translate3d(0, -30px, 0); 79 | transform: translate3d(0, -30px, 0); 80 | } 81 | 82 | 70% { 83 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 84 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 85 | -webkit-transform: translate3d(0, -15px, 0); 86 | transform: translate3d(0, -15px, 0); 87 | } 88 | 89 | 90% { 90 | -webkit-transform: translate3d(0,-4px,0); 91 | transform: translate3d(0,-4px,0); 92 | } 93 | } 94 | 95 | .bounce { 96 | -webkit-animation-name: bounce; 97 | animation-name: bounce; 98 | -webkit-transform-origin: center bottom; 99 | transform-origin: center bottom; 100 | } 101 | 102 | @-webkit-keyframes flash { 103 | 0%, 50%, 100% { 104 | opacity: 1; 105 | } 106 | 107 | 25%, 75% { 108 | opacity: 0; 109 | } 110 | } 111 | 112 | @keyframes flash { 113 | 0%, 50%, 100% { 114 | opacity: 1; 115 | } 116 | 117 | 25%, 75% { 118 | opacity: 0; 119 | } 120 | } 121 | 122 | .flash { 123 | -webkit-animation-name: flash; 124 | animation-name: flash; 125 | } 126 | 127 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 128 | 129 | @-webkit-keyframes pulse { 130 | 0% { 131 | -webkit-transform: scale3d(1, 1, 1); 132 | transform: scale3d(1, 1, 1); 133 | } 134 | 135 | 50% { 136 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 137 | transform: scale3d(1.05, 1.05, 1.05); 138 | } 139 | 140 | 100% { 141 | -webkit-transform: scale3d(1, 1, 1); 142 | transform: scale3d(1, 1, 1); 143 | } 144 | } 145 | 146 | @keyframes pulse { 147 | 0% { 148 | -webkit-transform: scale3d(1, 1, 1); 149 | transform: scale3d(1, 1, 1); 150 | } 151 | 152 | 50% { 153 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 154 | transform: scale3d(1.05, 1.05, 1.05); 155 | } 156 | 157 | 100% { 158 | -webkit-transform: scale3d(1, 1, 1); 159 | transform: scale3d(1, 1, 1); 160 | } 161 | } 162 | 163 | .pulse { 164 | -webkit-animation-name: pulse; 165 | animation-name: pulse; 166 | } 167 | 168 | @-webkit-keyframes rubberBand { 169 | 0% { 170 | -webkit-transform: scale3d(1, 1, 1); 171 | transform: scale3d(1, 1, 1); 172 | } 173 | 174 | 30% { 175 | -webkit-transform: scale3d(1.25, 0.75, 1); 176 | transform: scale3d(1.25, 0.75, 1); 177 | } 178 | 179 | 40% { 180 | -webkit-transform: scale3d(0.75, 1.25, 1); 181 | transform: scale3d(0.75, 1.25, 1); 182 | } 183 | 184 | 50% { 185 | -webkit-transform: scale3d(1.15, 0.85, 1); 186 | transform: scale3d(1.15, 0.85, 1); 187 | } 188 | 189 | 65% { 190 | -webkit-transform: scale3d(.95, 1.05, 1); 191 | transform: scale3d(.95, 1.05, 1); 192 | } 193 | 194 | 75% { 195 | -webkit-transform: scale3d(1.05, .95, 1); 196 | transform: scale3d(1.05, .95, 1); 197 | } 198 | 199 | 100% { 200 | -webkit-transform: scale3d(1, 1, 1); 201 | transform: scale3d(1, 1, 1); 202 | } 203 | } 204 | 205 | @keyframes rubberBand { 206 | 0% { 207 | -webkit-transform: scale3d(1, 1, 1); 208 | transform: scale3d(1, 1, 1); 209 | } 210 | 211 | 30% { 212 | -webkit-transform: scale3d(1.25, 0.75, 1); 213 | transform: scale3d(1.25, 0.75, 1); 214 | } 215 | 216 | 40% { 217 | -webkit-transform: scale3d(0.75, 1.25, 1); 218 | transform: scale3d(0.75, 1.25, 1); 219 | } 220 | 221 | 50% { 222 | -webkit-transform: scale3d(1.15, 0.85, 1); 223 | transform: scale3d(1.15, 0.85, 1); 224 | } 225 | 226 | 65% { 227 | -webkit-transform: scale3d(.95, 1.05, 1); 228 | transform: scale3d(.95, 1.05, 1); 229 | } 230 | 231 | 75% { 232 | -webkit-transform: scale3d(1.05, .95, 1); 233 | transform: scale3d(1.05, .95, 1); 234 | } 235 | 236 | 100% { 237 | -webkit-transform: scale3d(1, 1, 1); 238 | transform: scale3d(1, 1, 1); 239 | } 240 | } 241 | 242 | .rubberBand { 243 | -webkit-animation-name: rubberBand; 244 | animation-name: rubberBand; 245 | } 246 | 247 | @-webkit-keyframes shake { 248 | 0%, 100% { 249 | -webkit-transform: translate3d(0, 0, 0); 250 | transform: translate3d(0, 0, 0); 251 | } 252 | 253 | 10%, 30%, 50%, 70%, 90% { 254 | -webkit-transform: translate3d(-10px, 0, 0); 255 | transform: translate3d(-10px, 0, 0); 256 | } 257 | 258 | 20%, 40%, 60%, 80% { 259 | -webkit-transform: translate3d(10px, 0, 0); 260 | transform: translate3d(10px, 0, 0); 261 | } 262 | } 263 | 264 | @keyframes shake { 265 | 0%, 100% { 266 | -webkit-transform: translate3d(0, 0, 0); 267 | transform: translate3d(0, 0, 0); 268 | } 269 | 270 | 10%, 30%, 50%, 70%, 90% { 271 | -webkit-transform: translate3d(-10px, 0, 0); 272 | transform: translate3d(-10px, 0, 0); 273 | } 274 | 275 | 20%, 40%, 60%, 80% { 276 | -webkit-transform: translate3d(10px, 0, 0); 277 | transform: translate3d(10px, 0, 0); 278 | } 279 | } 280 | 281 | .shake { 282 | -webkit-animation-name: shake; 283 | animation-name: shake; 284 | } 285 | 286 | @-webkit-keyframes swing { 287 | 20% { 288 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 289 | transform: rotate3d(0, 0, 1, 15deg); 290 | } 291 | 292 | 40% { 293 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 294 | transform: rotate3d(0, 0, 1, -10deg); 295 | } 296 | 297 | 60% { 298 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 299 | transform: rotate3d(0, 0, 1, 5deg); 300 | } 301 | 302 | 80% { 303 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 304 | transform: rotate3d(0, 0, 1, -5deg); 305 | } 306 | 307 | 100% { 308 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 309 | transform: rotate3d(0, 0, 1, 0deg); 310 | } 311 | } 312 | 313 | @keyframes swing { 314 | 20% { 315 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 316 | transform: rotate3d(0, 0, 1, 15deg); 317 | } 318 | 319 | 40% { 320 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 321 | transform: rotate3d(0, 0, 1, -10deg); 322 | } 323 | 324 | 60% { 325 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 326 | transform: rotate3d(0, 0, 1, 5deg); 327 | } 328 | 329 | 80% { 330 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 331 | transform: rotate3d(0, 0, 1, -5deg); 332 | } 333 | 334 | 100% { 335 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 336 | transform: rotate3d(0, 0, 1, 0deg); 337 | } 338 | } 339 | 340 | .swing { 341 | -webkit-transform-origin: top center; 342 | transform-origin: top center; 343 | -webkit-animation-name: swing; 344 | animation-name: swing; 345 | } 346 | 347 | @-webkit-keyframes tada { 348 | 0% { 349 | -webkit-transform: scale3d(1, 1, 1); 350 | transform: scale3d(1, 1, 1); 351 | } 352 | 353 | 10%, 20% { 354 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 355 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 356 | } 357 | 358 | 30%, 50%, 70%, 90% { 359 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 360 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 361 | } 362 | 363 | 40%, 60%, 80% { 364 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 365 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 366 | } 367 | 368 | 100% { 369 | -webkit-transform: scale3d(1, 1, 1); 370 | transform: scale3d(1, 1, 1); 371 | } 372 | } 373 | 374 | @keyframes tada { 375 | 0% { 376 | -webkit-transform: scale3d(1, 1, 1); 377 | transform: scale3d(1, 1, 1); 378 | } 379 | 380 | 10%, 20% { 381 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 382 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 383 | } 384 | 385 | 30%, 50%, 70%, 90% { 386 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 387 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 388 | } 389 | 390 | 40%, 60%, 80% { 391 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 392 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 393 | } 394 | 395 | 100% { 396 | -webkit-transform: scale3d(1, 1, 1); 397 | transform: scale3d(1, 1, 1); 398 | } 399 | } 400 | 401 | .tada { 402 | -webkit-animation-name: tada; 403 | animation-name: tada; 404 | } 405 | 406 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 407 | 408 | @-webkit-keyframes wobble { 409 | 0% { 410 | -webkit-transform: none; 411 | transform: none; 412 | } 413 | 414 | 15% { 415 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 416 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 417 | } 418 | 419 | 30% { 420 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 421 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 422 | } 423 | 424 | 45% { 425 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 426 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 427 | } 428 | 429 | 60% { 430 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 431 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 432 | } 433 | 434 | 75% { 435 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 436 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 437 | } 438 | 439 | 100% { 440 | -webkit-transform: none; 441 | transform: none; 442 | } 443 | } 444 | 445 | @keyframes wobble { 446 | 0% { 447 | -webkit-transform: none; 448 | transform: none; 449 | } 450 | 451 | 15% { 452 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 453 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 454 | } 455 | 456 | 30% { 457 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 458 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 459 | } 460 | 461 | 45% { 462 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 463 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 464 | } 465 | 466 | 60% { 467 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 468 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 469 | } 470 | 471 | 75% { 472 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 473 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 474 | } 475 | 476 | 100% { 477 | -webkit-transform: none; 478 | transform: none; 479 | } 480 | } 481 | 482 | .wobble { 483 | -webkit-animation-name: wobble; 484 | animation-name: wobble; 485 | } 486 | 487 | @-webkit-keyframes jello { 488 | 0%, 11.1%, 100% { 489 | -webkit-transform: none; 490 | transform: none; 491 | } 492 | 493 | 22.2% { 494 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 495 | transform: skewX(-12.5deg) skewY(-12.5deg); 496 | } 497 | 498 | 33.3% { 499 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 500 | transform: skewX(6.25deg) skewY(6.25deg); 501 | } 502 | 503 | 44.4% { 504 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 505 | transform: skewX(-3.125deg) skewY(-3.125deg); 506 | } 507 | 508 | 55.5% { 509 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 510 | transform: skewX(1.5625deg) skewY(1.5625deg); 511 | } 512 | 513 | 66.6% { 514 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 515 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 516 | } 517 | 518 | 77.7% { 519 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 520 | transform: skewX(0.390625deg) skewY(0.390625deg); 521 | } 522 | 523 | 88.8% { 524 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 525 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 526 | } 527 | } 528 | 529 | @keyframes jello { 530 | 0%, 11.1%, 100% { 531 | -webkit-transform: none; 532 | transform: none; 533 | } 534 | 535 | 22.2% { 536 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 537 | transform: skewX(-12.5deg) skewY(-12.5deg); 538 | } 539 | 540 | 33.3% { 541 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 542 | transform: skewX(6.25deg) skewY(6.25deg); 543 | } 544 | 545 | 44.4% { 546 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 547 | transform: skewX(-3.125deg) skewY(-3.125deg); 548 | } 549 | 550 | 55.5% { 551 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 552 | transform: skewX(1.5625deg) skewY(1.5625deg); 553 | } 554 | 555 | 66.6% { 556 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 557 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 558 | } 559 | 560 | 77.7% { 561 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 562 | transform: skewX(0.390625deg) skewY(0.390625deg); 563 | } 564 | 565 | 88.8% { 566 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 567 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 568 | } 569 | } 570 | 571 | .jello { 572 | -webkit-animation-name: jello; 573 | animation-name: jello; 574 | -webkit-transform-origin: center; 575 | transform-origin: center; 576 | } 577 | 578 | @-webkit-keyframes bounceIn { 579 | 0%, 20%, 40%, 60%, 80%, 100% { 580 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 581 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 582 | } 583 | 584 | 0% { 585 | opacity: 0; 586 | -webkit-transform: scale3d(.3, .3, .3); 587 | transform: scale3d(.3, .3, .3); 588 | } 589 | 590 | 20% { 591 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 592 | transform: scale3d(1.1, 1.1, 1.1); 593 | } 594 | 595 | 40% { 596 | -webkit-transform: scale3d(.9, .9, .9); 597 | transform: scale3d(.9, .9, .9); 598 | } 599 | 600 | 60% { 601 | opacity: 1; 602 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 603 | transform: scale3d(1.03, 1.03, 1.03); 604 | } 605 | 606 | 80% { 607 | -webkit-transform: scale3d(.97, .97, .97); 608 | transform: scale3d(.97, .97, .97); 609 | } 610 | 611 | 100% { 612 | opacity: 1; 613 | -webkit-transform: scale3d(1, 1, 1); 614 | transform: scale3d(1, 1, 1); 615 | } 616 | } 617 | 618 | @keyframes bounceIn { 619 | 0%, 20%, 40%, 60%, 80%, 100% { 620 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 621 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 622 | } 623 | 624 | 0% { 625 | opacity: 0; 626 | -webkit-transform: scale3d(.3, .3, .3); 627 | transform: scale3d(.3, .3, .3); 628 | } 629 | 630 | 20% { 631 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 632 | transform: scale3d(1.1, 1.1, 1.1); 633 | } 634 | 635 | 40% { 636 | -webkit-transform: scale3d(.9, .9, .9); 637 | transform: scale3d(.9, .9, .9); 638 | } 639 | 640 | 60% { 641 | opacity: 1; 642 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 643 | transform: scale3d(1.03, 1.03, 1.03); 644 | } 645 | 646 | 80% { 647 | -webkit-transform: scale3d(.97, .97, .97); 648 | transform: scale3d(.97, .97, .97); 649 | } 650 | 651 | 100% { 652 | opacity: 1; 653 | -webkit-transform: scale3d(1, 1, 1); 654 | transform: scale3d(1, 1, 1); 655 | } 656 | } 657 | 658 | .bounceIn { 659 | -webkit-animation-name: bounceIn; 660 | animation-name: bounceIn; 661 | } 662 | 663 | @-webkit-keyframes bounceInDown { 664 | 0%, 60%, 75%, 90%, 100% { 665 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 666 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 667 | } 668 | 669 | 0% { 670 | opacity: 0; 671 | -webkit-transform: translate3d(0, -3000px, 0); 672 | transform: translate3d(0, -3000px, 0); 673 | } 674 | 675 | 60% { 676 | opacity: 1; 677 | -webkit-transform: translate3d(0, 25px, 0); 678 | transform: translate3d(0, 25px, 0); 679 | } 680 | 681 | 75% { 682 | -webkit-transform: translate3d(0, -10px, 0); 683 | transform: translate3d(0, -10px, 0); 684 | } 685 | 686 | 90% { 687 | -webkit-transform: translate3d(0, 5px, 0); 688 | transform: translate3d(0, 5px, 0); 689 | } 690 | 691 | 100% { 692 | -webkit-transform: none; 693 | transform: none; 694 | } 695 | } 696 | 697 | @keyframes bounceInDown { 698 | 0%, 60%, 75%, 90%, 100% { 699 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 700 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 701 | } 702 | 703 | 0% { 704 | opacity: 0; 705 | -webkit-transform: translate3d(0, -3000px, 0); 706 | transform: translate3d(0, -3000px, 0); 707 | } 708 | 709 | 60% { 710 | opacity: 1; 711 | -webkit-transform: translate3d(0, 25px, 0); 712 | transform: translate3d(0, 25px, 0); 713 | } 714 | 715 | 75% { 716 | -webkit-transform: translate3d(0, -10px, 0); 717 | transform: translate3d(0, -10px, 0); 718 | } 719 | 720 | 90% { 721 | -webkit-transform: translate3d(0, 5px, 0); 722 | transform: translate3d(0, 5px, 0); 723 | } 724 | 725 | 100% { 726 | -webkit-transform: none; 727 | transform: none; 728 | } 729 | } 730 | 731 | .bounceInDown { 732 | -webkit-animation-name: bounceInDown; 733 | animation-name: bounceInDown; 734 | } 735 | 736 | @-webkit-keyframes bounceInLeft { 737 | 0%, 60%, 75%, 90%, 100% { 738 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 739 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 740 | } 741 | 742 | 0% { 743 | opacity: 0; 744 | -webkit-transform: translate3d(-3000px, 0, 0); 745 | transform: translate3d(-3000px, 0, 0); 746 | } 747 | 748 | 60% { 749 | opacity: 1; 750 | -webkit-transform: translate3d(25px, 0, 0); 751 | transform: translate3d(25px, 0, 0); 752 | } 753 | 754 | 75% { 755 | -webkit-transform: translate3d(-10px, 0, 0); 756 | transform: translate3d(-10px, 0, 0); 757 | } 758 | 759 | 90% { 760 | -webkit-transform: translate3d(5px, 0, 0); 761 | transform: translate3d(5px, 0, 0); 762 | } 763 | 764 | 100% { 765 | -webkit-transform: none; 766 | transform: none; 767 | } 768 | } 769 | 770 | @keyframes bounceInLeft { 771 | 0%, 60%, 75%, 90%, 100% { 772 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 773 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 774 | } 775 | 776 | 0% { 777 | opacity: 0; 778 | -webkit-transform: translate3d(-3000px, 0, 0); 779 | transform: translate3d(-3000px, 0, 0); 780 | } 781 | 782 | 60% { 783 | opacity: 1; 784 | -webkit-transform: translate3d(25px, 0, 0); 785 | transform: translate3d(25px, 0, 0); 786 | } 787 | 788 | 75% { 789 | -webkit-transform: translate3d(-10px, 0, 0); 790 | transform: translate3d(-10px, 0, 0); 791 | } 792 | 793 | 90% { 794 | -webkit-transform: translate3d(5px, 0, 0); 795 | transform: translate3d(5px, 0, 0); 796 | } 797 | 798 | 100% { 799 | -webkit-transform: none; 800 | transform: none; 801 | } 802 | } 803 | 804 | .bounceInLeft { 805 | -webkit-animation-name: bounceInLeft; 806 | animation-name: bounceInLeft; 807 | } 808 | 809 | @-webkit-keyframes bounceInRight { 810 | 0%, 60%, 75%, 90%, 100% { 811 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 812 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 813 | } 814 | 815 | 0% { 816 | opacity: 0; 817 | -webkit-transform: translate3d(3000px, 0, 0); 818 | transform: translate3d(3000px, 0, 0); 819 | } 820 | 821 | 60% { 822 | opacity: 1; 823 | -webkit-transform: translate3d(-25px, 0, 0); 824 | transform: translate3d(-25px, 0, 0); 825 | } 826 | 827 | 75% { 828 | -webkit-transform: translate3d(10px, 0, 0); 829 | transform: translate3d(10px, 0, 0); 830 | } 831 | 832 | 90% { 833 | -webkit-transform: translate3d(-5px, 0, 0); 834 | transform: translate3d(-5px, 0, 0); 835 | } 836 | 837 | 100% { 838 | -webkit-transform: none; 839 | transform: none; 840 | } 841 | } 842 | 843 | @keyframes bounceInRight { 844 | 0%, 60%, 75%, 90%, 100% { 845 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 846 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 847 | } 848 | 849 | 0% { 850 | opacity: 0; 851 | -webkit-transform: translate3d(3000px, 0, 0); 852 | transform: translate3d(3000px, 0, 0); 853 | } 854 | 855 | 60% { 856 | opacity: 1; 857 | -webkit-transform: translate3d(-25px, 0, 0); 858 | transform: translate3d(-25px, 0, 0); 859 | } 860 | 861 | 75% { 862 | -webkit-transform: translate3d(10px, 0, 0); 863 | transform: translate3d(10px, 0, 0); 864 | } 865 | 866 | 90% { 867 | -webkit-transform: translate3d(-5px, 0, 0); 868 | transform: translate3d(-5px, 0, 0); 869 | } 870 | 871 | 100% { 872 | -webkit-transform: none; 873 | transform: none; 874 | } 875 | } 876 | 877 | .bounceInRight { 878 | -webkit-animation-name: bounceInRight; 879 | animation-name: bounceInRight; 880 | } 881 | 882 | @-webkit-keyframes bounceInUp { 883 | 0%, 60%, 75%, 90%, 100% { 884 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 885 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 886 | } 887 | 888 | 0% { 889 | opacity: 0; 890 | -webkit-transform: translate3d(0, 3000px, 0); 891 | transform: translate3d(0, 3000px, 0); 892 | } 893 | 894 | 60% { 895 | opacity: 1; 896 | -webkit-transform: translate3d(0, -20px, 0); 897 | transform: translate3d(0, -20px, 0); 898 | } 899 | 900 | 75% { 901 | -webkit-transform: translate3d(0, 10px, 0); 902 | transform: translate3d(0, 10px, 0); 903 | } 904 | 905 | 90% { 906 | -webkit-transform: translate3d(0, -5px, 0); 907 | transform: translate3d(0, -5px, 0); 908 | } 909 | 910 | 100% { 911 | -webkit-transform: translate3d(0, 0, 0); 912 | transform: translate3d(0, 0, 0); 913 | } 914 | } 915 | 916 | @keyframes bounceInUp { 917 | 0%, 60%, 75%, 90%, 100% { 918 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 919 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 920 | } 921 | 922 | 0% { 923 | opacity: 0; 924 | -webkit-transform: translate3d(0, 3000px, 0); 925 | transform: translate3d(0, 3000px, 0); 926 | } 927 | 928 | 60% { 929 | opacity: 1; 930 | -webkit-transform: translate3d(0, -20px, 0); 931 | transform: translate3d(0, -20px, 0); 932 | } 933 | 934 | 75% { 935 | -webkit-transform: translate3d(0, 10px, 0); 936 | transform: translate3d(0, 10px, 0); 937 | } 938 | 939 | 90% { 940 | -webkit-transform: translate3d(0, -5px, 0); 941 | transform: translate3d(0, -5px, 0); 942 | } 943 | 944 | 100% { 945 | -webkit-transform: translate3d(0, 0, 0); 946 | transform: translate3d(0, 0, 0); 947 | } 948 | } 949 | 950 | .bounceInUp { 951 | -webkit-animation-name: bounceInUp; 952 | animation-name: bounceInUp; 953 | } 954 | 955 | @-webkit-keyframes bounceOut { 956 | 20% { 957 | -webkit-transform: scale3d(.9, .9, .9); 958 | transform: scale3d(.9, .9, .9); 959 | } 960 | 961 | 50%, 55% { 962 | opacity: 1; 963 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 964 | transform: scale3d(1.1, 1.1, 1.1); 965 | } 966 | 967 | 100% { 968 | opacity: 0; 969 | -webkit-transform: scale3d(.3, .3, .3); 970 | transform: scale3d(.3, .3, .3); 971 | } 972 | } 973 | 974 | @keyframes bounceOut { 975 | 20% { 976 | -webkit-transform: scale3d(.9, .9, .9); 977 | transform: scale3d(.9, .9, .9); 978 | } 979 | 980 | 50%, 55% { 981 | opacity: 1; 982 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 983 | transform: scale3d(1.1, 1.1, 1.1); 984 | } 985 | 986 | 100% { 987 | opacity: 0; 988 | -webkit-transform: scale3d(.3, .3, .3); 989 | transform: scale3d(.3, .3, .3); 990 | } 991 | } 992 | 993 | .bounceOut { 994 | -webkit-animation-name: bounceOut; 995 | animation-name: bounceOut; 996 | } 997 | 998 | @-webkit-keyframes bounceOutDown { 999 | 20% { 1000 | -webkit-transform: translate3d(0, 10px, 0); 1001 | transform: translate3d(0, 10px, 0); 1002 | } 1003 | 1004 | 40%, 45% { 1005 | opacity: 1; 1006 | -webkit-transform: translate3d(0, -20px, 0); 1007 | transform: translate3d(0, -20px, 0); 1008 | } 1009 | 1010 | 100% { 1011 | opacity: 0; 1012 | -webkit-transform: translate3d(0, 2000px, 0); 1013 | transform: translate3d(0, 2000px, 0); 1014 | } 1015 | } 1016 | 1017 | @keyframes bounceOutDown { 1018 | 20% { 1019 | -webkit-transform: translate3d(0, 10px, 0); 1020 | transform: translate3d(0, 10px, 0); 1021 | } 1022 | 1023 | 40%, 45% { 1024 | opacity: 1; 1025 | -webkit-transform: translate3d(0, -20px, 0); 1026 | transform: translate3d(0, -20px, 0); 1027 | } 1028 | 1029 | 100% { 1030 | opacity: 0; 1031 | -webkit-transform: translate3d(0, 2000px, 0); 1032 | transform: translate3d(0, 2000px, 0); 1033 | } 1034 | } 1035 | 1036 | .bounceOutDown { 1037 | -webkit-animation-name: bounceOutDown; 1038 | animation-name: bounceOutDown; 1039 | } 1040 | 1041 | @-webkit-keyframes bounceOutLeft { 1042 | 20% { 1043 | opacity: 1; 1044 | -webkit-transform: translate3d(20px, 0, 0); 1045 | transform: translate3d(20px, 0, 0); 1046 | } 1047 | 1048 | 100% { 1049 | opacity: 0; 1050 | -webkit-transform: translate3d(-2000px, 0, 0); 1051 | transform: translate3d(-2000px, 0, 0); 1052 | } 1053 | } 1054 | 1055 | @keyframes bounceOutLeft { 1056 | 20% { 1057 | opacity: 1; 1058 | -webkit-transform: translate3d(20px, 0, 0); 1059 | transform: translate3d(20px, 0, 0); 1060 | } 1061 | 1062 | 100% { 1063 | opacity: 0; 1064 | -webkit-transform: translate3d(-2000px, 0, 0); 1065 | transform: translate3d(-2000px, 0, 0); 1066 | } 1067 | } 1068 | 1069 | .bounceOutLeft { 1070 | -webkit-animation-name: bounceOutLeft; 1071 | animation-name: bounceOutLeft; 1072 | } 1073 | 1074 | @-webkit-keyframes bounceOutRight { 1075 | 20% { 1076 | opacity: 1; 1077 | -webkit-transform: translate3d(-20px, 0, 0); 1078 | transform: translate3d(-20px, 0, 0); 1079 | } 1080 | 1081 | 100% { 1082 | opacity: 0; 1083 | -webkit-transform: translate3d(2000px, 0, 0); 1084 | transform: translate3d(2000px, 0, 0); 1085 | } 1086 | } 1087 | 1088 | @keyframes bounceOutRight { 1089 | 20% { 1090 | opacity: 1; 1091 | -webkit-transform: translate3d(-20px, 0, 0); 1092 | transform: translate3d(-20px, 0, 0); 1093 | } 1094 | 1095 | 100% { 1096 | opacity: 0; 1097 | -webkit-transform: translate3d(2000px, 0, 0); 1098 | transform: translate3d(2000px, 0, 0); 1099 | } 1100 | } 1101 | 1102 | .bounceOutRight { 1103 | -webkit-animation-name: bounceOutRight; 1104 | animation-name: bounceOutRight; 1105 | } 1106 | 1107 | @-webkit-keyframes bounceOutUp { 1108 | 20% { 1109 | -webkit-transform: translate3d(0, -10px, 0); 1110 | transform: translate3d(0, -10px, 0); 1111 | } 1112 | 1113 | 40%, 45% { 1114 | opacity: 1; 1115 | -webkit-transform: translate3d(0, 20px, 0); 1116 | transform: translate3d(0, 20px, 0); 1117 | } 1118 | 1119 | 100% { 1120 | opacity: 0; 1121 | -webkit-transform: translate3d(0, -2000px, 0); 1122 | transform: translate3d(0, -2000px, 0); 1123 | } 1124 | } 1125 | 1126 | @keyframes bounceOutUp { 1127 | 20% { 1128 | -webkit-transform: translate3d(0, -10px, 0); 1129 | transform: translate3d(0, -10px, 0); 1130 | } 1131 | 1132 | 40%, 45% { 1133 | opacity: 1; 1134 | -webkit-transform: translate3d(0, 20px, 0); 1135 | transform: translate3d(0, 20px, 0); 1136 | } 1137 | 1138 | 100% { 1139 | opacity: 0; 1140 | -webkit-transform: translate3d(0, -2000px, 0); 1141 | transform: translate3d(0, -2000px, 0); 1142 | } 1143 | } 1144 | 1145 | .bounceOutUp { 1146 | -webkit-animation-name: bounceOutUp; 1147 | animation-name: bounceOutUp; 1148 | } 1149 | 1150 | @-webkit-keyframes fadeIn { 1151 | 0% { 1152 | opacity: 0; 1153 | } 1154 | 1155 | 100% { 1156 | opacity: 1; 1157 | } 1158 | } 1159 | 1160 | @keyframes fadeIn { 1161 | 0% { 1162 | opacity: 0; 1163 | } 1164 | 1165 | 100% { 1166 | opacity: 1; 1167 | } 1168 | } 1169 | 1170 | .fadeIn { 1171 | -webkit-animation-name: fadeIn; 1172 | animation-name: fadeIn; 1173 | } 1174 | 1175 | @-webkit-keyframes fadeInDown { 1176 | 0% { 1177 | opacity: 0; 1178 | -webkit-transform: translate3d(0, -100%, 0); 1179 | transform: translate3d(0, -100%, 0); 1180 | } 1181 | 1182 | 100% { 1183 | opacity: 1; 1184 | -webkit-transform: none; 1185 | transform: none; 1186 | } 1187 | } 1188 | 1189 | @keyframes fadeInDown { 1190 | 0% { 1191 | opacity: 0; 1192 | -webkit-transform: translate3d(0, -100%, 0); 1193 | transform: translate3d(0, -100%, 0); 1194 | } 1195 | 1196 | 100% { 1197 | opacity: 1; 1198 | -webkit-transform: none; 1199 | transform: none; 1200 | } 1201 | } 1202 | 1203 | .fadeInDown { 1204 | -webkit-animation-name: fadeInDown; 1205 | animation-name: fadeInDown; 1206 | } 1207 | 1208 | @-webkit-keyframes fadeInDownBig { 1209 | 0% { 1210 | opacity: 0; 1211 | -webkit-transform: translate3d(0, -2000px, 0); 1212 | transform: translate3d(0, -2000px, 0); 1213 | } 1214 | 1215 | 100% { 1216 | opacity: 1; 1217 | -webkit-transform: none; 1218 | transform: none; 1219 | } 1220 | } 1221 | 1222 | @keyframes fadeInDownBig { 1223 | 0% { 1224 | opacity: 0; 1225 | -webkit-transform: translate3d(0, -2000px, 0); 1226 | transform: translate3d(0, -2000px, 0); 1227 | } 1228 | 1229 | 100% { 1230 | opacity: 1; 1231 | -webkit-transform: none; 1232 | transform: none; 1233 | } 1234 | } 1235 | 1236 | .fadeInDownBig { 1237 | -webkit-animation-name: fadeInDownBig; 1238 | animation-name: fadeInDownBig; 1239 | } 1240 | 1241 | @-webkit-keyframes fadeInLeft { 1242 | 0% { 1243 | opacity: 0; 1244 | -webkit-transform: translate3d(-100%, 0, 0); 1245 | transform: translate3d(-100%, 0, 0); 1246 | } 1247 | 1248 | 100% { 1249 | opacity: 1; 1250 | -webkit-transform: none; 1251 | transform: none; 1252 | } 1253 | } 1254 | 1255 | @keyframes fadeInLeft { 1256 | 0% { 1257 | opacity: 0; 1258 | -webkit-transform: translate3d(-100%, 0, 0); 1259 | transform: translate3d(-100%, 0, 0); 1260 | } 1261 | 1262 | 100% { 1263 | opacity: 1; 1264 | -webkit-transform: none; 1265 | transform: none; 1266 | } 1267 | } 1268 | 1269 | .fadeInLeft { 1270 | -webkit-animation-name: fadeInLeft; 1271 | animation-name: fadeInLeft; 1272 | } 1273 | 1274 | @-webkit-keyframes fadeInLeftBig { 1275 | 0% { 1276 | opacity: 0; 1277 | -webkit-transform: translate3d(-2000px, 0, 0); 1278 | transform: translate3d(-2000px, 0, 0); 1279 | } 1280 | 1281 | 100% { 1282 | opacity: 1; 1283 | -webkit-transform: none; 1284 | transform: none; 1285 | } 1286 | } 1287 | 1288 | @keyframes fadeInLeftBig { 1289 | 0% { 1290 | opacity: 0; 1291 | -webkit-transform: translate3d(-2000px, 0, 0); 1292 | transform: translate3d(-2000px, 0, 0); 1293 | } 1294 | 1295 | 100% { 1296 | opacity: 1; 1297 | -webkit-transform: none; 1298 | transform: none; 1299 | } 1300 | } 1301 | 1302 | .fadeInLeftBig { 1303 | -webkit-animation-name: fadeInLeftBig; 1304 | animation-name: fadeInLeftBig; 1305 | } 1306 | 1307 | @-webkit-keyframes fadeInRight { 1308 | 0% { 1309 | opacity: 0; 1310 | -webkit-transform: translate3d(100%, 0, 0); 1311 | transform: translate3d(100%, 0, 0); 1312 | } 1313 | 1314 | 100% { 1315 | opacity: 1; 1316 | -webkit-transform: none; 1317 | transform: none; 1318 | } 1319 | } 1320 | 1321 | @keyframes fadeInRight { 1322 | 0% { 1323 | opacity: 0; 1324 | -webkit-transform: translate3d(100%, 0, 0); 1325 | transform: translate3d(100%, 0, 0); 1326 | } 1327 | 1328 | 100% { 1329 | opacity: 1; 1330 | -webkit-transform: none; 1331 | transform: none; 1332 | } 1333 | } 1334 | 1335 | .fadeInRight { 1336 | -webkit-animation-name: fadeInRight; 1337 | animation-name: fadeInRight; 1338 | } 1339 | 1340 | @-webkit-keyframes fadeInRightBig { 1341 | 0% { 1342 | opacity: 0; 1343 | -webkit-transform: translate3d(2000px, 0, 0); 1344 | transform: translate3d(2000px, 0, 0); 1345 | } 1346 | 1347 | 100% { 1348 | opacity: 1; 1349 | -webkit-transform: none; 1350 | transform: none; 1351 | } 1352 | } 1353 | 1354 | @keyframes fadeInRightBig { 1355 | 0% { 1356 | opacity: 0; 1357 | -webkit-transform: translate3d(2000px, 0, 0); 1358 | transform: translate3d(2000px, 0, 0); 1359 | } 1360 | 1361 | 100% { 1362 | opacity: 1; 1363 | -webkit-transform: none; 1364 | transform: none; 1365 | } 1366 | } 1367 | 1368 | .fadeInRightBig { 1369 | -webkit-animation-name: fadeInRightBig; 1370 | animation-name: fadeInRightBig; 1371 | } 1372 | 1373 | @-webkit-keyframes fadeInUp { 1374 | 0% { 1375 | opacity: 0; 1376 | -webkit-transform: translate3d(0, 100%, 0); 1377 | transform: translate3d(0, 100%, 0); 1378 | } 1379 | 1380 | 100% { 1381 | opacity: 1; 1382 | -webkit-transform: none; 1383 | transform: none; 1384 | } 1385 | } 1386 | 1387 | @keyframes fadeInUp { 1388 | 0% { 1389 | opacity: 0; 1390 | -webkit-transform: translate3d(0, 100%, 0); 1391 | transform: translate3d(0, 100%, 0); 1392 | } 1393 | 1394 | 100% { 1395 | opacity: 1; 1396 | -webkit-transform: none; 1397 | transform: none; 1398 | } 1399 | } 1400 | 1401 | .fadeInUp { 1402 | -webkit-animation-name: fadeInUp; 1403 | animation-name: fadeInUp; 1404 | } 1405 | 1406 | @-webkit-keyframes fadeInUpBig { 1407 | 0% { 1408 | opacity: 0; 1409 | -webkit-transform: translate3d(0, 2000px, 0); 1410 | transform: translate3d(0, 2000px, 0); 1411 | } 1412 | 1413 | 100% { 1414 | opacity: 1; 1415 | -webkit-transform: none; 1416 | transform: none; 1417 | } 1418 | } 1419 | 1420 | @keyframes fadeInUpBig { 1421 | 0% { 1422 | opacity: 0; 1423 | -webkit-transform: translate3d(0, 2000px, 0); 1424 | transform: translate3d(0, 2000px, 0); 1425 | } 1426 | 1427 | 100% { 1428 | opacity: 1; 1429 | -webkit-transform: none; 1430 | transform: none; 1431 | } 1432 | } 1433 | 1434 | .fadeInUpBig { 1435 | -webkit-animation-name: fadeInUpBig; 1436 | animation-name: fadeInUpBig; 1437 | } 1438 | 1439 | @-webkit-keyframes fadeOut { 1440 | 0% { 1441 | opacity: 1; 1442 | } 1443 | 1444 | 100% { 1445 | opacity: 0; 1446 | } 1447 | } 1448 | 1449 | @keyframes fadeOut { 1450 | 0% { 1451 | opacity: 1; 1452 | } 1453 | 1454 | 100% { 1455 | opacity: 0; 1456 | } 1457 | } 1458 | 1459 | .fadeOut { 1460 | -webkit-animation-name: fadeOut; 1461 | animation-name: fadeOut; 1462 | } 1463 | 1464 | @-webkit-keyframes fadeOutDown { 1465 | 0% { 1466 | opacity: 1; 1467 | } 1468 | 1469 | 100% { 1470 | opacity: 0; 1471 | -webkit-transform: translate3d(0, 100%, 0); 1472 | transform: translate3d(0, 100%, 0); 1473 | } 1474 | } 1475 | 1476 | @keyframes fadeOutDown { 1477 | 0% { 1478 | opacity: 1; 1479 | } 1480 | 1481 | 100% { 1482 | opacity: 0; 1483 | -webkit-transform: translate3d(0, 100%, 0); 1484 | transform: translate3d(0, 100%, 0); 1485 | } 1486 | } 1487 | 1488 | .fadeOutDown { 1489 | -webkit-animation-name: fadeOutDown; 1490 | animation-name: fadeOutDown; 1491 | } 1492 | 1493 | @-webkit-keyframes fadeOutDownBig { 1494 | 0% { 1495 | opacity: 1; 1496 | } 1497 | 1498 | 100% { 1499 | opacity: 0; 1500 | -webkit-transform: translate3d(0, 2000px, 0); 1501 | transform: translate3d(0, 2000px, 0); 1502 | } 1503 | } 1504 | 1505 | @keyframes fadeOutDownBig { 1506 | 0% { 1507 | opacity: 1; 1508 | } 1509 | 1510 | 100% { 1511 | opacity: 0; 1512 | -webkit-transform: translate3d(0, 2000px, 0); 1513 | transform: translate3d(0, 2000px, 0); 1514 | } 1515 | } 1516 | 1517 | .fadeOutDownBig { 1518 | -webkit-animation-name: fadeOutDownBig; 1519 | animation-name: fadeOutDownBig; 1520 | } 1521 | 1522 | @-webkit-keyframes fadeOutLeft { 1523 | 0% { 1524 | opacity: 1; 1525 | } 1526 | 1527 | 100% { 1528 | opacity: 0; 1529 | -webkit-transform: translate3d(-100%, 0, 0); 1530 | transform: translate3d(-100%, 0, 0); 1531 | } 1532 | } 1533 | 1534 | @keyframes fadeOutLeft { 1535 | 0% { 1536 | opacity: 1; 1537 | } 1538 | 1539 | 100% { 1540 | opacity: 0; 1541 | -webkit-transform: translate3d(-100%, 0, 0); 1542 | transform: translate3d(-100%, 0, 0); 1543 | } 1544 | } 1545 | 1546 | .fadeOutLeft { 1547 | -webkit-animation-name: fadeOutLeft; 1548 | animation-name: fadeOutLeft; 1549 | } 1550 | 1551 | @-webkit-keyframes fadeOutLeftBig { 1552 | 0% { 1553 | opacity: 1; 1554 | } 1555 | 1556 | 100% { 1557 | opacity: 0; 1558 | -webkit-transform: translate3d(-2000px, 0, 0); 1559 | transform: translate3d(-2000px, 0, 0); 1560 | } 1561 | } 1562 | 1563 | @keyframes fadeOutLeftBig { 1564 | 0% { 1565 | opacity: 1; 1566 | } 1567 | 1568 | 100% { 1569 | opacity: 0; 1570 | -webkit-transform: translate3d(-2000px, 0, 0); 1571 | transform: translate3d(-2000px, 0, 0); 1572 | } 1573 | } 1574 | 1575 | .fadeOutLeftBig { 1576 | -webkit-animation-name: fadeOutLeftBig; 1577 | animation-name: fadeOutLeftBig; 1578 | } 1579 | 1580 | @-webkit-keyframes fadeOutRight { 1581 | 0% { 1582 | opacity: 1; 1583 | } 1584 | 1585 | 100% { 1586 | opacity: 0; 1587 | -webkit-transform: translate3d(100%, 0, 0); 1588 | transform: translate3d(100%, 0, 0); 1589 | } 1590 | } 1591 | 1592 | @keyframes fadeOutRight { 1593 | 0% { 1594 | opacity: 1; 1595 | } 1596 | 1597 | 100% { 1598 | opacity: 0; 1599 | -webkit-transform: translate3d(100%, 0, 0); 1600 | transform: translate3d(100%, 0, 0); 1601 | } 1602 | } 1603 | 1604 | .fadeOutRight { 1605 | -webkit-animation-name: fadeOutRight; 1606 | animation-name: fadeOutRight; 1607 | } 1608 | 1609 | @-webkit-keyframes fadeOutRightBig { 1610 | 0% { 1611 | opacity: 1; 1612 | } 1613 | 1614 | 100% { 1615 | opacity: 0; 1616 | -webkit-transform: translate3d(2000px, 0, 0); 1617 | transform: translate3d(2000px, 0, 0); 1618 | } 1619 | } 1620 | 1621 | @keyframes fadeOutRightBig { 1622 | 0% { 1623 | opacity: 1; 1624 | } 1625 | 1626 | 100% { 1627 | opacity: 0; 1628 | -webkit-transform: translate3d(2000px, 0, 0); 1629 | transform: translate3d(2000px, 0, 0); 1630 | } 1631 | } 1632 | 1633 | .fadeOutRightBig { 1634 | -webkit-animation-name: fadeOutRightBig; 1635 | animation-name: fadeOutRightBig; 1636 | } 1637 | 1638 | @-webkit-keyframes fadeOutUp { 1639 | 0% { 1640 | opacity: 1; 1641 | } 1642 | 1643 | 100% { 1644 | opacity: 0; 1645 | -webkit-transform: translate3d(0, -100%, 0); 1646 | transform: translate3d(0, -100%, 0); 1647 | } 1648 | } 1649 | 1650 | @keyframes fadeOutUp { 1651 | 0% { 1652 | opacity: 1; 1653 | } 1654 | 1655 | 100% { 1656 | opacity: 0; 1657 | -webkit-transform: translate3d(0, -100%, 0); 1658 | transform: translate3d(0, -100%, 0); 1659 | } 1660 | } 1661 | 1662 | .fadeOutUp { 1663 | -webkit-animation-name: fadeOutUp; 1664 | animation-name: fadeOutUp; 1665 | } 1666 | 1667 | @-webkit-keyframes fadeOutUpBig { 1668 | 0% { 1669 | opacity: 1; 1670 | } 1671 | 1672 | 100% { 1673 | opacity: 0; 1674 | -webkit-transform: translate3d(0, -2000px, 0); 1675 | transform: translate3d(0, -2000px, 0); 1676 | } 1677 | } 1678 | 1679 | @keyframes fadeOutUpBig { 1680 | 0% { 1681 | opacity: 1; 1682 | } 1683 | 1684 | 100% { 1685 | opacity: 0; 1686 | -webkit-transform: translate3d(0, -2000px, 0); 1687 | transform: translate3d(0, -2000px, 0); 1688 | } 1689 | } 1690 | 1691 | .fadeOutUpBig { 1692 | -webkit-animation-name: fadeOutUpBig; 1693 | animation-name: fadeOutUpBig; 1694 | } 1695 | 1696 | @-webkit-keyframes flip { 1697 | 0% { 1698 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1699 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1700 | -webkit-animation-timing-function: ease-out; 1701 | animation-timing-function: ease-out; 1702 | } 1703 | 1704 | 40% { 1705 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1706 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1707 | -webkit-animation-timing-function: ease-out; 1708 | animation-timing-function: ease-out; 1709 | } 1710 | 1711 | 50% { 1712 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1713 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1714 | -webkit-animation-timing-function: ease-in; 1715 | animation-timing-function: ease-in; 1716 | } 1717 | 1718 | 80% { 1719 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1720 | transform: perspective(400px) scale3d(.95, .95, .95); 1721 | -webkit-animation-timing-function: ease-in; 1722 | animation-timing-function: ease-in; 1723 | } 1724 | 1725 | 100% { 1726 | -webkit-transform: perspective(400px); 1727 | transform: perspective(400px); 1728 | -webkit-animation-timing-function: ease-in; 1729 | animation-timing-function: ease-in; 1730 | } 1731 | } 1732 | 1733 | @keyframes flip { 1734 | 0% { 1735 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1736 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1737 | -webkit-animation-timing-function: ease-out; 1738 | animation-timing-function: ease-out; 1739 | } 1740 | 1741 | 40% { 1742 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1743 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1744 | -webkit-animation-timing-function: ease-out; 1745 | animation-timing-function: ease-out; 1746 | } 1747 | 1748 | 50% { 1749 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1750 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1751 | -webkit-animation-timing-function: ease-in; 1752 | animation-timing-function: ease-in; 1753 | } 1754 | 1755 | 80% { 1756 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1757 | transform: perspective(400px) scale3d(.95, .95, .95); 1758 | -webkit-animation-timing-function: ease-in; 1759 | animation-timing-function: ease-in; 1760 | } 1761 | 1762 | 100% { 1763 | -webkit-transform: perspective(400px); 1764 | transform: perspective(400px); 1765 | -webkit-animation-timing-function: ease-in; 1766 | animation-timing-function: ease-in; 1767 | } 1768 | } 1769 | 1770 | .animated.flip { 1771 | -webkit-backface-visibility: visible; 1772 | backface-visibility: visible; 1773 | -webkit-animation-name: flip; 1774 | animation-name: flip; 1775 | } 1776 | 1777 | @-webkit-keyframes flipInX { 1778 | 0% { 1779 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1780 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1781 | -webkit-animation-timing-function: ease-in; 1782 | animation-timing-function: ease-in; 1783 | opacity: 0; 1784 | } 1785 | 1786 | 40% { 1787 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1788 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1789 | -webkit-animation-timing-function: ease-in; 1790 | animation-timing-function: ease-in; 1791 | } 1792 | 1793 | 60% { 1794 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1795 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1796 | opacity: 1; 1797 | } 1798 | 1799 | 80% { 1800 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1801 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1802 | } 1803 | 1804 | 100% { 1805 | -webkit-transform: perspective(400px); 1806 | transform: perspective(400px); 1807 | } 1808 | } 1809 | 1810 | @keyframes flipInX { 1811 | 0% { 1812 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1813 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1814 | -webkit-animation-timing-function: ease-in; 1815 | animation-timing-function: ease-in; 1816 | opacity: 0; 1817 | } 1818 | 1819 | 40% { 1820 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1821 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1822 | -webkit-animation-timing-function: ease-in; 1823 | animation-timing-function: ease-in; 1824 | } 1825 | 1826 | 60% { 1827 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1828 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1829 | opacity: 1; 1830 | } 1831 | 1832 | 80% { 1833 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1834 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1835 | } 1836 | 1837 | 100% { 1838 | -webkit-transform: perspective(400px); 1839 | transform: perspective(400px); 1840 | } 1841 | } 1842 | 1843 | .flipInX { 1844 | -webkit-backface-visibility: visible !important; 1845 | backface-visibility: visible !important; 1846 | -webkit-animation-name: flipInX; 1847 | animation-name: flipInX; 1848 | } 1849 | 1850 | @-webkit-keyframes flipInY { 1851 | 0% { 1852 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1853 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1854 | -webkit-animation-timing-function: ease-in; 1855 | animation-timing-function: ease-in; 1856 | opacity: 0; 1857 | } 1858 | 1859 | 40% { 1860 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1861 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1862 | -webkit-animation-timing-function: ease-in; 1863 | animation-timing-function: ease-in; 1864 | } 1865 | 1866 | 60% { 1867 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1868 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1869 | opacity: 1; 1870 | } 1871 | 1872 | 80% { 1873 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1874 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1875 | } 1876 | 1877 | 100% { 1878 | -webkit-transform: perspective(400px); 1879 | transform: perspective(400px); 1880 | } 1881 | } 1882 | 1883 | @keyframes flipInY { 1884 | 0% { 1885 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1886 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1887 | -webkit-animation-timing-function: ease-in; 1888 | animation-timing-function: ease-in; 1889 | opacity: 0; 1890 | } 1891 | 1892 | 40% { 1893 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1894 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1895 | -webkit-animation-timing-function: ease-in; 1896 | animation-timing-function: ease-in; 1897 | } 1898 | 1899 | 60% { 1900 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1901 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1902 | opacity: 1; 1903 | } 1904 | 1905 | 80% { 1906 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1907 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1908 | } 1909 | 1910 | 100% { 1911 | -webkit-transform: perspective(400px); 1912 | transform: perspective(400px); 1913 | } 1914 | } 1915 | 1916 | .flipInY { 1917 | -webkit-backface-visibility: visible !important; 1918 | backface-visibility: visible !important; 1919 | -webkit-animation-name: flipInY; 1920 | animation-name: flipInY; 1921 | } 1922 | 1923 | @-webkit-keyframes flipOutX { 1924 | 0% { 1925 | -webkit-transform: perspective(400px); 1926 | transform: perspective(400px); 1927 | } 1928 | 1929 | 30% { 1930 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1931 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1932 | opacity: 1; 1933 | } 1934 | 1935 | 100% { 1936 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1937 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1938 | opacity: 0; 1939 | } 1940 | } 1941 | 1942 | @keyframes flipOutX { 1943 | 0% { 1944 | -webkit-transform: perspective(400px); 1945 | transform: perspective(400px); 1946 | } 1947 | 1948 | 30% { 1949 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1950 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1951 | opacity: 1; 1952 | } 1953 | 1954 | 100% { 1955 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1956 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1957 | opacity: 0; 1958 | } 1959 | } 1960 | 1961 | .flipOutX { 1962 | -webkit-animation-name: flipOutX; 1963 | animation-name: flipOutX; 1964 | -webkit-backface-visibility: visible !important; 1965 | backface-visibility: visible !important; 1966 | } 1967 | 1968 | @-webkit-keyframes flipOutY { 1969 | 0% { 1970 | -webkit-transform: perspective(400px); 1971 | transform: perspective(400px); 1972 | } 1973 | 1974 | 30% { 1975 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1976 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1977 | opacity: 1; 1978 | } 1979 | 1980 | 100% { 1981 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1982 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1983 | opacity: 0; 1984 | } 1985 | } 1986 | 1987 | @keyframes flipOutY { 1988 | 0% { 1989 | -webkit-transform: perspective(400px); 1990 | transform: perspective(400px); 1991 | } 1992 | 1993 | 30% { 1994 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1995 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1996 | opacity: 1; 1997 | } 1998 | 1999 | 100% { 2000 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2001 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2002 | opacity: 0; 2003 | } 2004 | } 2005 | 2006 | .flipOutY { 2007 | -webkit-backface-visibility: visible !important; 2008 | backface-visibility: visible !important; 2009 | -webkit-animation-name: flipOutY; 2010 | animation-name: flipOutY; 2011 | } 2012 | 2013 | @-webkit-keyframes lightSpeedIn { 2014 | 0% { 2015 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2016 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2017 | opacity: 0; 2018 | } 2019 | 2020 | 60% { 2021 | -webkit-transform: skewX(20deg); 2022 | transform: skewX(20deg); 2023 | opacity: 1; 2024 | } 2025 | 2026 | 80% { 2027 | -webkit-transform: skewX(-5deg); 2028 | transform: skewX(-5deg); 2029 | opacity: 1; 2030 | } 2031 | 2032 | 100% { 2033 | -webkit-transform: none; 2034 | transform: none; 2035 | opacity: 1; 2036 | } 2037 | } 2038 | 2039 | @keyframes lightSpeedIn { 2040 | 0% { 2041 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2042 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2043 | opacity: 0; 2044 | } 2045 | 2046 | 60% { 2047 | -webkit-transform: skewX(20deg); 2048 | transform: skewX(20deg); 2049 | opacity: 1; 2050 | } 2051 | 2052 | 80% { 2053 | -webkit-transform: skewX(-5deg); 2054 | transform: skewX(-5deg); 2055 | opacity: 1; 2056 | } 2057 | 2058 | 100% { 2059 | -webkit-transform: none; 2060 | transform: none; 2061 | opacity: 1; 2062 | } 2063 | } 2064 | 2065 | .lightSpeedIn { 2066 | -webkit-animation-name: lightSpeedIn; 2067 | animation-name: lightSpeedIn; 2068 | -webkit-animation-timing-function: ease-out; 2069 | animation-timing-function: ease-out; 2070 | } 2071 | 2072 | @-webkit-keyframes lightSpeedOut { 2073 | 0% { 2074 | opacity: 1; 2075 | } 2076 | 2077 | 100% { 2078 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2079 | transform: translate3d(100%, 0, 0) skewX(30deg); 2080 | opacity: 0; 2081 | } 2082 | } 2083 | 2084 | @keyframes lightSpeedOut { 2085 | 0% { 2086 | opacity: 1; 2087 | } 2088 | 2089 | 100% { 2090 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2091 | transform: translate3d(100%, 0, 0) skewX(30deg); 2092 | opacity: 0; 2093 | } 2094 | } 2095 | 2096 | .lightSpeedOut { 2097 | -webkit-animation-name: lightSpeedOut; 2098 | animation-name: lightSpeedOut; 2099 | -webkit-animation-timing-function: ease-in; 2100 | animation-timing-function: ease-in; 2101 | } 2102 | 2103 | @-webkit-keyframes rotateIn { 2104 | 0% { 2105 | -webkit-transform-origin: center; 2106 | transform-origin: center; 2107 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2108 | transform: rotate3d(0, 0, 1, -200deg); 2109 | opacity: 0; 2110 | } 2111 | 2112 | 100% { 2113 | -webkit-transform-origin: center; 2114 | transform-origin: center; 2115 | -webkit-transform: none; 2116 | transform: none; 2117 | opacity: 1; 2118 | } 2119 | } 2120 | 2121 | @keyframes rotateIn { 2122 | 0% { 2123 | -webkit-transform-origin: center; 2124 | transform-origin: center; 2125 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2126 | transform: rotate3d(0, 0, 1, -200deg); 2127 | opacity: 0; 2128 | } 2129 | 2130 | 100% { 2131 | -webkit-transform-origin: center; 2132 | transform-origin: center; 2133 | -webkit-transform: none; 2134 | transform: none; 2135 | opacity: 1; 2136 | } 2137 | } 2138 | 2139 | .rotateIn { 2140 | -webkit-animation-name: rotateIn; 2141 | animation-name: rotateIn; 2142 | } 2143 | 2144 | @-webkit-keyframes rotateInDownLeft { 2145 | 0% { 2146 | -webkit-transform-origin: left bottom; 2147 | transform-origin: left bottom; 2148 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2149 | transform: rotate3d(0, 0, 1, -45deg); 2150 | opacity: 0; 2151 | } 2152 | 2153 | 100% { 2154 | -webkit-transform-origin: left bottom; 2155 | transform-origin: left bottom; 2156 | -webkit-transform: none; 2157 | transform: none; 2158 | opacity: 1; 2159 | } 2160 | } 2161 | 2162 | @keyframes rotateInDownLeft { 2163 | 0% { 2164 | -webkit-transform-origin: left bottom; 2165 | transform-origin: left bottom; 2166 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2167 | transform: rotate3d(0, 0, 1, -45deg); 2168 | opacity: 0; 2169 | } 2170 | 2171 | 100% { 2172 | -webkit-transform-origin: left bottom; 2173 | transform-origin: left bottom; 2174 | -webkit-transform: none; 2175 | transform: none; 2176 | opacity: 1; 2177 | } 2178 | } 2179 | 2180 | .rotateInDownLeft { 2181 | -webkit-animation-name: rotateInDownLeft; 2182 | animation-name: rotateInDownLeft; 2183 | } 2184 | 2185 | @-webkit-keyframes rotateInDownRight { 2186 | 0% { 2187 | -webkit-transform-origin: right bottom; 2188 | transform-origin: right bottom; 2189 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2190 | transform: rotate3d(0, 0, 1, 45deg); 2191 | opacity: 0; 2192 | } 2193 | 2194 | 100% { 2195 | -webkit-transform-origin: right bottom; 2196 | transform-origin: right bottom; 2197 | -webkit-transform: none; 2198 | transform: none; 2199 | opacity: 1; 2200 | } 2201 | } 2202 | 2203 | @keyframes rotateInDownRight { 2204 | 0% { 2205 | -webkit-transform-origin: right bottom; 2206 | transform-origin: right bottom; 2207 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2208 | transform: rotate3d(0, 0, 1, 45deg); 2209 | opacity: 0; 2210 | } 2211 | 2212 | 100% { 2213 | -webkit-transform-origin: right bottom; 2214 | transform-origin: right bottom; 2215 | -webkit-transform: none; 2216 | transform: none; 2217 | opacity: 1; 2218 | } 2219 | } 2220 | 2221 | .rotateInDownRight { 2222 | -webkit-animation-name: rotateInDownRight; 2223 | animation-name: rotateInDownRight; 2224 | } 2225 | 2226 | @-webkit-keyframes rotateInUpLeft { 2227 | 0% { 2228 | -webkit-transform-origin: left bottom; 2229 | transform-origin: left bottom; 2230 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2231 | transform: rotate3d(0, 0, 1, 45deg); 2232 | opacity: 0; 2233 | } 2234 | 2235 | 100% { 2236 | -webkit-transform-origin: left bottom; 2237 | transform-origin: left bottom; 2238 | -webkit-transform: none; 2239 | transform: none; 2240 | opacity: 1; 2241 | } 2242 | } 2243 | 2244 | @keyframes rotateInUpLeft { 2245 | 0% { 2246 | -webkit-transform-origin: left bottom; 2247 | transform-origin: left bottom; 2248 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2249 | transform: rotate3d(0, 0, 1, 45deg); 2250 | opacity: 0; 2251 | } 2252 | 2253 | 100% { 2254 | -webkit-transform-origin: left bottom; 2255 | transform-origin: left bottom; 2256 | -webkit-transform: none; 2257 | transform: none; 2258 | opacity: 1; 2259 | } 2260 | } 2261 | 2262 | .rotateInUpLeft { 2263 | -webkit-animation-name: rotateInUpLeft; 2264 | animation-name: rotateInUpLeft; 2265 | } 2266 | 2267 | @-webkit-keyframes rotateInUpRight { 2268 | 0% { 2269 | -webkit-transform-origin: right bottom; 2270 | transform-origin: right bottom; 2271 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2272 | transform: rotate3d(0, 0, 1, -90deg); 2273 | opacity: 0; 2274 | } 2275 | 2276 | 100% { 2277 | -webkit-transform-origin: right bottom; 2278 | transform-origin: right bottom; 2279 | -webkit-transform: none; 2280 | transform: none; 2281 | opacity: 1; 2282 | } 2283 | } 2284 | 2285 | @keyframes rotateInUpRight { 2286 | 0% { 2287 | -webkit-transform-origin: right bottom; 2288 | transform-origin: right bottom; 2289 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2290 | transform: rotate3d(0, 0, 1, -90deg); 2291 | opacity: 0; 2292 | } 2293 | 2294 | 100% { 2295 | -webkit-transform-origin: right bottom; 2296 | transform-origin: right bottom; 2297 | -webkit-transform: none; 2298 | transform: none; 2299 | opacity: 1; 2300 | } 2301 | } 2302 | 2303 | .rotateInUpRight { 2304 | -webkit-animation-name: rotateInUpRight; 2305 | animation-name: rotateInUpRight; 2306 | } 2307 | 2308 | @-webkit-keyframes rotateOut { 2309 | 0% { 2310 | -webkit-transform-origin: center; 2311 | transform-origin: center; 2312 | opacity: 1; 2313 | } 2314 | 2315 | 100% { 2316 | -webkit-transform-origin: center; 2317 | transform-origin: center; 2318 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2319 | transform: rotate3d(0, 0, 1, 200deg); 2320 | opacity: 0; 2321 | } 2322 | } 2323 | 2324 | @keyframes rotateOut { 2325 | 0% { 2326 | -webkit-transform-origin: center; 2327 | transform-origin: center; 2328 | opacity: 1; 2329 | } 2330 | 2331 | 100% { 2332 | -webkit-transform-origin: center; 2333 | transform-origin: center; 2334 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2335 | transform: rotate3d(0, 0, 1, 200deg); 2336 | opacity: 0; 2337 | } 2338 | } 2339 | 2340 | .rotateOut { 2341 | -webkit-animation-name: rotateOut; 2342 | animation-name: rotateOut; 2343 | } 2344 | 2345 | @-webkit-keyframes rotateOutDownLeft { 2346 | 0% { 2347 | -webkit-transform-origin: left bottom; 2348 | transform-origin: left bottom; 2349 | opacity: 1; 2350 | } 2351 | 2352 | 100% { 2353 | -webkit-transform-origin: left bottom; 2354 | transform-origin: left bottom; 2355 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2356 | transform: rotate3d(0, 0, 1, 45deg); 2357 | opacity: 0; 2358 | } 2359 | } 2360 | 2361 | @keyframes rotateOutDownLeft { 2362 | 0% { 2363 | -webkit-transform-origin: left bottom; 2364 | transform-origin: left bottom; 2365 | opacity: 1; 2366 | } 2367 | 2368 | 100% { 2369 | -webkit-transform-origin: left bottom; 2370 | transform-origin: left bottom; 2371 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2372 | transform: rotate3d(0, 0, 1, 45deg); 2373 | opacity: 0; 2374 | } 2375 | } 2376 | 2377 | .rotateOutDownLeft { 2378 | -webkit-animation-name: rotateOutDownLeft; 2379 | animation-name: rotateOutDownLeft; 2380 | } 2381 | 2382 | @-webkit-keyframes rotateOutDownRight { 2383 | 0% { 2384 | -webkit-transform-origin: right bottom; 2385 | transform-origin: right bottom; 2386 | opacity: 1; 2387 | } 2388 | 2389 | 100% { 2390 | -webkit-transform-origin: right bottom; 2391 | transform-origin: right bottom; 2392 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2393 | transform: rotate3d(0, 0, 1, -45deg); 2394 | opacity: 0; 2395 | } 2396 | } 2397 | 2398 | @keyframes rotateOutDownRight { 2399 | 0% { 2400 | -webkit-transform-origin: right bottom; 2401 | transform-origin: right bottom; 2402 | opacity: 1; 2403 | } 2404 | 2405 | 100% { 2406 | -webkit-transform-origin: right bottom; 2407 | transform-origin: right bottom; 2408 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2409 | transform: rotate3d(0, 0, 1, -45deg); 2410 | opacity: 0; 2411 | } 2412 | } 2413 | 2414 | .rotateOutDownRight { 2415 | -webkit-animation-name: rotateOutDownRight; 2416 | animation-name: rotateOutDownRight; 2417 | } 2418 | 2419 | @-webkit-keyframes rotateOutUpLeft { 2420 | 0% { 2421 | -webkit-transform-origin: left bottom; 2422 | transform-origin: left bottom; 2423 | opacity: 1; 2424 | } 2425 | 2426 | 100% { 2427 | -webkit-transform-origin: left bottom; 2428 | transform-origin: left bottom; 2429 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2430 | transform: rotate3d(0, 0, 1, -45deg); 2431 | opacity: 0; 2432 | } 2433 | } 2434 | 2435 | @keyframes rotateOutUpLeft { 2436 | 0% { 2437 | -webkit-transform-origin: left bottom; 2438 | transform-origin: left bottom; 2439 | opacity: 1; 2440 | } 2441 | 2442 | 100% { 2443 | -webkit-transform-origin: left bottom; 2444 | transform-origin: left bottom; 2445 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2446 | transform: rotate3d(0, 0, 1, -45deg); 2447 | opacity: 0; 2448 | } 2449 | } 2450 | 2451 | .rotateOutUpLeft { 2452 | -webkit-animation-name: rotateOutUpLeft; 2453 | animation-name: rotateOutUpLeft; 2454 | } 2455 | 2456 | @-webkit-keyframes rotateOutUpRight { 2457 | 0% { 2458 | -webkit-transform-origin: right bottom; 2459 | transform-origin: right bottom; 2460 | opacity: 1; 2461 | } 2462 | 2463 | 100% { 2464 | -webkit-transform-origin: right bottom; 2465 | transform-origin: right bottom; 2466 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2467 | transform: rotate3d(0, 0, 1, 90deg); 2468 | opacity: 0; 2469 | } 2470 | } 2471 | 2472 | @keyframes rotateOutUpRight { 2473 | 0% { 2474 | -webkit-transform-origin: right bottom; 2475 | transform-origin: right bottom; 2476 | opacity: 1; 2477 | } 2478 | 2479 | 100% { 2480 | -webkit-transform-origin: right bottom; 2481 | transform-origin: right bottom; 2482 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2483 | transform: rotate3d(0, 0, 1, 90deg); 2484 | opacity: 0; 2485 | } 2486 | } 2487 | 2488 | .rotateOutUpRight { 2489 | -webkit-animation-name: rotateOutUpRight; 2490 | animation-name: rotateOutUpRight; 2491 | } 2492 | 2493 | @-webkit-keyframes hinge { 2494 | 0% { 2495 | -webkit-transform-origin: top left; 2496 | transform-origin: top left; 2497 | -webkit-animation-timing-function: ease-in-out; 2498 | animation-timing-function: ease-in-out; 2499 | } 2500 | 2501 | 20%, 60% { 2502 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2503 | transform: rotate3d(0, 0, 1, 80deg); 2504 | -webkit-transform-origin: top left; 2505 | transform-origin: top left; 2506 | -webkit-animation-timing-function: ease-in-out; 2507 | animation-timing-function: ease-in-out; 2508 | } 2509 | 2510 | 40%, 80% { 2511 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2512 | transform: rotate3d(0, 0, 1, 60deg); 2513 | -webkit-transform-origin: top left; 2514 | transform-origin: top left; 2515 | -webkit-animation-timing-function: ease-in-out; 2516 | animation-timing-function: ease-in-out; 2517 | opacity: 1; 2518 | } 2519 | 2520 | 100% { 2521 | -webkit-transform: translate3d(0, 700px, 0); 2522 | transform: translate3d(0, 700px, 0); 2523 | opacity: 0; 2524 | } 2525 | } 2526 | 2527 | @keyframes hinge { 2528 | 0% { 2529 | -webkit-transform-origin: top left; 2530 | transform-origin: top left; 2531 | -webkit-animation-timing-function: ease-in-out; 2532 | animation-timing-function: ease-in-out; 2533 | } 2534 | 2535 | 20%, 60% { 2536 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2537 | transform: rotate3d(0, 0, 1, 80deg); 2538 | -webkit-transform-origin: top left; 2539 | transform-origin: top left; 2540 | -webkit-animation-timing-function: ease-in-out; 2541 | animation-timing-function: ease-in-out; 2542 | } 2543 | 2544 | 40%, 80% { 2545 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2546 | transform: rotate3d(0, 0, 1, 60deg); 2547 | -webkit-transform-origin: top left; 2548 | transform-origin: top left; 2549 | -webkit-animation-timing-function: ease-in-out; 2550 | animation-timing-function: ease-in-out; 2551 | opacity: 1; 2552 | } 2553 | 2554 | 100% { 2555 | -webkit-transform: translate3d(0, 700px, 0); 2556 | transform: translate3d(0, 700px, 0); 2557 | opacity: 0; 2558 | } 2559 | } 2560 | 2561 | .hinge { 2562 | -webkit-animation-name: hinge; 2563 | animation-name: hinge; 2564 | } 2565 | 2566 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2567 | 2568 | @-webkit-keyframes rollIn { 2569 | 0% { 2570 | opacity: 0; 2571 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2572 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2573 | } 2574 | 2575 | 100% { 2576 | opacity: 1; 2577 | -webkit-transform: none; 2578 | transform: none; 2579 | } 2580 | } 2581 | 2582 | @keyframes rollIn { 2583 | 0% { 2584 | opacity: 0; 2585 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2586 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2587 | } 2588 | 2589 | 100% { 2590 | opacity: 1; 2591 | -webkit-transform: none; 2592 | transform: none; 2593 | } 2594 | } 2595 | 2596 | .rollIn { 2597 | -webkit-animation-name: rollIn; 2598 | animation-name: rollIn; 2599 | } 2600 | 2601 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2602 | 2603 | @-webkit-keyframes rollOut { 2604 | 0% { 2605 | opacity: 1; 2606 | } 2607 | 2608 | 100% { 2609 | opacity: 0; 2610 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2611 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2612 | } 2613 | } 2614 | 2615 | @keyframes rollOut { 2616 | 0% { 2617 | opacity: 1; 2618 | } 2619 | 2620 | 100% { 2621 | opacity: 0; 2622 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2623 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2624 | } 2625 | } 2626 | 2627 | .rollOut { 2628 | -webkit-animation-name: rollOut; 2629 | animation-name: rollOut; 2630 | } 2631 | 2632 | @-webkit-keyframes zoomIn { 2633 | 0% { 2634 | opacity: 0; 2635 | -webkit-transform: scale3d(.3, .3, .3); 2636 | transform: scale3d(.3, .3, .3); 2637 | } 2638 | 2639 | 50% { 2640 | opacity: 1; 2641 | } 2642 | } 2643 | 2644 | @keyframes zoomIn { 2645 | 0% { 2646 | opacity: 0; 2647 | -webkit-transform: scale3d(.3, .3, .3); 2648 | transform: scale3d(.3, .3, .3); 2649 | } 2650 | 2651 | 50% { 2652 | opacity: 1; 2653 | } 2654 | } 2655 | 2656 | .zoomIn { 2657 | -webkit-animation-name: zoomIn; 2658 | animation-name: zoomIn; 2659 | } 2660 | 2661 | @-webkit-keyframes zoomInDown { 2662 | 0% { 2663 | opacity: 0; 2664 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2665 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2666 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2667 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2668 | } 2669 | 2670 | 60% { 2671 | opacity: 1; 2672 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2673 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2674 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2675 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2676 | } 2677 | } 2678 | 2679 | @keyframes zoomInDown { 2680 | 0% { 2681 | opacity: 0; 2682 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2683 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2684 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2685 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2686 | } 2687 | 2688 | 60% { 2689 | opacity: 1; 2690 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2691 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2692 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2693 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2694 | } 2695 | } 2696 | 2697 | .zoomInDown { 2698 | -webkit-animation-name: zoomInDown; 2699 | animation-name: zoomInDown; 2700 | } 2701 | 2702 | @-webkit-keyframes zoomInLeft { 2703 | 0% { 2704 | opacity: 0; 2705 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2706 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2707 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2708 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2709 | } 2710 | 2711 | 60% { 2712 | opacity: 1; 2713 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2714 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2715 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2716 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2717 | } 2718 | } 2719 | 2720 | @keyframes zoomInLeft { 2721 | 0% { 2722 | opacity: 0; 2723 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2724 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2725 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2726 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2727 | } 2728 | 2729 | 60% { 2730 | opacity: 1; 2731 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2732 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2733 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2734 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2735 | } 2736 | } 2737 | 2738 | .zoomInLeft { 2739 | -webkit-animation-name: zoomInLeft; 2740 | animation-name: zoomInLeft; 2741 | } 2742 | 2743 | @-webkit-keyframes zoomInRight { 2744 | 0% { 2745 | opacity: 0; 2746 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2747 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2748 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2749 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2750 | } 2751 | 2752 | 60% { 2753 | opacity: 1; 2754 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2755 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2756 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2757 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2758 | } 2759 | } 2760 | 2761 | @keyframes zoomInRight { 2762 | 0% { 2763 | opacity: 0; 2764 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2765 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2766 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2767 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2768 | } 2769 | 2770 | 60% { 2771 | opacity: 1; 2772 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2773 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2774 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2775 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2776 | } 2777 | } 2778 | 2779 | .zoomInRight { 2780 | -webkit-animation-name: zoomInRight; 2781 | animation-name: zoomInRight; 2782 | } 2783 | 2784 | @-webkit-keyframes zoomInUp { 2785 | 0% { 2786 | opacity: 0; 2787 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2788 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2789 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2790 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2791 | } 2792 | 2793 | 60% { 2794 | opacity: 1; 2795 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2796 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2797 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2798 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2799 | } 2800 | } 2801 | 2802 | @keyframes zoomInUp { 2803 | 0% { 2804 | opacity: 0; 2805 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2806 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2807 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2808 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2809 | } 2810 | 2811 | 60% { 2812 | opacity: 1; 2813 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2814 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2815 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2816 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2817 | } 2818 | } 2819 | 2820 | .zoomInUp { 2821 | -webkit-animation-name: zoomInUp; 2822 | animation-name: zoomInUp; 2823 | } 2824 | 2825 | @-webkit-keyframes zoomOut { 2826 | 0% { 2827 | opacity: 1; 2828 | } 2829 | 2830 | 50% { 2831 | opacity: 0; 2832 | -webkit-transform: scale3d(.3, .3, .3); 2833 | transform: scale3d(.3, .3, .3); 2834 | } 2835 | 2836 | 100% { 2837 | opacity: 0; 2838 | } 2839 | } 2840 | 2841 | @keyframes zoomOut { 2842 | 0% { 2843 | opacity: 1; 2844 | } 2845 | 2846 | 50% { 2847 | opacity: 0; 2848 | -webkit-transform: scale3d(.3, .3, .3); 2849 | transform: scale3d(.3, .3, .3); 2850 | } 2851 | 2852 | 100% { 2853 | opacity: 0; 2854 | } 2855 | } 2856 | 2857 | .zoomOut { 2858 | -webkit-animation-name: zoomOut; 2859 | animation-name: zoomOut; 2860 | } 2861 | 2862 | @-webkit-keyframes zoomOutDown { 2863 | 40% { 2864 | opacity: 1; 2865 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2866 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2867 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2868 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2869 | } 2870 | 2871 | 100% { 2872 | opacity: 0; 2873 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2874 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2875 | -webkit-transform-origin: center bottom; 2876 | transform-origin: center bottom; 2877 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2878 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2879 | } 2880 | } 2881 | 2882 | @keyframes zoomOutDown { 2883 | 40% { 2884 | opacity: 1; 2885 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2886 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2887 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2888 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2889 | } 2890 | 2891 | 100% { 2892 | opacity: 0; 2893 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2894 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2895 | -webkit-transform-origin: center bottom; 2896 | transform-origin: center bottom; 2897 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2898 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2899 | } 2900 | } 2901 | 2902 | .zoomOutDown { 2903 | -webkit-animation-name: zoomOutDown; 2904 | animation-name: zoomOutDown; 2905 | } 2906 | 2907 | @-webkit-keyframes zoomOutLeft { 2908 | 40% { 2909 | opacity: 1; 2910 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2911 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2912 | } 2913 | 2914 | 100% { 2915 | opacity: 0; 2916 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2917 | transform: scale(.1) translate3d(-2000px, 0, 0); 2918 | -webkit-transform-origin: left center; 2919 | transform-origin: left center; 2920 | } 2921 | } 2922 | 2923 | @keyframes zoomOutLeft { 2924 | 40% { 2925 | opacity: 1; 2926 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2927 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2928 | } 2929 | 2930 | 100% { 2931 | opacity: 0; 2932 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2933 | transform: scale(.1) translate3d(-2000px, 0, 0); 2934 | -webkit-transform-origin: left center; 2935 | transform-origin: left center; 2936 | } 2937 | } 2938 | 2939 | .zoomOutLeft { 2940 | -webkit-animation-name: zoomOutLeft; 2941 | animation-name: zoomOutLeft; 2942 | } 2943 | 2944 | @-webkit-keyframes zoomOutRight { 2945 | 40% { 2946 | opacity: 1; 2947 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2948 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2949 | } 2950 | 2951 | 100% { 2952 | opacity: 0; 2953 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2954 | transform: scale(.1) translate3d(2000px, 0, 0); 2955 | -webkit-transform-origin: right center; 2956 | transform-origin: right center; 2957 | } 2958 | } 2959 | 2960 | @keyframes zoomOutRight { 2961 | 40% { 2962 | opacity: 1; 2963 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2964 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2965 | } 2966 | 2967 | 100% { 2968 | opacity: 0; 2969 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2970 | transform: scale(.1) translate3d(2000px, 0, 0); 2971 | -webkit-transform-origin: right center; 2972 | transform-origin: right center; 2973 | } 2974 | } 2975 | 2976 | .zoomOutRight { 2977 | -webkit-animation-name: zoomOutRight; 2978 | animation-name: zoomOutRight; 2979 | } 2980 | 2981 | @-webkit-keyframes zoomOutUp { 2982 | 40% { 2983 | opacity: 1; 2984 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2985 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2986 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2987 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2988 | } 2989 | 2990 | 100% { 2991 | opacity: 0; 2992 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2993 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2994 | -webkit-transform-origin: center bottom; 2995 | transform-origin: center bottom; 2996 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2997 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2998 | } 2999 | } 3000 | 3001 | @keyframes zoomOutUp { 3002 | 40% { 3003 | opacity: 1; 3004 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3005 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3006 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3007 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3008 | } 3009 | 3010 | 100% { 3011 | opacity: 0; 3012 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3013 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3014 | -webkit-transform-origin: center bottom; 3015 | transform-origin: center bottom; 3016 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3017 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3018 | } 3019 | } 3020 | 3021 | .zoomOutUp { 3022 | -webkit-animation-name: zoomOutUp; 3023 | animation-name: zoomOutUp; 3024 | } 3025 | 3026 | @-webkit-keyframes slideInDown { 3027 | 0% { 3028 | -webkit-transform: translate3d(0, -100%, 0); 3029 | transform: translate3d(0, -100%, 0); 3030 | visibility: visible; 3031 | } 3032 | 3033 | 100% { 3034 | -webkit-transform: translate3d(0, 0, 0); 3035 | transform: translate3d(0, 0, 0); 3036 | } 3037 | } 3038 | 3039 | @keyframes slideInDown { 3040 | 0% { 3041 | -webkit-transform: translate3d(0, -100%, 0); 3042 | transform: translate3d(0, -100%, 0); 3043 | visibility: visible; 3044 | } 3045 | 3046 | 100% { 3047 | -webkit-transform: translate3d(0, 0, 0); 3048 | transform: translate3d(0, 0, 0); 3049 | } 3050 | } 3051 | 3052 | .slideInDown { 3053 | -webkit-animation-name: slideInDown; 3054 | animation-name: slideInDown; 3055 | } 3056 | 3057 | @-webkit-keyframes slideInLeft { 3058 | 0% { 3059 | -webkit-transform: translate3d(-100%, 0, 0); 3060 | transform: translate3d(-100%, 0, 0); 3061 | visibility: visible; 3062 | } 3063 | 3064 | 100% { 3065 | -webkit-transform: translate3d(0, 0, 0); 3066 | transform: translate3d(0, 0, 0); 3067 | } 3068 | } 3069 | 3070 | @keyframes slideInLeft { 3071 | 0% { 3072 | -webkit-transform: translate3d(-100%, 0, 0); 3073 | transform: translate3d(-100%, 0, 0); 3074 | visibility: visible; 3075 | } 3076 | 3077 | 100% { 3078 | -webkit-transform: translate3d(0, 0, 0); 3079 | transform: translate3d(0, 0, 0); 3080 | } 3081 | } 3082 | 3083 | .slideInLeft { 3084 | -webkit-animation-name: slideInLeft; 3085 | animation-name: slideInLeft; 3086 | } 3087 | 3088 | @-webkit-keyframes slideInRight { 3089 | 0% { 3090 | -webkit-transform: translate3d(100%, 0, 0); 3091 | transform: translate3d(100%, 0, 0); 3092 | visibility: visible; 3093 | } 3094 | 3095 | 100% { 3096 | -webkit-transform: translate3d(0, 0, 0); 3097 | transform: translate3d(0, 0, 0); 3098 | } 3099 | } 3100 | 3101 | @keyframes slideInRight { 3102 | 0% { 3103 | -webkit-transform: translate3d(100%, 0, 0); 3104 | transform: translate3d(100%, 0, 0); 3105 | visibility: visible; 3106 | } 3107 | 3108 | 100% { 3109 | -webkit-transform: translate3d(0, 0, 0); 3110 | transform: translate3d(0, 0, 0); 3111 | } 3112 | } 3113 | 3114 | .slideInRight { 3115 | -webkit-animation-name: slideInRight; 3116 | animation-name: slideInRight; 3117 | } 3118 | 3119 | @-webkit-keyframes slideInUp { 3120 | 0% { 3121 | -webkit-transform: translate3d(0, 100%, 0); 3122 | transform: translate3d(0, 100%, 0); 3123 | visibility: visible; 3124 | } 3125 | 3126 | 100% { 3127 | -webkit-transform: translate3d(0, 0, 0); 3128 | transform: translate3d(0, 0, 0); 3129 | } 3130 | } 3131 | 3132 | @keyframes slideInUp { 3133 | 0% { 3134 | -webkit-transform: translate3d(0, 100%, 0); 3135 | transform: translate3d(0, 100%, 0); 3136 | visibility: visible; 3137 | } 3138 | 3139 | 100% { 3140 | -webkit-transform: translate3d(0, 0, 0); 3141 | transform: translate3d(0, 0, 0); 3142 | } 3143 | } 3144 | 3145 | .slideInUp { 3146 | -webkit-animation-name: slideInUp; 3147 | animation-name: slideInUp; 3148 | } 3149 | 3150 | @-webkit-keyframes slideOutDown { 3151 | 0% { 3152 | -webkit-transform: translate3d(0, 0, 0); 3153 | transform: translate3d(0, 0, 0); 3154 | } 3155 | 3156 | 100% { 3157 | visibility: hidden; 3158 | -webkit-transform: translate3d(0, 100%, 0); 3159 | transform: translate3d(0, 100%, 0); 3160 | } 3161 | } 3162 | 3163 | @keyframes slideOutDown { 3164 | 0% { 3165 | -webkit-transform: translate3d(0, 0, 0); 3166 | transform: translate3d(0, 0, 0); 3167 | } 3168 | 3169 | 100% { 3170 | visibility: hidden; 3171 | -webkit-transform: translate3d(0, 100%, 0); 3172 | transform: translate3d(0, 100%, 0); 3173 | } 3174 | } 3175 | 3176 | .slideOutDown { 3177 | -webkit-animation-name: slideOutDown; 3178 | animation-name: slideOutDown; 3179 | } 3180 | 3181 | @-webkit-keyframes slideOutLeft { 3182 | 0% { 3183 | -webkit-transform: translate3d(0, 0, 0); 3184 | transform: translate3d(0, 0, 0); 3185 | } 3186 | 3187 | 100% { 3188 | visibility: hidden; 3189 | -webkit-transform: translate3d(-100%, 0, 0); 3190 | transform: translate3d(-100%, 0, 0); 3191 | } 3192 | } 3193 | 3194 | @keyframes slideOutLeft { 3195 | 0% { 3196 | -webkit-transform: translate3d(0, 0, 0); 3197 | transform: translate3d(0, 0, 0); 3198 | } 3199 | 3200 | 100% { 3201 | visibility: hidden; 3202 | -webkit-transform: translate3d(-100%, 0, 0); 3203 | transform: translate3d(-100%, 0, 0); 3204 | } 3205 | } 3206 | 3207 | .slideOutLeft { 3208 | -webkit-animation-name: slideOutLeft; 3209 | animation-name: slideOutLeft; 3210 | } 3211 | 3212 | @-webkit-keyframes slideOutRight { 3213 | 0% { 3214 | -webkit-transform: translate3d(0, 0, 0); 3215 | transform: translate3d(0, 0, 0); 3216 | } 3217 | 3218 | 100% { 3219 | visibility: hidden; 3220 | -webkit-transform: translate3d(100%, 0, 0); 3221 | transform: translate3d(100%, 0, 0); 3222 | } 3223 | } 3224 | 3225 | @keyframes slideOutRight { 3226 | 0% { 3227 | -webkit-transform: translate3d(0, 0, 0); 3228 | transform: translate3d(0, 0, 0); 3229 | } 3230 | 3231 | 100% { 3232 | visibility: hidden; 3233 | -webkit-transform: translate3d(100%, 0, 0); 3234 | transform: translate3d(100%, 0, 0); 3235 | } 3236 | } 3237 | 3238 | .slideOutRight { 3239 | -webkit-animation-name: slideOutRight; 3240 | animation-name: slideOutRight; 3241 | } 3242 | 3243 | @-webkit-keyframes slideOutUp { 3244 | 0% { 3245 | -webkit-transform: translate3d(0, 0, 0); 3246 | transform: translate3d(0, 0, 0); 3247 | } 3248 | 3249 | 100% { 3250 | visibility: hidden; 3251 | -webkit-transform: translate3d(0, -100%, 0); 3252 | transform: translate3d(0, -100%, 0); 3253 | } 3254 | } 3255 | 3256 | @keyframes slideOutUp { 3257 | 0% { 3258 | -webkit-transform: translate3d(0, 0, 0); 3259 | transform: translate3d(0, 0, 0); 3260 | } 3261 | 3262 | 100% { 3263 | visibility: hidden; 3264 | -webkit-transform: translate3d(0, -100%, 0); 3265 | transform: translate3d(0, -100%, 0); 3266 | } 3267 | } 3268 | 3269 | .slideOutUp { 3270 | -webkit-animation-name: slideOutUp; 3271 | animation-name: slideOutUp; 3272 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 36 | 37 | 38 | 39 | 84 | 85 |
86 | 87 | These cards are being animated by animate.css. You can easily use animate.css to have the attributes animate, animate-enter, and animate-leave, along with adding animate-delay and animate-duration.

88 | 89 | In addition, you can have an animation CSS class and use an ngAnimate style system, linking animations to 'riot-enter', 'riot-enter-active', 'riot-leave', and 'riot-leave-active' 90 | 91 |
92 | 93 | 94 | 116 | 117 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "riot-animate", 3 | "version": "0.1.2", 4 | "description": "Add animations to riot 2", 5 | "main": "riotAnimate.min.js", 6 | "scripts": { 7 | "test": "", 8 | "build": "browserify riotAnimate.js -s riotAnimate | uglifyjs > riotAnimate.min.js", 9 | "watch": "watchify riotAnimate.js -s riotAnimate -o riotAnimate.min.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/sartaj/riot-animate.git" 14 | }, 15 | "author": "sartaj (http://sartaj.me)", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/sartaj/riot-animate/issues" 19 | }, 20 | "homepage": "https://github.com/sartaj/riot-animate", 21 | "devDependencies": { 22 | "riot": "^2.2.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /riotAnimate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Animate Riot v2 Components 3 | * @author Sartaj 4 | * @contributor Nate Chapman 5 | * @license MIT 2015 6 | */ 7 | 8 | /** 9 | * The Animate Mixin 10 | */ 11 | var OptsAnimateMixin = { 12 | init: function() { 13 | 14 | this.on('mount', function() { 15 | 16 | createAnimation.call(this, 'enter'); 17 | 18 | var animationEnded = function(e) { 19 | 20 | var item = e.target; 21 | 22 | if (this.enterClasses) { 23 | this.enterClasses.forEach(function(classToAnimate) { 24 | item.classList.remove(classToAnimate); 25 | }); 26 | } 27 | 28 | if (this.leaveClasses) { 29 | this.leaveClasses.forEach(function(classToAnimate) { 30 | item.classList.remove(classToAnimate); 31 | }); 32 | } 33 | 34 | // remove animate.css class 35 | item.classList.remove('animated'); 36 | 37 | // Remove all other classes 38 | item.classList.remove('riot-enter-active'); 39 | item.classList.remove('riot-enter'); 40 | item.classList.remove('riot-animate'); 41 | 42 | // Remove all other classes 43 | item.classList.remove('riot-leave-active'); 44 | item.classList.remove('riot-leave'); 45 | item.classList.remove('riot-animate'); 46 | 47 | var delay = item.getAttribute('animate-delay'); 48 | if (delay) { 49 | item.style.animationDelay = ''; 50 | item.style.transitionDelay = ''; 51 | } 52 | 53 | var duration = item.getAttribute('animate-duration'); 54 | if (duration) { 55 | item.style.animationDuration = ''; 56 | item.style.transitionDuration = ''; 57 | } 58 | 59 | }.bind(this) 60 | 61 | // After animation has ended 62 | this.root.addEventListener("transitionend", animationEnded, false); 63 | this.root.addEventListener("animationend", animationEnded, false); 64 | 65 | }); 66 | 67 | 68 | }, 69 | animatedUnmount: function(keepParent) { 70 | 71 | createAnimation.call(this, 'leave'); 72 | 73 | var waitFor = 1; 74 | 75 | var unmount = function(e) { 76 | e.target.style.visibility = 'hidden'; 77 | if (waitFor === this.animatedDomElements.length) { 78 | this.unmount(keepParent); 79 | } else { 80 | waitFor++; 81 | } 82 | }.bind(this) 83 | 84 | // After animation has ended 85 | this.root.addEventListener("transitionend", unmount, false); 86 | this.root.addEventListener("animationend", unmount, false) 87 | 88 | } 89 | }; 90 | 91 | function createAnimation(ANIMATION_NAME) { 92 | 93 | // Get attributes you want to animate 94 | this.animatedDomElements = this.root.querySelectorAll('[animate]'); 95 | 96 | for (var x = 0; x < this.animatedDomElements.length; x++) { 97 | 98 | // Item to add animations to 99 | var item = this.animatedDomElements[x]; 100 | 101 | // Get attribute string 102 | var attributeToAnimate = item.getAttribute('animate-' + ANIMATION_NAME); 103 | 104 | if (!attributeToAnimate) { 105 | var attributeToAnimate = item.getAttribute('animate'); 106 | } 107 | 108 | // Get all space separated classes 109 | this.enterClasses = attributeToAnimate.split(' '); 110 | 111 | // Add those classes to this item 112 | this.enterClasses.forEach(function(classToAnimate) { 113 | item.classList.add(classToAnimate); 114 | }); 115 | 116 | var delay = item.getAttribute('animate-delay'); 117 | if (delay) { 118 | item.style.animationDelay = delay; 119 | item.style.transitionDelay = delay; 120 | } 121 | 122 | var duration = item.getAttribute('animate-duration'); 123 | if (duration) { 124 | item.style.animationDuration = duration; 125 | item.style.transitionDuration = duration; 126 | } 127 | 128 | // Add initial enter animation class 129 | item.classList.add('riot-' + ANIMATION_NAME); 130 | } 131 | 132 | // Add animation for enter after 1 frame 133 | window.requestAnimationFrame(function() { 134 | for (var x = 0; x < this.animatedDomElements.length; x++) { 135 | var item = this.animatedDomElements[x]; 136 | // animate.css support 137 | item.classList.add('animated'); 138 | item.classList.add('riot-animate'); 139 | item.classList.add('riot-' + ANIMATION_NAME + '-active'); 140 | } 141 | }.bind(this)); 142 | } 143 | 144 | module.exports = OptsAnimateMixin; 145 | -------------------------------------------------------------------------------- /riotAnimate.min.js: -------------------------------------------------------------------------------- 1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.riotAnimate=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o