├── .gitignore ├── README.md ├── demo ├── bower.json ├── bower_components │ └── animate.css │ │ ├── .bower.json │ │ ├── Gruntfile.js │ │ ├── animate-config.json │ │ ├── animate.css │ │ ├── animate.min.css │ │ ├── bower.json │ │ ├── package.json │ │ └── source │ │ ├── _base.css │ │ ├── attention_seekers │ │ ├── bounce.css │ │ ├── flash.css │ │ ├── jello.css │ │ ├── pulse.css │ │ ├── rubberBand.css │ │ ├── shake.css │ │ ├── swing.css │ │ ├── tada.css │ │ └── wobble.css │ │ ├── bouncing_entrances │ │ ├── bounceIn.css │ │ ├── bounceInDown.css │ │ ├── bounceInLeft.css │ │ ├── bounceInRight.css │ │ └── bounceInUp.css │ │ ├── bouncing_exits │ │ ├── bounceOut.css │ │ ├── bounceOutDown.css │ │ ├── bounceOutLeft.css │ │ ├── bounceOutRight.css │ │ └── bounceOutUp.css │ │ ├── fading_entrances │ │ ├── fadeIn.css │ │ ├── fadeInDown.css │ │ ├── fadeInDownBig.css │ │ ├── fadeInLeft.css │ │ ├── fadeInLeftBig.css │ │ ├── fadeInRight.css │ │ ├── fadeInRightBig.css │ │ ├── fadeInUp.css │ │ └── fadeInUpBig.css │ │ ├── fading_exits │ │ ├── fadeOut.css │ │ ├── fadeOutDown.css │ │ ├── fadeOutDownBig.css │ │ ├── fadeOutLeft.css │ │ ├── fadeOutLeftBig.css │ │ ├── fadeOutRight.css │ │ ├── fadeOutRightBig.css │ │ ├── fadeOutUp.css │ │ └── fadeOutUpBig.css │ │ ├── flippers │ │ ├── flip.css │ │ ├── flipInX.css │ │ ├── flipInY.css │ │ ├── flipOutX.css │ │ └── flipOutY.css │ │ ├── lightspeed │ │ ├── lightSpeedIn.css │ │ └── lightSpeedOut.css │ │ ├── rotating_entrances │ │ ├── rotateIn.css │ │ ├── rotateInDownLeft.css │ │ ├── rotateInDownRight.css │ │ ├── rotateInUpLeft.css │ │ └── rotateInUpRight.css │ │ ├── rotating_exits │ │ ├── rotateOut.css │ │ ├── rotateOutDownLeft.css │ │ ├── rotateOutDownRight.css │ │ ├── rotateOutUpLeft.css │ │ └── rotateOutUpRight.css │ │ ├── sliding_entrances │ │ ├── slideInDown.css │ │ ├── slideInLeft.css │ │ ├── slideInRight.css │ │ └── slideInUp.css │ │ ├── sliding_exits │ │ ├── slideOutDown.css │ │ ├── slideOutLeft.css │ │ ├── slideOutRight.css │ │ └── slideOutUp.css │ │ ├── specials │ │ ├── hinge.css │ │ ├── rollIn.css │ │ └── rollOut.css │ │ ├── zooming_entrances │ │ ├── zoomIn.css │ │ ├── zoomInDown.css │ │ ├── zoomInLeft.css │ │ ├── zoomInRight.css │ │ └── zoomInUp.css │ │ └── zooming_exits │ │ ├── zoomOut.css │ │ ├── zoomOutDown.css │ │ ├── zoomOutLeft.css │ │ ├── zoomOutRight.css │ │ └── zoomOutUp.css ├── dist │ └── bundle.js ├── gulpfile.js ├── index.html ├── package.json └── src │ └── index.js ├── dist └── scrollEffects.min.js ├── gulpfile.js ├── package.json └── src └── scroll-effects.js /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | .DS_Store 3 | node_modules 4 | .sass-cache 5 | *.map 6 | *.scssc 7 | *.TMP 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Effects Scroll 2 | React component to animate elements on scroll with animate.css 3 |

4 | 5 | ## Demo page: 6 | http://anorudes.github.io/React-Scroll-Effect/ 7 | 8 | ## Install 9 | `` 10 | npm install react-scroll-effects --save 11 | `` 12 |
13 | Include "animate.css" from https://daneden.github.io/animate.css/ 14 | 15 | ## Usage: 16 | 17 | ``` 18 | import ScrollEffect from 'react-scroll-effects'; 19 | 20 | 21 | test 1 22 | 23 | 24 | 25 |
26 | text 27 | text 28 | text 29 |
30 | 31 | 32 | 33 |
34 | text 35 | text 36 | text 37 |
38 | 39 | 40 | 41 | 52 | 53 | 54 | ``` 55 | ##Properties: 56 | offset - By default, animation is activated when (scrollPositionY + window.height / 2) >= (elementPositionTop). But you can specify offset.
57 | className - Your class for block. You can specify one or multiple classes separated by a space.
58 | duration - Animate duration seconds.
59 | queueClass - Class name for queue. See the demo page (third block).
60 | queueDuration - Queue interval.
61 | callback - Callback function. 62 | 63 | ## Files: 64 | src/** - component
65 | demo/** - demo page. For build: "bower install && npm install" 66 | 67 | ## Build demo page 68 | ``` 69 | $ npm install 70 | $ gulp 71 | ``` 72 | 73 | ## Depending 74 | https://daneden.github.io/animate.css/ 75 | 76 | -------------------------------------------------------------------------------- /demo/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo reactScrollEffects", 3 | "version": "0.0.0", 4 | "homepage": "https://github.com/anorudes/React-Scroll-Effect", 5 | "authors": [ 6 | "Maxim Varovin " 7 | ], 8 | "license": "MIT", 9 | "dependencies": { 10 | "animate.css": "~3.3.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.3.0", 4 | "main": "./animate.css", 5 | "ignore": [ 6 | ".*", 7 | "src", 8 | "*.yml", 9 | "Gemfile", 10 | "Gemfile.lock", 11 | "*.md" 12 | ], 13 | "homepage": "https://github.com/daneden/animate.css", 14 | "_release": "3.3.0", 15 | "_resolution": { 16 | "type": "version", 17 | "tag": "3.3.0", 18 | "commit": "31b8e9026143342d14ba4ff9213181394a8b2e90" 19 | }, 20 | "_source": "git://github.com/daneden/animate.css.git", 21 | "_target": "~3.3.0", 22 | "_originalSource": "animate.css", 23 | "_direct": true 24 | } -------------------------------------------------------------------------------- /demo/bower_components/animate.css/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | require('load-grunt-tasks')(grunt); 4 | 5 | var concatAnim; 6 | 7 | grunt.initConfig({ 8 | 9 | pkg: grunt.file.readJSON('package.json'), 10 | 11 | concat: { 12 | dist: { 13 | src: [ 'source/_base.css', 'source/**/*.css' ], // _base.css required for .animated helper class 14 | dest: 'animate.css' 15 | } 16 | }, 17 | 18 | autoprefixer: { // https://github.com/nDmitry/grunt-autoprefixer 19 | options: { 20 | browsers: ['last 2 versions', 'bb 10'] 21 | }, 22 | no_dest: { 23 | src: 'animate.css' // output file 24 | } 25 | }, 26 | 27 | cssmin: { 28 | minify: { 29 | src: ['animate.css'], 30 | dest: 'animate.min.css', 31 | } 32 | }, 33 | 34 | watch: { 35 | css: { 36 | files: [ 'source/**/*', 'animate-config.json' ], 37 | tasks: ['default'] 38 | } 39 | } 40 | 41 | }); 42 | 43 | // fuction to perform custom task 44 | concatAnim = function () { 45 | 46 | var categories = grunt.file.readJSON('animate-config.json'), 47 | category, files, file, 48 | target = [ 'source/_base.css' ], 49 | count = 0; 50 | 51 | for ( category in categories ) { 52 | if ( categories.hasOwnProperty(category) ) { 53 | files = categories[category] 54 | for (file in files) { 55 | if ( files.hasOwnProperty(file) && files[file] ) { 56 | target.push('source/' + category + '/' + file + '.css'); 57 | count += 1; 58 | } 59 | } 60 | } 61 | } 62 | 63 | if (!count) { 64 | grunt.log.writeln('No animations activated.'); 65 | } else { 66 | grunt.log.writeln(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); 67 | } 68 | 69 | grunt.config('concat', { 'animate.css': target }); 70 | grunt.task.run('concat'); 71 | 72 | }; 73 | 74 | // register task 75 | grunt.registerTask('concat-anim', 'Concatenates activated animations', concatAnim); // custom task 76 | grunt.registerTask('default', ['concat-anim', 'autoprefixer', 'cssmin']); 77 | grunt.registerTask('dev', ['watch']); 78 | 79 | }; 80 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/animate-config.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "attention_seekers": { 4 | "bounce": true, 5 | "flash": true, 6 | "pulse": true, 7 | "rubberBand": true, 8 | "shake": true, 9 | "swing": true, 10 | "tada": true, 11 | "wobble": true, 12 | "jello": true 13 | }, 14 | 15 | "bouncing_entrances": { 16 | "bounceIn": true, 17 | "bounceInDown": true, 18 | "bounceInLeft": true, 19 | "bounceInRight": true, 20 | "bounceInUp": true 21 | }, 22 | 23 | "bouncing_exits": { 24 | "bounceOut": true, 25 | "bounceOutDown": true, 26 | "bounceOutLeft": true, 27 | "bounceOutRight": true, 28 | "bounceOutUp": true 29 | }, 30 | 31 | "fading_entrances": { 32 | "fadeIn": true, 33 | "fadeInDown": true, 34 | "fadeInDownBig": true, 35 | "fadeInLeft": true, 36 | "fadeInLeftBig": true, 37 | "fadeInRight": true, 38 | "fadeInRightBig": true, 39 | "fadeInUp": true, 40 | "fadeInUpBig": true 41 | }, 42 | 43 | "fading_exits": { 44 | "fadeOut": true, 45 | "fadeOutDown": true, 46 | "fadeOutDownBig": true, 47 | "fadeOutLeft": true, 48 | "fadeOutLeftBig": true, 49 | "fadeOutRight": true, 50 | "fadeOutRightBig": true, 51 | "fadeOutUp": true, 52 | "fadeOutUpBig": true 53 | }, 54 | 55 | "flippers": { 56 | "flip": true, 57 | "flipInX": true, 58 | "flipInY": true, 59 | "flipOutX": true, 60 | "flipOutY": true 61 | }, 62 | 63 | "lightspeed": { 64 | "lightSpeedIn": true, 65 | "lightSpeedOut": true 66 | }, 67 | 68 | "rotating_entrances": { 69 | "rotateIn": true, 70 | "rotateInDownLeft": true, 71 | "rotateInDownRight": true, 72 | "rotateInUpLeft": true, 73 | "rotateInUpRight": true 74 | }, 75 | 76 | "rotating_exits": { 77 | "rotateOut": true, 78 | "rotateOutDownLeft": true, 79 | "rotateOutDownRight": true, 80 | "rotateOutUpLeft": true, 81 | "rotateOutUpRight": true 82 | }, 83 | 84 | "specials": { 85 | "hinge": true, 86 | "rollIn": true, 87 | "rollOut": true 88 | }, 89 | 90 | "zooming_entrances": { 91 | "zoomIn": true, 92 | "zoomInDown": true, 93 | "zoomInLeft": true, 94 | "zoomInRight": true, 95 | "zoomInUp": true 96 | }, 97 | 98 | "zooming_exits": { 99 | "zoomOut": true, 100 | "zoomOutDown": true, 101 | "zoomOutLeft": true, 102 | "zoomOutRight": true, 103 | "zoomOutUp": true 104 | }, 105 | 106 | "sliding_entrances": { 107 | "slideInDown": true, 108 | "slideInLeft": true, 109 | "slideInRight": true, 110 | "slideInUp": true 111 | }, 112 | 113 | "sliding_exits": { 114 | "slideOutDown": true, 115 | "slideOutLeft": true, 116 | "slideOutRight": true, 117 | "slideOutUp": true 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/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 | 11.1% { 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 | 33.3% { 498 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 499 | transform: skewX(6.25deg) skewY(6.25deg) 500 | } 501 | 44.4% { 502 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 503 | transform: skewX(-3.125deg) skewY(-3.125deg) 504 | } 505 | 55.5% { 506 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 507 | transform: skewX(1.5625deg) skewY(1.5625deg) 508 | } 509 | 66.6% { 510 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 511 | transform: skewX(-0.78125deg) skewY(-0.78125deg) 512 | } 513 | 77.7% { 514 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 515 | transform: skewX(0.390625deg) skewY(0.390625deg) 516 | } 517 | 88.8% { 518 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 519 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg) 520 | } 521 | 100% { 522 | -webkit-transform: none; 523 | transform: none 524 | } 525 | } 526 | 527 | @keyframes jello { 528 | 11.1% { 529 | -webkit-transform: none; 530 | transform: none 531 | } 532 | 533 | 22.2% { 534 | 535 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 536 | transform: skewX(-12.5deg) skewY(-12.5deg) 537 | } 538 | 33.3% { 539 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 540 | transform: skewX(6.25deg) skewY(6.25deg) 541 | } 542 | 44.4% { 543 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 544 | transform: skewX(-3.125deg) skewY(-3.125deg) 545 | } 546 | 55.5% { 547 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 548 | transform: skewX(1.5625deg) skewY(1.5625deg) 549 | } 550 | 66.6% { 551 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 552 | transform: skewX(-0.78125deg) skewY(-0.78125deg) 553 | } 554 | 77.7% { 555 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 556 | transform: skewX(0.390625deg) skewY(0.390625deg) 557 | } 558 | 88.8% { 559 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 560 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg) 561 | } 562 | 100% { 563 | -webkit-transform: none; 564 | transform: none 565 | } 566 | } 567 | 568 | 569 | 570 | .jello{ 571 | -webkit-animation-name:jello; 572 | animation-name:jello; 573 | -webkit-transform-origin: center; 574 | 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 | } 3273 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*!Animate.css - http://daneden.me/animate Licensed under the MIT license -http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s}.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{11.1%{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}100%{-webkit-transform:none;transform:none}}@keyframes jello{11.1%{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}100%{-webkit-transform:none;transform:none}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} 2 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.3.0", 4 | "main": "./animate.css", 5 | "ignore": [ 6 | ".*", 7 | "src", 8 | "*.yml", 9 | "Gemfile", 10 | "Gemfile.lock", 11 | "*.md" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.3.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/daneden/animate.css.git" 7 | }, 8 | "devDependencies": { 9 | "grunt": "~0.4.1", 10 | "grunt-autoprefixer": "~0.4.0", 11 | "grunt-contrib-watch": "~0.5.3", 12 | "grunt-contrib-concat": "~0.3.0", 13 | "grunt-contrib-cssmin": "~0.8.0", 14 | "load-grunt-tasks": "~0.2.0" 15 | }, 16 | "spm": { 17 | "main": "./animate.css" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/_base.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Animate.css - http://daneden.me/animate 4 | Licensed under the MIT license - http://opensource.org/licenses/MIT 5 | 6 | Copyright (c) 2015 Daniel Eden 7 | */ 8 | 9 | .animated { 10 | animation-duration: 1s; 11 | animation-fill-mode: both; 12 | } 13 | 14 | .animated.infinite { 15 | animation-iteration-count: infinite; 16 | } 17 | 18 | .animated.hinge { 19 | animation-duration: 2s; 20 | } 21 | 22 | .animated.bounceIn, 23 | .animated.bounceOut { 24 | animation-duration: .75s; 25 | } 26 | 27 | .animated.flipOutX, 28 | .animated.flipOutY { 29 | animation-duration: .75s; 30 | } 31 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | 0%, 20%, 53%, 80%, 100% { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | transform: translate3d(0,0,0); 5 | } 6 | 7 | 40%, 43% { 8 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | transform: translate3d(0, -30px, 0); 10 | } 11 | 12 | 70% { 13 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 14 | transform: translate3d(0, -15px, 0); 15 | } 16 | 17 | 90% { 18 | transform: translate3d(0,-4px,0); 19 | } 20 | } 21 | 22 | .bounce { 23 | animation-name: bounce; 24 | transform-origin: center bottom; 25 | } 26 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/flash.css: -------------------------------------------------------------------------------- 1 | @keyframes flash { 2 | 0%, 50%, 100% { 3 | opacity: 1; 4 | } 5 | 6 | 25%, 75% { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .flash { 12 | animation-name: flash; 13 | } 14 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/jello.css: -------------------------------------------------------------------------------- 1 | @keyframes jello { 2 | 11.1% { 3 | transform: none 4 | } 5 | 22.2% { 6 | transform: skewX(-12.5deg) skewY(-12.5deg) 7 | } 8 | 33.3% { 9 | transform: skewX(6.25deg) skewY(6.25deg) 10 | } 11 | 44.4% { 12 | transform: skewX(-3.125deg) skewY(-3.125deg) 13 | } 14 | 55.5% { 15 | transform: skewX(1.5625deg) skewY(1.5625deg) 16 | } 17 | 66.6% { 18 | transform: skewX(-0.78125deg) skewY(-0.78125deg) 19 | } 20 | 77.7% { 21 | transform: skewX(0.390625deg) skewY(0.390625deg) 22 | } 23 | 88.8% { 24 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg) 25 | } 26 | 100% { 27 | transform: none 28 | } 29 | } 30 | 31 | 32 | 33 | .jello{ 34 | animation-name:jello; 35 | transform-origin: center 36 | } 37 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/pulse.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes pulse { 4 | 0% { 5 | transform: scale3d(1, 1, 1); 6 | } 7 | 8 | 50% { 9 | transform: scale3d(1.05, 1.05, 1.05); 10 | } 11 | 12 | 100% { 13 | transform: scale3d(1, 1, 1); 14 | } 15 | } 16 | 17 | .pulse { 18 | animation-name: pulse; 19 | } 20 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/rubberBand.css: -------------------------------------------------------------------------------- 1 | @keyframes rubberBand { 2 | 0% { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 30% { 7 | transform: scale3d(1.25, 0.75, 1); 8 | } 9 | 10 | 40% { 11 | transform: scale3d(0.75, 1.25, 1); 12 | } 13 | 14 | 50% { 15 | transform: scale3d(1.15, 0.85, 1); 16 | } 17 | 18 | 65% { 19 | transform: scale3d(.95, 1.05, 1); 20 | } 21 | 22 | 75% { 23 | transform: scale3d(1.05, .95, 1); 24 | } 25 | 26 | 100% { 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } 30 | 31 | .rubberBand { 32 | animation-name: rubberBand; 33 | } 34 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/shake.css: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | 0%, 100% { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | 10%, 30%, 50%, 70%, 90% { 7 | transform: translate3d(-10px, 0, 0); 8 | } 9 | 10 | 20%, 40%, 60%, 80% { 11 | transform: translate3d(10px, 0, 0); 12 | } 13 | } 14 | 15 | .shake { 16 | animation-name: shake; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/swing.css: -------------------------------------------------------------------------------- 1 | @keyframes swing { 2 | 20% { 3 | transform: rotate3d(0, 0, 1, 15deg); 4 | } 5 | 6 | 40% { 7 | transform: rotate3d(0, 0, 1, -10deg); 8 | } 9 | 10 | 60% { 11 | transform: rotate3d(0, 0, 1, 5deg); 12 | } 13 | 14 | 80% { 15 | transform: rotate3d(0, 0, 1, -5deg); 16 | } 17 | 18 | 100% { 19 | transform: rotate3d(0, 0, 1, 0deg); 20 | } 21 | } 22 | 23 | .swing { 24 | transform-origin: top center; 25 | animation-name: swing; 26 | } 27 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/tada.css: -------------------------------------------------------------------------------- 1 | @keyframes tada { 2 | 0% { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 10%, 20% { 7 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 8 | } 9 | 10 | 30%, 50%, 70%, 90% { 11 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 12 | } 13 | 14 | 40%, 60%, 80% { 15 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 16 | } 17 | 18 | 100% { 19 | transform: scale3d(1, 1, 1); 20 | } 21 | } 22 | 23 | .tada { 24 | animation-name: tada; 25 | } 26 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | 0% { 5 | transform: none; 6 | } 7 | 8 | 15% { 9 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 10 | } 11 | 12 | 30% { 13 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 14 | } 15 | 16 | 45% { 17 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 18 | } 19 | 20 | 60% { 21 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 22 | } 23 | 24 | 75% { 25 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 26 | } 27 | 28 | 100% { 29 | transform: none; 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_entrances/bounceIn.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceIn { 2 | 0%, 20%, 40%, 60%, 80%, 100% { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | 20% { 12 | transform: scale3d(1.1, 1.1, 1.1); 13 | } 14 | 15 | 40% { 16 | transform: scale3d(.9, .9, .9); 17 | } 18 | 19 | 60% { 20 | opacity: 1; 21 | transform: scale3d(1.03, 1.03, 1.03); 22 | } 23 | 24 | 80% { 25 | transform: scale3d(.97, .97, .97); 26 | } 27 | 28 | 100% { 29 | opacity: 1; 30 | transform: scale3d(1, 1, 1); 31 | } 32 | } 33 | 34 | .bounceIn { 35 | animation-name: bounceIn; 36 | } 37 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | 0%, 60%, 75%, 90%, 100% { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, -3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, 25px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, -10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, 5px, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInDown { 30 | animation-name: bounceInDown; 31 | } 32 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | 0%, 60%, 75%, 90%, 100% { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(-3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(-10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(5px, 0, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInLeft { 30 | animation-name: bounceInLeft; 31 | } 32 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | 0%, 60%, 75%, 90%, 100% { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(-25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(-5px, 0, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInRight { 30 | animation-name: bounceInRight; 31 | } 32 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_entrances/bounceInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | 0%, 60%, 75%, 90%, 100% { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, 3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, -20px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, 10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, -5px, 0); 22 | } 23 | 24 | 100% { 25 | transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | 29 | .bounceInUp { 30 | animation-name: bounceInUp; 31 | } 32 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_exits/bounceOut.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOut { 2 | 20% { 3 | transform: scale3d(.9, .9, .9); 4 | } 5 | 6 | 50%, 55% { 7 | opacity: 1; 8 | transform: scale3d(1.1, 1.1, 1.1); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: scale3d(.3, .3, .3); 14 | } 15 | } 16 | 17 | .bounceOut { 18 | animation-name: bounceOut; 19 | } 20 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_exits/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutDown { 2 | 20% { 3 | transform: translate3d(0, 10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, -20px, 0); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translate3d(0, 2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutDown { 18 | animation-name: bounceOutDown; 19 | } 20 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_exits/bounceOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutLeft { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(20px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translate3d(-2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutLeft { 14 | animation-name: bounceOutLeft; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_exits/bounceOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutRight { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(-20px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translate3d(2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutRight { 14 | animation-name: bounceOutRight; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/bouncing_exits/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutUp { 2 | 20% { 3 | transform: translate3d(0, -10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, 20px, 0); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translate3d(0, -2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutUp { 18 | animation-name: bounceOutUp; 19 | } 20 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeIn.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | 0% {opacity: 0;} 3 | 100% {opacity: 1;} 4 | } 5 | 6 | .fadeIn { 7 | animation-name: fadeIn; 8 | } 9 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(0, -100%, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInDown { 14 | animation-name: fadeInDown; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(0, -2000px, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInDownBig { 14 | animation-name: fadeInDownBig; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(-100%, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInLeft { 14 | animation-name: fadeInLeft; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeftBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(-2000px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInLeftBig { 14 | animation-name: fadeInLeftBig; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(100%, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInRight { 14 | animation-name: fadeInRight; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRightBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(2000px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInRightBig { 14 | animation-name: fadeInRightBig; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(0, 100%, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInUp { 14 | animation-name: fadeInUp; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_entrances/fadeInUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUpBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(0, 2000px, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInUpBig { 14 | animation-name: fadeInUpBig; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOut.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut { 2 | 0% {opacity: 1;} 3 | 100% {opacity: 0;} 4 | } 5 | 6 | .fadeOut { 7 | animation-name: fadeOut; 8 | } 9 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDown { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutDown { 13 | animation-name: fadeOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDownBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, 2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutDownBig { 13 | animation-name: fadeOutDownBig; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeft { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeft { 13 | animation-name: fadeOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeftBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(-2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeftBig { 13 | animation-name: fadeOutLeftBig; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRight { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRight { 13 | animation-name: fadeOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRightBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRightBig { 13 | animation-name: fadeOutRightBig; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUp { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutUp { 13 | animation-name: fadeOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/fading_exits/fadeOutUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUpBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, -2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutUpBig { 13 | animation-name: fadeOutUpBig; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | 0% { 3 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 9 | animation-timing-function: ease-out; 10 | } 11 | 12 | 50% { 13 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 14 | animation-timing-function: ease-in; 15 | } 16 | 17 | 80% { 18 | transform: perspective(400px) scale3d(.95, .95, .95); 19 | animation-timing-function: ease-in; 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | animation-timing-function: ease-in; 25 | } 26 | } 27 | 28 | .animated.flip { 29 | backface-visibility: visible; 30 | animation-name: flip; 31 | } 32 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/flippers/flipInX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInX { 2 | 0% { 3 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 10 | animation-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInX { 28 | backface-visibility: visible !important; 29 | animation-name: flipInX; 30 | } 31 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/flippers/flipInY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInY { 2 | 0% { 3 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 10 | animation-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInY { 28 | backface-visibility: visible !important; 29 | animation-name: flipInY; 30 | } 31 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/flippers/flipOutX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutX { 2 | 0% { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 8 | opacity: 1; 9 | } 10 | 11 | 100% { 12 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutX { 18 | animation-name: flipOutX; 19 | backface-visibility: visible !important; 20 | } 21 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/flippers/flipOutY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutY { 2 | 0% { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 8 | opacity: 1; 9 | } 10 | 11 | 100% { 12 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutY { 18 | backface-visibility: visible !important; 19 | animation-name: flipOutY; 20 | } 21 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/lightspeed/lightSpeedIn.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedIn { 2 | 0% { 3 | transform: translate3d(100%, 0, 0) skewX(-30deg); 4 | opacity: 0; 5 | } 6 | 7 | 60% { 8 | transform: skewX(20deg); 9 | opacity: 1; 10 | } 11 | 12 | 80% { 13 | transform: skewX(-5deg); 14 | opacity: 1; 15 | } 16 | 17 | 100% { 18 | transform: none; 19 | opacity: 1; 20 | } 21 | } 22 | 23 | .lightSpeedIn { 24 | animation-name: lightSpeedIn; 25 | animation-timing-function: ease-out; 26 | } 27 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/lightspeed/lightSpeedOut.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedOut { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | transform: translate3d(100%, 0, 0) skewX(30deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .lightSpeedOut { 13 | animation-name: lightSpeedOut; 14 | animation-timing-function: ease-in; 15 | } 16 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_entrances/rotateIn.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateIn { 2 | 0% { 3 | transform-origin: center; 4 | transform: rotate3d(0, 0, 1, -200deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: center; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateIn { 16 | animation-name: rotateIn; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_entrances/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, -45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownLeft { 16 | animation-name: rotateInDownLeft; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_entrances/rotateInDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownRight { 16 | animation-name: rotateInDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_entrances/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpLeft { 16 | animation-name: rotateInUpLeft; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_entrances/rotateInUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, -90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpRight { 16 | animation-name: rotateInUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_exits/rotateOut.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOut { 2 | 0% { 3 | transform-origin: center; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: center; 9 | transform: rotate3d(0, 0, 1, 200deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOut { 15 | animation-name: rotateOut; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_exits/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, 45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownLeft { 15 | animation-name: rotateOutDownLeft; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_exits/rotateOutDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownRight { 15 | animation-name: rotateOutDownRight; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_exits/rotateOutUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpLeft { 15 | animation-name: rotateOutUpLeft; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/rotating_exits/rotateOutUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, 90deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpRight { 15 | animation-name: rotateOutUpRight; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_entrances/slideInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | 0% { 3 | transform: translate3d(0, -100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInDown { 13 | animation-name: slideInDown; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_entrances/slideInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | 0% { 3 | transform: translate3d(-100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInLeft { 13 | animation-name: slideInLeft; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_entrances/slideInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | 0% { 3 | transform: translate3d(100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInRight { 13 | animation-name: slideInRight; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_entrances/slideInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | 0% { 3 | transform: translate3d(0, 100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInUp { 13 | animation-name: slideInUp; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_exits/slideOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutDown { 2 | 0% { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .slideOutDown { 13 | animation-name: slideOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_exits/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | 0% { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutLeft { 13 | animation-name: slideOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_exits/slideOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutRight { 2 | 0% { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutRight { 13 | animation-name: slideOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/sliding_exits/slideOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutUp { 2 | 0% { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .slideOutUp { 13 | animation-name: slideOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/specials/hinge.css: -------------------------------------------------------------------------------- 1 | @keyframes hinge { 2 | 0% { 3 | transform-origin: top left; 4 | animation-timing-function: ease-in-out; 5 | } 6 | 7 | 20%, 60% { 8 | transform: rotate3d(0, 0, 1, 80deg); 9 | transform-origin: top left; 10 | animation-timing-function: ease-in-out; 11 | } 12 | 13 | 40%, 80% { 14 | transform: rotate3d(0, 0, 1, 60deg); 15 | transform-origin: top left; 16 | animation-timing-function: ease-in-out; 17 | opacity: 1; 18 | } 19 | 20 | 100% { 21 | transform: translate3d(0, 700px, 0); 22 | opacity: 0; 23 | } 24 | } 25 | 26 | .hinge { 27 | animation-name: hinge; 28 | } 29 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/specials/rollIn.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollIn { 4 | 0% { 5 | opacity: 0; 6 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 7 | } 8 | 9 | 100% { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/specials/rollOut.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollOut { 4 | 0% { 5 | opacity: 1; 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 11 | } 12 | } 13 | 14 | .rollOut { 15 | animation-name: rollOut; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.3, .3, .3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .zoomIn { 13 | animation-name: zoomIn; 14 | } 15 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_entrances/zoomInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInDown { 16 | animation-name: zoomInDown; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_entrances/zoomInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInLeft { 16 | animation-name: zoomInLeft; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_entrances/zoomInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInRight { 16 | animation-name: zoomInRight; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_entrances/zoomInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInUp { 16 | animation-name: zoomInUp; 17 | } 18 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_exits/zoomOut.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOut { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 50% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | } 14 | } 15 | 16 | .zoomOut { 17 | animation-name: zoomOut; 18 | } 19 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_exits/zoomOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutDown { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutDown { 17 | animation-name: zoomOutDown; 18 | } 19 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_exits/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutLeft { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(-2000px, 0, 0); 10 | transform-origin: left center; 11 | } 12 | } 13 | 14 | .zoomOutLeft { 15 | animation-name: zoomOutLeft; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_exits/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(2000px, 0, 0); 10 | transform-origin: right center; 11 | } 12 | } 13 | 14 | .zoomOutRight { 15 | animation-name: zoomOutRight; 16 | } 17 | -------------------------------------------------------------------------------- /demo/bower_components/animate.css/source/zooming_exits/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutUp { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutUp { 17 | animation-name: zoomOutUp; 18 | } 19 | -------------------------------------------------------------------------------- /demo/gulpfile.js: -------------------------------------------------------------------------------- 1 | var $ = require('gulp-load-plugins')(); 2 | var gulp = require('gulp'); 3 | var babel = require("gulp-babel"); 4 | var react = require('gulp-react'); 5 | var notify = require("gulp-notify"); 6 | var browserify = require('browserify'); 7 | var babelify = require('babelify'); 8 | var source = require('vinyl-source-stream'); 9 | 10 | swallowError = function(error) { 11 | console.log(error.toString()); 12 | notify().write(error.toString()); 13 | this.emit('end'); 14 | }; 15 | 16 | 17 | gulp.task('build', function() { 18 | var b = browserify({ 19 | entries: 'src/index.js', 20 | extensions: ['.js'], 21 | transform: [ 22 | babelify.configure({ 23 | stage: 0, 24 | }) 25 | ] 26 | }) 27 | b.bundle().on('error', function(err) { 28 | notify().write(err.toString()); 29 | this.emit("end"); 30 | }).pipe(source('bundle.js')) 31 | .pipe(gulp.dest('dist/')) 32 | .pipe($.connect.reload()) 33 | }); 34 | 35 | gulp.task("connect", function() { 36 | return $.connect.server({ 37 | root: ".", 38 | port: 1338, 39 | livereload: true 40 | }); 41 | }); 42 | 43 | gulp.task('watch', function() { 44 | gulp.watch(['src/**'], ['build']); 45 | }); 46 | 47 | gulp.task('default', ['watch', 'build', 'connect']); 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 73 | 74 | 75 |
76 | source code 77 |
78 | 79 |
80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-scroll-effects-demo", 3 | "version": "1.0.0", 4 | "description": "React component to animate elements on scroll with animate.css", 5 | "dependencies": { 6 | "babel-core": "^5.6.17", 7 | "babel-loader": "^5.3.1", 8 | "babelify": "^6.1.2", 9 | "browserify": "^10.2.6", 10 | "gulp": "^3.9.0", 11 | "gulp-babel": "^5.1.0", 12 | "gulp-connect": "^2.2.0", 13 | "gulp-load-plugins": "^0.5.3", 14 | "gulp-notify": "^2.2.0", 15 | "gulp-react": "^3.0.1", 16 | "node-libs-browser": "^0.5.2", 17 | "react": "^0.13.3", 18 | "react-scroll-effects": "^1.0.9", 19 | "vinyl-source-stream": "^1.1.0", 20 | "webpack": "^1.10.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react/addons'; 2 | import ScrollEffect from '../src/react-scroll-effects'; 3 | 4 | class App { 5 | callbackAnimateElement4() { /* example callback for 3 element */ 6 | alert('callback animate of 4 element'); 7 | } 8 | render() { 9 | return ( 10 |
11 |
12 | { /* fadeInUp */ } 13 | 1 14 | 15 |
16 |
17 | { /* slideInRight, custom duration, 2 classes */ } 18 | 2 19 | 20 |
21 |
22 | { /* full */ } 23 |
    24 |
  • 25 | test 26 |
    • 27 |
  • 28 | test 29 |
    • 30 |
  • 31 | test 32 |
    • 33 |
34 | 35 |
36 |
37 | { /* callback */ } 38 | 4 39 | 40 |
41 |
42 | { /* zoomInUp with offset */ } 43 | 5 44 | 45 |
46 |
47 | ); 48 | } 49 | } 50 | 51 | React.render( 52 | , 53 | document.getElementById('app') 54 | ); -------------------------------------------------------------------------------- /dist/scrollEffects.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t=o+1*this.props.offset&&(this.setState({animated:!0}),this.props.queueClass&&this.queueAnimate(),this.props.callback&&this.singleAnimate())}}},{key:"render",value:function(){var e=this,t=this.props,n=this.state,o=(0,_classnames2.default)(_defineProperty({animated:!0},t.animate,n.animated&&""===t.queueClass));o+=" "+t.className;var r=n.animated?{}:{visibility:"hidden"};return""!==t.duration&&(r.WebkitAnimationDuration=t.duration+"s",r.animationDuration=t.duration+"s"),_react2.default.createElement("div",{className:o,style:_extends({style:r},t.style),ref:function(t){e.node=t}},t.children)}}]),t}(_react.Component);exports.default=ScrollEffect,ScrollEffect.defaultProps={animate:"fadeInUp",offset:100,className:"",duration:1,queueDuration:1,queueClass:"",callback:function(){}},ScrollEffect.propTypes={animate:_react.PropTypes.string,callback:_react.PropTypes.func,duration:_react.PropTypes.number,offset:_react.PropTypes.number,queueClass:_react.PropTypes.string,queueDuration:_react.PropTypes.number},module.exports=exports.default; -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var babel = require("gulp-babel"); 3 | var babelify = require('babelify'); 4 | var concat = require("gulp-concat"); 5 | var uglify = require('gulp-uglifyjs'); 6 | 7 | gulp.task('build', function() { 8 | gulp.src("src/scroll-effects.js") 9 | .pipe(concat("scrollEffects.min.js")) 10 | .pipe(babel()) 11 | .pipe(uglify()) 12 | .pipe(gulp.dest("dist")); 13 | }); 14 | 15 | 16 | gulp.task('watch', function() { 17 | gulp.watch(['src/**'], ['build']); 18 | }); 19 | 20 | gulp.task('default', ['watch', 'build']); 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-scroll-effects", 3 | "version": "1.0.13", 4 | "description": "React component to animate elements on scroll with animate.css", 5 | "main": "dist/scrollEffects.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/anorudes/React-Scroll-Effect.git" 12 | }, 13 | "keywords": [ 14 | "reactScrollEffects", 15 | "react", 16 | "reactJS", 17 | "react-component", 18 | "animate", 19 | "scroll" 20 | ], 21 | "author": "anorudes", 22 | "license": "ISC", 23 | "bugs": { 24 | "url": "https://github.com/anorudes/React-Scroll-Effect/issues" 25 | }, 26 | "homepage": "https://github.com/anorudes/React-Scroll-Effect", 27 | "peerDependencies": { 28 | "classnames": "^2.2.5", 29 | "react": "^15.4.1" 30 | }, 31 | "devDependencies": { 32 | "babelify": "^6.1.2", 33 | "gulp": "^3.9.1", 34 | "gulp-babel": "^5.1.0", 35 | "gulp-concat": "^2.6.0", 36 | "gulp-uglifyjs": "^0.6.2" 37 | }, 38 | "dependencies": { 39 | "lodash.throttle": "^4.1.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/scroll-effects.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import throttle from 'lodash.throttle'; 3 | import classNames from 'classnames'; 4 | 5 | export default class ScrollEffect extends Component { 6 | static posTop() { 7 | if (typeof window.pageYOffset !== 'undefined') { 8 | return window.pageYOffset; 9 | } else if (document.documentElement.scrollTop) { 10 | return document.documentElement.scrollTop; 11 | } else if (document.body.scrollTop) { 12 | return document.body.scrollTop; 13 | } 14 | return 0; 15 | } 16 | 17 | constructor() { 18 | super(); 19 | this.state = { 20 | animated: false 21 | }; 22 | if (window && window.addEventListener) { 23 | window.addEventListener('scroll', throttle(this.handleScroll.bind(this), 200)); 24 | } 25 | } 26 | 27 | componentDidMount() { 28 | this.handleScroll(); 29 | } 30 | 31 | componentWillUnmount() { 32 | if (window && window.addEventListener) { 33 | window.removeEventListener('scroll', this.handleScroll.bind(this)); 34 | } 35 | } 36 | 37 | // This is for the callback function to work. 38 | singleAnimate() { 39 | this.setState({ 40 | animated: true 41 | }); 42 | /* callback */ 43 | setTimeout(() => { 44 | this.props.callback(); 45 | }, this.props.duration * 1000); 46 | } 47 | 48 | // This is for the queueClass to work. 49 | queueAnimate() { 50 | const element = this.node; 51 | const checkClass = el => 52 | el.className === this.props.queueClass; 53 | let number = 0; 54 | const setClass = (el) => { 55 | const element1 = el; 56 | element1.style.visibility = 'hidden'; 57 | setTimeout(() => { 58 | element1.style.visibility = 'visible'; 59 | element1.className = `${element1.className} animated ${this.props.animate}`; 60 | }, number * (this.props.queueDuration * 1000)); 61 | number += 1; 62 | }; 63 | const findClass = (element2) => { 64 | Array.prototype.forEach.call(element2.childNodes, (child) => { 65 | findClass(child); 66 | if (checkClass(child)) { 67 | setClass(child); 68 | } 69 | }); 70 | }; 71 | 72 | // Find queue classes 73 | findClass(element); 74 | 75 | // Callback 76 | setTimeout(() => { 77 | this.props.callback(); 78 | }, this.props.duration * 1000 * number); 79 | } 80 | 81 | handleScroll() { 82 | if (!this.state.animated) { 83 | const element = this.node; 84 | const top = ScrollEffect.posTop(); 85 | const elementPositionY = element.getBoundingClientRect().top + top; 86 | const scrollPositionY = window.scrollY ? window.scrollY : window.pageYOffset; 87 | const windowHeight = window.innerHeight; 88 | if (scrollPositionY + (windowHeight) >= elementPositionY + (this.props.offset * 1)) { 89 | this.setState({ 90 | animated: true 91 | }); 92 | if (this.props.queueClass) { 93 | this.queueAnimate(); 94 | } 95 | if (this.props.callback) { 96 | this.singleAnimate(); 97 | } 98 | } 99 | } 100 | } 101 | 102 | render() { 103 | const { props, state } = this; 104 | 105 | let classes = classNames({ 106 | animated: true, 107 | [props.animate]: state.animated && props.queueClass === '' 108 | }); 109 | classes += ` ${props.className}`; 110 | 111 | const style = state.animated ? {} : { 112 | visibility: 'hidden' 113 | }; 114 | 115 | if (props.duration !== '') { 116 | style.WebkitAnimationDuration = `${props.duration}s`; 117 | style.animationDuration = `${props.duration}s`; 118 | } 119 | 120 | return ( 121 |
{ this.node = node; }} 125 | > 126 | {props.children} 127 |
128 | ); 129 | } 130 | } 131 | 132 | ScrollEffect.defaultProps = { 133 | animate: 'fadeInUp', 134 | offset: 100, 135 | className: '', 136 | duration: 1, 137 | queueDuration: 1, 138 | queueClass: '', 139 | callback: () => {} 140 | }; 141 | 142 | ScrollEffect.propTypes = { 143 | animate: PropTypes.string, 144 | callback: PropTypes.func, 145 | duration: PropTypes.number, 146 | offset: PropTypes.number, 147 | queueClass: PropTypes.string, 148 | queueDuration: PropTypes.number, 149 | }; 150 | --------------------------------------------------------------------------------