├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── README.md ├── packages └── transitions │ ├── README.md │ ├── package.js │ ├── transitions-tests.js │ ├── transitions.css │ └── transitions.js ├── transitions.css ├── transitions.html └── transitions.js /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | -------------------------------------------------------------------------------- /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | 1xrjh821a5e9sm122b7qj 8 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-platform 8 | autopublish 9 | insecure 10 | iron:router 11 | fastclick 12 | jamielob:transitions 13 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | browser 2 | ios 3 | server 4 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.1.0.1 2 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | aldeed:template-extension@3.4.3 2 | autopublish@1.0.3 3 | autoupdate@1.2.1 4 | base64@1.0.3 5 | binary-heap@1.0.3 6 | blaze@2.1.2 7 | blaze-tools@1.0.3 8 | boilerplate-generator@1.0.3 9 | callback-hook@1.0.3 10 | check@1.0.5 11 | ddp@1.1.0 12 | deps@1.0.7 13 | ejson@1.0.6 14 | fastclick@1.0.3 15 | geojson-utils@1.0.3 16 | html-tools@1.0.4 17 | htmljs@1.0.4 18 | http@1.1.0 19 | id-map@1.0.3 20 | insecure@1.0.3 21 | iron:controller@1.0.7 22 | iron:core@1.0.7 23 | iron:dynamic-template@1.0.7 24 | iron:layout@1.0.7 25 | iron:location@1.0.7 26 | iron:middleware-stack@1.0.7 27 | iron:router@1.0.7 28 | iron:url@1.0.7 29 | jamielob:transitions@2.0.3 30 | jquery@1.11.3_2 31 | json@1.0.3 32 | launch-screen@1.0.2 33 | livedata@1.0.13 34 | logging@1.0.7 35 | meteor@1.1.6 36 | meteor-platform@1.2.2 37 | minifiers@1.1.5 38 | minimongo@1.0.8 39 | mobile-status-bar@1.0.3 40 | mongo@1.1.0 41 | observe-sequence@1.0.6 42 | ordered-dict@1.0.3 43 | random@1.0.3 44 | reactive-dict@1.1.0 45 | reactive-var@1.0.5 46 | reload@1.1.3 47 | retry@1.0.3 48 | routepolicy@1.0.5 49 | session@1.1.0 50 | spacebars@1.0.6 51 | spacebars-compiler@1.0.6 52 | templating@1.1.1 53 | tracker@1.0.7 54 | ui@1.0.6 55 | underscore@1.0.3 56 | url@1.0.4 57 | webapp@1.2.0 58 | webapp-hashing@1.0.3 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Meteor Transitions Demo Suite 2 | 3 | Easy to use CSS3 transitions for use in MeteorJS. Works with iron:router. 4 | 5 | **Demo**: http://transitions-demo.meteor.com 6 | 7 | ## See package repository for full usage details. 8 | 9 | https://github.com/jamielob/transitions -------------------------------------------------------------------------------- /packages/transitions/README.md: -------------------------------------------------------------------------------- 1 | # Meteor Transitions 2 | 3 | Easy to use CSS3 transitions for use in MeteorJS. 4 | 5 | **Demo**: http://transitions-demo.meteor.com 6 | 7 | **Demo Repository**: https://github.com/jamielob/transitions-demo 8 | 9 | ## Getting started 10 | 11 | Add the transitions package to you your project: 12 | 13 | ``` 14 | meteor add jamielob:transitions 15 | ``` 16 | 17 | Only 3 things are needed to make transitions work. 18 | * A container div 19 | * A content div 20 | * Choosing the transitions you want to use for the in and out animations 21 | 22 | 23 | ## Full page transitions using iron-router 24 | 25 | After adding and setting up the iron-router package, wrap your `{{>yield}}` in a `
` with a class of `transitions-container`. If you want the container to be full screen then you'll need to add `height: 100%;` to the container. 26 | 27 | ``` 28 | 33 | ``` 34 | 35 | Next, wrap your content on each template in a `
` with a class of `transitions-content`. 36 | 37 | ``` 38 | 43 | ``` 44 | Pick the in and out transition animations you want and set them on the link or button, using `data-transition-in` and `data-transition-out`. 45 | 46 | ## Inline transitions using dynamic templates 47 | 48 | Wrap your dynamic template in a `
` with a class of `transitions-container`. 49 | 50 | ``` 51 |
52 | {{> UI.dynamic template=dynamicTemplate}} 53 |
54 | ``` 55 | 56 | Next, wrap your content on each template in a `
` with a class of `transitions-content`. 57 | 58 | ``` 59 | 64 | ``` 65 | Now, each time you switch the value of `dynamicTemplate`, the content with transition with the animation of your choice. If you are triggering the change via a button or link, you can put the `data-transition-in` and `data-transition-out` on there as in the iron:router example. Or you can set a default animation for all transitions to use. 66 | 67 | 68 | 69 | ## Configuration (Optional) 70 | 71 | You can set the id of the container and the class of the content to whatever you want like this: 72 | 73 | ``` 74 | Transitions.container = '.custom-container'; 75 | Transitions.content = '.custom-content'; 76 | ``` 77 | 78 | You can set up default transitions so that all of your links will use. For example: 79 | 80 | ``` 81 | Transitions.transitionIn = 'slideLeftIn'; 82 | Transitions.transitionIn = 'slideLeftOut'; 83 | ``` 84 | 85 | ## Available Transitions 86 | 87 | Build the transition name using the options below. For example, slideUpIn and slideUpOut are valid tansition names. 88 | 89 | * slide - Up | Down | Left | Right - Out | In 90 | * slideFade - Up | Down | Left | Right - Out | In 91 | * scale - Out | In 92 | * pivot - Up | Down | Left | Right - Out | In 93 | * flip - Up | Down | Left | Right - Out | In 94 | * fall 95 | * spin - Left | Right - Out | In 96 | * fold - Up | Down | Left | Right - Out | In 97 | * hinge - Top | Bottom | Left | Right - Out | In 98 | * room - Up | Down | Left | Right - Out | In 99 | * cube - Up | Down | Left | Right - Out | In 100 | * swing - Up | Down | Left | Right - Out | In 101 | * sweep - Up | Down | Left | Right - Out | In 102 | 103 | ## Additional Classes 104 | 105 | **onTop**: Ensures that the transition remains on top. Needed for some transition combinations. For example, you might decide to use roomUpIn and onTop together like so - `data-transition-in="roomUpIn onTop"` 106 | 107 | **delay100**: Delays the transition from started for set time in ms. Available in 100 increments up to 1000. For example - `data-transition-in="sweepUpIn delay500"` 108 | 109 | ## Known Issues / To Do 110 | 111 | * Sweep seems to need delay100 or above to work consistently on iPhone (as in demo). -------------------------------------------------------------------------------- /packages/transitions/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'jamielob:transitions', 3 | version: '2.0.3', 4 | // Brief, one-line summary of the package. 5 | summary: 'Easy to use CSS3 transitions for Meteor.', 6 | // URL to the Git repository containing the source code for this package. 7 | git: 'https://github.com/jamielob/transitions', 8 | // By default, Meteor will default to using README.md for documentation. 9 | // To avoid submitting documentation, set this field to null. 10 | documentation: 'README.md' 11 | }); 12 | 13 | Package.onUse(function(api) { 14 | api.versionsFrom('1.0.5'); 15 | api.use('aldeed:template-extension@3.4.3'); 16 | api.use(['templating'], 'client'); 17 | api.addFiles(['transitions.js','transitions.css']); 18 | api.export("Transitions"); 19 | }); 20 | 21 | // Package.onTest(function(api) { 22 | // api.use('tinytest'); 23 | // api.use('jamielob:transitions'); 24 | // api.addFiles('transitions-tests.js'); 25 | // }); 26 | -------------------------------------------------------------------------------- /packages/transitions/transitions-tests.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamielob/transitions-demo/e37f2e37fa7960b1752f8249571267e20d12c229/packages/transitions/transitions-tests.js -------------------------------------------------------------------------------- /packages/transitions/transitions.css: -------------------------------------------------------------------------------- 1 | /*=========================================== 2 | = jamielob:transitions = 3 | ===========================================*/ 4 | 5 | /* Built by Jamie Loberman */ 6 | /* Inspired by http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ */ 7 | /* 8 | Transitions: 9 | slide 10 | slideFade 11 | scale 12 | pivot 13 | flip 14 | fall 15 | spin 16 | fold 17 | hinge 18 | room 19 | cube 20 | //carousel 21 | swing 22 | sweep 23 | ++delay[100,200,300,...,1000] 24 | */ 25 | 26 | /* Setup */ 27 | 28 | 29 | html, body { 30 | height:100%; 31 | } 32 | /* Set dynamically in JS to allow custom id and class names */ 33 | 34 | /*.transitions-container { 35 | position: relative; 36 | -webkit-perspective: 1200px; 37 | -moz-perspective: 1200px; 38 | perspective: 1200px; 39 | } 40 | .transitions-content { 41 | width:100%; 42 | height:100%; 43 | overflow-y: scroll; 44 | -webkit-overflow-scrolling: touch; 45 | -webkit-backface-visibility: hidden; 46 | -moz-backface-visibility: hidden; 47 | backface-visibility: hidden; 48 | -webkit-transform: translate3d(0, 0, 0); 49 | -moz-transform: translate3d(0, 0, 0); 50 | transform: translate3d(0, 0, 0); 51 | -webkit-transform-style: preserve-3d; 52 | -moz-transform-style: preserve-3d; 53 | transform-style: preserve-3d; 54 | } 55 | */ 56 | 57 | .transition-in { 58 | position: absolute; 59 | top:0; 60 | left:0; 61 | overflow:hidden; 62 | } 63 | .transition-out { 64 | position: relative; 65 | z-index: 888; 66 | overflow:hidden; 67 | } 68 | .onTop, 69 | .transition-in.onTop, 70 | .transition-out.onTop { 71 | z-index: 999; 72 | } 73 | /*Class to disable links while transitionin*/ 74 | .transition-button-disable { 75 | pointer-events: none; 76 | } 77 | 78 | 79 | 80 | /* slide */ 81 | 82 | .slideLeftOut { 83 | -webkit-animation: slideLeftOut .6s ease both; 84 | animation: slideLeftOut .6s ease both; 85 | } 86 | 87 | .slideRightIn { 88 | -webkit-animation: slideRightIn .6s ease both; 89 | animation: slideRightIn .6s ease both; 90 | } 91 | 92 | .slideRightOut { 93 | -webkit-animation: slideRightOut .6s ease both; 94 | animation: slideRightOut .6s ease both; 95 | } 96 | 97 | .slideLeftIn { 98 | -webkit-animation: slideLeftIn .6s ease both; 99 | animation: slideLeftIn .6s ease both; 100 | } 101 | 102 | .slideUpOut { 103 | -webkit-animation: slideUpOut .6s ease both; 104 | animation: slideUpOut .6s ease both; 105 | } 106 | 107 | .slideDownIn { 108 | -webkit-animation: slideDownIn .6s ease both; 109 | animation: slideDownIn .6s ease both; 110 | } 111 | 112 | .slideDownOut { 113 | -webkit-animation: slideDownOut .6s ease both; 114 | animation: slideDownOut .6s ease both; 115 | } 116 | 117 | .slideUpIn { 118 | -webkit-animation: slideUpIn .6s ease both; 119 | animation: slideUpIn .6s ease both; 120 | } 121 | 122 | /* fade */ 123 | 124 | .fadeOut { 125 | -webkit-animation: fadeOut .7s ease both; 126 | animation: fadeOut .7s ease both; 127 | } 128 | .fadeIn { 129 | -webkit-animation: fadeIn .7s ease both; 130 | animation: fadeIn .7s ease both; 131 | opacity: 0; 132 | } 133 | 134 | /* slide from / to and fade */ 135 | 136 | .slideFadeLeftOut { 137 | -webkit-animation: slideFadeLeftOut .7s ease both; 138 | animation: slideFadeLeftOut .7s ease both; 139 | } 140 | 141 | .slideFadeRightIn { 142 | -webkit-animation: slideFadeRightIn .7s ease both; 143 | animation: slideFadeRightIn .7s ease both; 144 | } 145 | 146 | .slideFadeRightOut { 147 | -webkit-animation: slideFadeRightOut .7s ease both; 148 | animation: slideFadeRightOut .7s ease both; 149 | } 150 | 151 | .slideFadeLeftIn { 152 | -webkit-animation: slideFadeLeftIn .7s ease both; 153 | animation: slideFadeLeftIn .7s ease both; 154 | } 155 | 156 | .slideFadeUpOut { 157 | -webkit-animation: slideFadeUpOut .7s ease both; 158 | animation: slideFadeUpOut .7s ease both; 159 | } 160 | 161 | .slideFadeDownIn { 162 | -webkit-animation: slideFadeDownIn .7s ease both; 163 | animation: slideFadeDownIn .7s ease both; 164 | } 165 | 166 | .slideFadeDownOut { 167 | -webkit-animation: slideFadeDownOut .7s ease both; 168 | animation: slideFadeDownOut .7s ease both; 169 | } 170 | 171 | .slideFadeUpIn { 172 | -webkit-animation: slideFadeUpIn .7s ease both; 173 | animation: slideFadeUpIn .7s ease both; 174 | } 175 | 176 | /* scale and fade */ 177 | 178 | .scaleOut { 179 | -webkit-animation: scaleOut .7s ease both; 180 | animation: scaleOut .7s ease both; 181 | } 182 | 183 | .scaleIn { 184 | -webkit-animation: scaleIn .7s ease both; 185 | animation: scaleIn .7s ease both; 186 | } 187 | 188 | .scaleInDown { 189 | -webkit-animation: scaleInDown .5s ease both; 190 | animation: scaleInDown .5s ease both; 191 | } 192 | 193 | .scaleOutUp { 194 | -webkit-animation: scaleOutUp .5s ease both; 195 | animation: scaleOutUp .5s ease both; 196 | } 197 | 198 | .scaleOutCenter { 199 | -webkit-animation: scaleOutCenter .4s ease-in both; 200 | animation: scaleOutCenter .4s ease-in both; 201 | } 202 | 203 | .scaleInCenter { 204 | -webkit-animation: scaleInCenter .4s ease-out both; 205 | animation: scaleInCenter .4s ease-out both; 206 | } 207 | 208 | 209 | /* pivot */ 210 | 211 | .pivotLeftOut { 212 | -webkit-transform-origin: 0% 50%; 213 | transform-origin: 0% 50%; 214 | -webkit-animation: pivotLeftOut .8s both ease-in; 215 | animation: pivotLeftOut .8s both ease-in; 216 | } 217 | .pivotRightOut { 218 | -webkit-transform-origin: 100% 50%; 219 | transform-origin: 100% 50%; 220 | -webkit-animation: pivotRightOut .8s both ease-in; 221 | animation: pivotRightOut .8s both ease-in; 222 | } 223 | .pivotDownOut { 224 | -webkit-transform-origin: 50% 100%; 225 | transform-origin: 50% 100%; 226 | -webkit-animation: pivotUpOut .8s both ease-in; 227 | animation: pivotUpOut .8s both ease-in; 228 | } 229 | .pivotUpOut { 230 | -webkit-transform-origin: 50% 0%; 231 | transform-origin: 50% 0%; 232 | -webkit-animation: pivotDownOut .8s both ease-in; 233 | animation: pivotDownOut .8s both ease-in; 234 | } 235 | 236 | .pivotLeftIn { 237 | -webkit-transform-origin: 0% 50%; 238 | transform-origin: 0% 50%; 239 | -webkit-animation: pivotLeftIn .8s both ease-in; 240 | animation: pivotLeftOut .8s both ease-in; 241 | } 242 | .pivotRightIn { 243 | -webkit-transform-origin: 100% 50%; 244 | transform-origin: 100% 50%; 245 | -webkit-animation: pivotRightIn .8s both ease-in; 246 | animation: pivotRightIn .8s both ease-in; 247 | } 248 | .pivotDownIn { 249 | -webkit-transform-origin: 50% 100%; 250 | transform-origin: 50% 100%; 251 | -webkit-animation: pivotDownIn .8s both ease-in; 252 | animation: pivotDownIn .8s both ease-in; 253 | } 254 | .pivotUpIn { 255 | -webkit-transform-origin: 50% 0%; 256 | transform-origin: 50% 0%; 257 | -webkit-animation: pivotDownIn .8s both ease-in; 258 | animation: pivotDownIn .8s both ease-in; 259 | } 260 | 261 | /* flip */ 262 | 263 | .flipRightOut { 264 | -webkit-transform-origin: 50% 50%; 265 | transform-origin: 50% 50%; 266 | -webkit-animation: flipRightOut .5s both ease-in; 267 | animation: flipRightOut .5s both ease-in; 268 | } 269 | .flipRightIn { 270 | -webkit-transform-origin: 50% 50%; 271 | transform-origin: 50% 50%; 272 | -webkit-animation: flipRightIn .5s both ease-out; 273 | animation: flipRightIn .5s both ease-out; 274 | } 275 | .flipLeftIn { 276 | -webkit-transform-origin: 50% 50%; 277 | transform-origin: 50% 50%; 278 | -webkit-animation: flipLeftIn .5s both ease-out; 279 | animation: flipLeftIn .5s both ease-out; 280 | } 281 | .flipLeftOut { 282 | -webkit-transform-origin: 50% 50%; 283 | transform-origin: 50% 50%; 284 | -webkit-animation: flipLeftOut .5s both ease-in; 285 | animation: flipLeftOut .5s both ease-in; 286 | } 287 | .flipUpOut { 288 | -webkit-transform-origin: 50% 50%; 289 | transform-origin: 50% 50%; 290 | -webkit-animation: flipUpOut .5s both ease-in; 291 | animation: flipUpOut .5s both ease-in; 292 | } 293 | .flipUpIn { 294 | -webkit-transform-origin: 50% 50%; 295 | transform-origin: 50% 50%; 296 | -webkit-animation: flipUpIn .5s both ease-out; 297 | animation: flipUpIn .5s both ease-out; 298 | } 299 | .flipDownIn { 300 | -webkit-transform-origin: 50% 50%; 301 | transform-origin: 50% 50%; 302 | -webkit-animation: flipDownIn .5s both ease-out; 303 | animation: flipDownIn .5s both ease-out; 304 | } 305 | .flipDownOut { 306 | -webkit-transform-origin: 50% 50%; 307 | transform-origin: 50% 50%; 308 | -webkit-animation: flipDownOut .5s both ease-in; 309 | animation: flipDownOut .5s both ease-in; 310 | } 311 | 312 | 313 | /* fall */ 314 | 315 | .fall { 316 | -webkit-transform-origin: 0% 0%; 317 | transform-origin: 0% 0%; 318 | -webkit-animation: rotateFall 1s both ease-in; 319 | animation: rotateFall 1s both ease-in; 320 | z-index: 99; 321 | } 322 | 323 | /* newspaper */ 324 | .spinRightOut { 325 | -webkit-transform-origin: 50% 50%; 326 | transform-origin: 50% 50%; 327 | -webkit-animation: spinRightOut .5s both ease-in; 328 | animation: spinRightOut .5s both ease-in; 329 | } 330 | .spinRightIn { 331 | -webkit-transform-origin: 50% 50%; 332 | transform-origin: 50% 50%; 333 | -webkit-animation: spinRightIn .5s both ease-out; 334 | animation: spinRightIn .5s both ease-out; 335 | } 336 | 337 | .spinLeftOut { 338 | -webkit-transform-origin: 50% 50%; 339 | transform-origin: 50% 50%; 340 | -webkit-animation: spinLeftOut .5s both ease-in; 341 | animation: spinLeftOut .5s both ease-in; 342 | } 343 | .spinLeftIn { 344 | -webkit-transform-origin: 50% 50%; 345 | transform-origin: 50% 50%; 346 | -webkit-animation: spinLeftIn .5s both ease-out; 347 | animation: spinLeftIn .5s both ease-out; 348 | } 349 | 350 | /* hinge */ 351 | .hingeLeftOut { 352 | -webkit-transform-origin: 0% 50%; 353 | transform-origin: 0% 50%; 354 | -webkit-animation: hingeLeftOut .8s both ease; 355 | animation: hingeLeftOut .8s both ease; 356 | } 357 | .hingeRightOut { 358 | -webkit-transform-origin: 100% 50%; 359 | transform-origin: 100% 50%; 360 | -webkit-animation: hingeRightOut .8s both ease; 361 | animation: hingeRightOut .8s both ease; 362 | } 363 | .hingeUpOut { 364 | -webkit-transform-origin: 50% 0%; 365 | transform-origin: 50% 0%; 366 | -webkit-animation: hingeUpOut .8s both ease; 367 | animation: hingeUpOut .8s both ease; 368 | } 369 | .hingeDownOut { 370 | -webkit-transform-origin: 50% 100%; 371 | transform-origin: 50% 100%; 372 | -webkit-animation: hingeDownOut .8s both ease; 373 | animation: hingeDownOut .8s both ease; 374 | } 375 | 376 | .hingeRightIn { 377 | -webkit-transform-origin: 100% 50%; 378 | transform-origin: 100% 50%; 379 | -webkit-animation: hingeRightIn .5s both ease; 380 | animation: hingeRightIn .5s both ease; 381 | } 382 | .hingeLeftIn { 383 | -webkit-transform-origin: 0% 50%; 384 | transform-origin: 0% 50%; 385 | -webkit-animation: hingeLeftIn .5s both ease; 386 | animation: hingeLeftIn .5s both ease; 387 | } 388 | .hingeUpIn { 389 | -webkit-transform-origin: 50% 0%; 390 | transform-origin: 50% 0%; 391 | -webkit-animation: hingeUpIn .5s both ease; 392 | animation: hingeUpIn .5s both ease; 393 | } 394 | .hingeDownIn { 395 | -webkit-transform-origin: 50% 100%; 396 | transform-origin: 50% 100%; 397 | -webkit-animation: hingeDownIn .5s both ease; 398 | animation: hingeDownIn .5s both ease; 399 | } 400 | 401 | /* fold */ 402 | .foldRightOut { 403 | -webkit-transform-origin: 0% 50%; 404 | transform-origin: 0% 50%; 405 | -webkit-animation: foldRightOut .7s both ease; 406 | animation: foldRightOut .7s both ease; 407 | } 408 | .foldLeftOut { 409 | -webkit-transform-origin: 100% 50%; 410 | transform-origin: 100% 50%; 411 | -webkit-animation: foldLeftOut .7s both ease; 412 | animation: foldLeftOut .7s both ease; 413 | } 414 | .foldUpOut { 415 | -webkit-transform-origin: 50% 100%; 416 | transform-origin: 50% 100%; 417 | -webkit-animation: foldUpOut .7s both ease; 418 | animation: foldUpOut .7s both ease; 419 | } 420 | .foldDownOut { 421 | -webkit-transform-origin: 50% 0%; 422 | transform-origin: 50% 0%; 423 | -webkit-animation: foldDownOut .7s both ease; 424 | animation: foldDownOut .7s both ease; 425 | } 426 | 427 | .foldLeftIn { 428 | -webkit-transform-origin: 100% 50%; 429 | transform-origin: 100% 50%; 430 | -webkit-animation: foldLeftIn .7s both ease; 431 | animation: foldLeftIn .7s both ease; 432 | } 433 | .foldRightIn { 434 | -webkit-transform-origin: 0% 50%; 435 | transform-origin: 0% 50%; 436 | -webkit-animation: foldRightIn .7s both ease; 437 | animation: foldRightIn .7s both ease; 438 | } 439 | .foldUpIn { 440 | -webkit-transform-origin: 50% 100%; 441 | transform-origin: 50% 100%; 442 | -webkit-animation: foldUpIn .7s both ease; 443 | animation: foldUpIn .7s both ease; 444 | } 445 | .foldDownIn { 446 | -webkit-transform-origin: 50% 0%; 447 | transform-origin: 50% 0%; 448 | -webkit-animation: foldDownIn .7s both ease; 449 | animation: foldDownIn .7s both ease; 450 | } 451 | 452 | /* room walls */ 453 | .roomLeftOut { 454 | -webkit-transform-origin: 100% 50%; 455 | transform-origin: 100% 50%; 456 | -webkit-animation: roomLeftOut .8s both ease; 457 | animation: roomLeftOut .8s both ease; 458 | } 459 | .roomLeftIn { 460 | -webkit-transform-origin: 0% 50%; 461 | transform-origin: 0% 50%; 462 | -webkit-animation: roomLeftIn .8s both ease; 463 | animation: roomLeftIn .8s both ease; 464 | } 465 | .roomRightOut { 466 | -webkit-transform-origin: 0% 50%; 467 | transform-origin: 0% 50%; 468 | -webkit-animation: roomRightOut .8s both ease; 469 | animation: roomRightOut .8s both ease; 470 | } 471 | .roomRightIn { 472 | -webkit-transform-origin: 100% 50%; 473 | transform-origin: 100% 50%; 474 | -webkit-animation: roomRightIn .8s both ease; 475 | animation: roomRightIn .8s both ease; 476 | } 477 | .roomUpOut { 478 | -webkit-transform-origin: 50% 100%; 479 | transform-origin: 50% 100%; 480 | -webkit-animation: roomUpOut .8s both ease; 481 | animation: roomUpOut .8s both ease; 482 | } 483 | .roomUpIn { 484 | -webkit-transform-origin: 50% 0%; 485 | transform-origin: 50% 0%; 486 | -webkit-animation: roomUpIn .8s both ease; 487 | animation: roomUpIn .8s both ease; 488 | } 489 | .roomDownOut { 490 | -webkit-transform-origin: 50% 0%; 491 | transform-origin: 50% 0%; 492 | -webkit-animation: roomDownOut .8s both ease; 493 | animation: roomDownOut .8s both ease; 494 | } 495 | .roomDownIn { 496 | -webkit-transform-origin: 50% 100%; 497 | transform-origin: 50% 100%; 498 | -webkit-animation: roomDownIn .8s both ease; 499 | animation: roomDownIn .8s both ease; 500 | } 501 | 502 | /* cube */ 503 | .cubeLeftOut { 504 | -webkit-transform-origin: 100% 50%; 505 | transform-origin: 100% 50%; 506 | -webkit-animation: cubeLeftOut .6s both ease-in; 507 | animation: cubeLeftOut .6s both ease-in; 508 | } 509 | .cubeLeftIn { 510 | -webkit-transform-origin: 0% 50%; 511 | transform-origin: 0% 50%; 512 | -webkit-animation: cubeLeftIn .6s both ease-in; 513 | animation: cubeLeftIn .6s both ease-in; 514 | } 515 | .cubeRightOut { 516 | -webkit-transform-origin: 0% 50%; 517 | transform-origin: 0% 50%; 518 | -webkit-animation: cubeRightOut .6s both ease-in; 519 | animation: cubeRightOut .6s both ease-in; 520 | } 521 | .cubeRightIn { 522 | -webkit-transform-origin: 100% 50%; 523 | transform-origin: 100% 50%; 524 | -webkit-animation: cubeRightIn .6s both ease-in; 525 | animation: cubeRightIn .6s both ease-in; 526 | } 527 | .cubeUpOut { 528 | -webkit-transform-origin: 50% 100%; 529 | transform-origin: 50% 100%; 530 | -webkit-animation: cubeUpOut .6s both ease-in; 531 | animation: cubeUpOut .6s both ease-in; 532 | } 533 | .cubeUpIn { 534 | -webkit-transform-origin: 50% 0%; 535 | transform-origin: 50% 0%; 536 | -webkit-animation: cubeUpIn .6s both ease-in; 537 | animation: cubeUpIn .6s both ease-in; 538 | } 539 | .cubeDownOut { 540 | -webkit-transform-origin: 50% 0%; 541 | transform-origin: 50% 0%; 542 | -webkit-animation: cubeDownOut .6s both ease-in; 543 | animation: cubeDownOut .6s both ease-in; 544 | } 545 | .cubeDownIn { 546 | -webkit-transform-origin: 50% 100%; 547 | transform-origin: 50% 100%; 548 | -webkit-animation: cubeDownIn .6s both ease-in; 549 | animation: cubeDownIn .6s both ease-in; 550 | } 551 | 552 | /* carousel */ 553 | /*.carouselLeftOut { 554 | -webkit-transform-origin: 100% 50%; 555 | transform-origin: 100% 50%; 556 | -webkit-animation: carouselLeftOut .8s both ease; 557 | animation: carouselLeftOut .8s both ease; 558 | } 559 | .carouselLeftIn { 560 | -webkit-transform-origin: 0% 50%; 561 | transform-origin: 0% 50%; 562 | -webkit-animation: carouselLeftIn .8s both ease; 563 | animation: carouselLeftIn .8s both ease; 564 | } 565 | .carouselRightOut { 566 | -webkit-transform-origin: 0% 50%; 567 | transform-origin: 0% 50%; 568 | -webkit-animation: carouselRightOut .8s both ease; 569 | animation: carouselRightOut .8s both ease; 570 | } 571 | .carouselRightIn { 572 | -webkit-transform-origin: 100% 50%; 573 | transform-origin: 100% 50%; 574 | -webkit-animation: carouselRightIn .8s both ease; 575 | animation: carouselRightIn .8s both ease; 576 | } 577 | .carouselUpOut { 578 | -webkit-transform-origin: 50% 100%; 579 | transform-origin: 50% 100%; 580 | -webkit-animation: carouselUpOut .8s both ease; 581 | animation: carouselUpOut .8s both ease; 582 | } 583 | .carouselUpIn { 584 | -webkit-transform-origin: 50% 0%; 585 | transform-origin: 50% 0%; 586 | -webkit-animation: carouselUpIn .8s both ease; 587 | animation: carouselUpIn .8s both ease; 588 | } 589 | .carouselDownOut { 590 | -webkit-transform-origin: 50% 0%; 591 | transform-origin: 50% 0%; 592 | -webkit-animation: carouselDownOut .8s both ease; 593 | animation: carouselDownOut .8s both ease; 594 | } 595 | .carouselDownIn { 596 | -webkit-transform-origin: 50% 100%; 597 | transform-origin: 50% 100%; 598 | -webkit-animation: carouselDownIn .8s both ease; 599 | animation: carouselDownIn .8s both ease; 600 | }*/ 601 | 602 | /* sides */ 603 | .swingLeftOut { 604 | -webkit-transform-origin: -50% 50%; 605 | transform-origin: -50% 50%; 606 | -webkit-animation: swingLeftOut .5s both ease-in; 607 | animation: swingLeftOut .5s both ease-in; 608 | } 609 | .swingLeftIn { 610 | -webkit-transform-origin: -50% 50%; 611 | transform-origin: -50% 50%; 612 | -webkit-animation: swingLeftIn .5s both ease-in; 613 | animation: swingLeftIn .5s both ease-in; 614 | } 615 | .swingRightOut { 616 | -webkit-transform-origin: 150% 50%; 617 | transform-origin: 150% 50%; 618 | -webkit-animation: swingRightOut .5s both ease-out; 619 | animation: swingRightOut .5s both ease-out; 620 | } 621 | .swingRightIn { 622 | -webkit-transform-origin: 150% 50%; 623 | transform-origin: 150% 50%; 624 | -webkit-animation: swingRightIn .5s both ease-out; 625 | animation: swingRightIn .5s both ease-out; 626 | } 627 | 628 | 629 | .swingUpOut { 630 | -webkit-transform-origin: 50% 150%; 631 | transform-origin: 50% 150%; 632 | -webkit-animation: swingUpOut .5s both ease-in; 633 | animation: swingUpOut .5s both ease-in; 634 | } 635 | .swingUpIn { 636 | -webkit-transform-origin: 50% 150%; 637 | transform-origin: -50% 150%; 638 | -webkit-animation: swingUpIn .5s both ease-in; 639 | animation: swingUpIn .5s both ease-in; 640 | } 641 | .swingDownOut { 642 | -webkit-transform-origin: 50% -50%; 643 | transform-origin: 50% -50%; 644 | -webkit-animation: swingDownOut .5s both ease-out; 645 | animation: swingDownOut .5s both ease-out; 646 | } 647 | .swingDownIn { 648 | -webkit-transform-origin: 50% -50%; 649 | transform-origin: 50% -50%; 650 | -webkit-animation: swingDownIn .5s both ease-out; 651 | animation: swingDownIn .5s both ease-out; 652 | } 653 | 654 | 655 | /* sweep */ 656 | .sweepLeftOut { 657 | -webkit-animation: sweepLeftOut 1s both ease; 658 | animation: sweepLeftOut 1s both ease; 659 | } 660 | .sweepLeftIn { 661 | -webkit-animation: sweepLeftIn 1s both ease; 662 | animation: sweepLeftIn 1s both ease; 663 | } 664 | 665 | .sweepRightOut { 666 | -webkit-animation: sweepRightOut 1s both ease; 667 | animation: sweepRightOut 1s both ease; 668 | } 669 | .sweepRightIn { 670 | -webkit-animation: sweepRightIn 1s both ease; 671 | animation: sweepRightIn 1s both ease; 672 | } 673 | 674 | .sweepUpOut { 675 | -webkit-animation: sweepUpOut 1s both ease; 676 | animation: sweepUpOut 1s both ease; 677 | } 678 | .sweepUpIn { 679 | -webkit-animation: sweepUpIn 1s both ease; 680 | animation: sweepUpIn 1s both ease; 681 | } 682 | 683 | .sweepDownOut { 684 | -webkit-animation: sweepDownOut 1s both ease; 685 | animation: sweepDownOut 1s both ease; 686 | } 687 | .sweepDownIn { 688 | -webkit-animation: sweepDownIn 1s both ease; 689 | animation: sweepDownIn 1s both ease; 690 | } 691 | 692 | /* animation delay classes */ 693 | .delay1 { 694 | -webkit-animation-delay: .01s; 695 | animation-delay: .01s; 696 | } 697 | .delay100 { 698 | -webkit-animation-delay: .1s; 699 | animation-delay: .1s; 700 | } 701 | .delay180 { 702 | -webkit-animation-delay: .180s; 703 | animation-delay: .180s; 704 | } 705 | .delay200 { 706 | -webkit-animation-delay: .2s; 707 | animation-delay: .2s; 708 | } 709 | .delay300 { 710 | -webkit-animation-delay: .3s; 711 | animation-delay: .3s; 712 | } 713 | .delay400 { 714 | -webkit-animation-delay: .4s; 715 | animation-delay: .4s; 716 | } 717 | .delay500 { 718 | -webkit-animation-delay: .5s; 719 | animation-delay: .5s; 720 | } 721 | .delay600 { 722 | -webkit-animation-delay: .7s; 723 | animation-delay: .7s; 724 | } 725 | .delay700 { 726 | -webkit-animation-delay: .7s; 727 | animation-delay: .7s; 728 | } 729 | .delay800 { 730 | -webkit-animation-delay: .7s; 731 | animation-delay: .7s; 732 | } 733 | .delay900 { 734 | -webkit-animation-delay: .7s; 735 | animation-delay: .7s; 736 | } 737 | .delay1000 { 738 | -webkit-animation-delay: 1s; 739 | animation-delay: 1s; 740 | } 741 | 742 | 743 | /********************************* keyframes **************************************/ 744 | 745 | /* slide from / to */ 746 | 747 | @-webkit-keyframes slideLeftOut { 748 | from { } 749 | to { -webkit-transform: translateX(-100%); } 750 | } 751 | @keyframes slideLeftOut { 752 | from { } 753 | to { transform: translateX(-100%); } 754 | } 755 | 756 | @-webkit-keyframes slideRightIn { 757 | from { -webkit-transform: translateX(-100%); } 758 | } 759 | @keyframes slideRightIn { 760 | from { transform: translateX(-100%); } 761 | } 762 | 763 | @-webkit-keyframes slideRightOut { 764 | from { } 765 | to { -webkit-transform: translateX(100%); } 766 | } 767 | @keyframes slideRightOut { 768 | from { } 769 | to { transform: translateX(100%); } 770 | } 771 | 772 | @-webkit-keyframes slideLeftIn { 773 | from { -webkit-transform: translateX(100%); } 774 | } 775 | @keyframes slideLeftIn { 776 | from {transform: translateX(100%); } 777 | } 778 | 779 | @-webkit-keyframes slideUpOut { 780 | from { } 781 | to { -webkit-transform: translateY(-100%); } 782 | } 783 | @keyframes slideUpOut { 784 | from { } 785 | to { transform: translateY(-100%); } 786 | } 787 | 788 | @-webkit-keyframes slideDownIn { 789 | from { -webkit-transform: translateY(-100%); } 790 | } 791 | @keyframes slideDownIn { 792 | from { transform: translateY(-100%); } 793 | } 794 | 795 | @-webkit-keyframes slideDownOut { 796 | from { } 797 | to { -webkit-transform: translateY(100%); } 798 | } 799 | @keyframes slideDownOut { 800 | from { } 801 | to { transform: translateY(100%); } 802 | } 803 | 804 | @-webkit-keyframes slideUpIn { 805 | from { -webkit-transform: translateY(100%); } 806 | } 807 | @keyframes slideUpIn { 808 | from { transform: translateY(100%); } 809 | } 810 | 811 | /* fade */ 812 | 813 | @-webkit-keyframes fadeOut { 814 | from { } 815 | to { opacity: 0; } 816 | } 817 | @keyframes fadeOut { 818 | from { } 819 | to { opacity: 0; } 820 | } 821 | 822 | @-webkit-keyframes fadeIn { 823 | from { opacity: 0; } 824 | to { opacity: 1; } 825 | } 826 | @keyframes fadeIn { 827 | from { opacity: 0; } 828 | to { opacity: 1; } 829 | } 830 | 831 | /* slide from / to and fade */ 832 | 833 | @-webkit-keyframes slideFadeLeftOut { 834 | from { } 835 | to { opacity: 0.3; -webkit-transform: translateX(-100%); } 836 | } 837 | @keyframes slideFadeLeftOut { 838 | from { } 839 | to { opacity: 0.3; transform: translateX(-100%); } 840 | } 841 | 842 | @-webkit-keyframes slideFadeRightIn { 843 | from { opacity: 0.3; -webkit-transform: translateX(-100%); } 844 | } 845 | @keyframes slideFadeRightIn { 846 | from { opacity: 0.3; transform: translateX(-100%); } 847 | } 848 | 849 | @-webkit-keyframes slideFadeRightOut { 850 | from { } 851 | to { opacity: 0.3; -webkit-transform: translateX(100%); } 852 | } 853 | @keyframes slideFadeRightOut { 854 | from { } 855 | to { opacity: 0.3; transform: translateX(100%); } 856 | } 857 | 858 | @-webkit-keyframes slideFadeLeftIn { 859 | from { opacity: 0.3; -webkit-transform: translateX(100%); } 860 | } 861 | @keyframes slideFadeLeftIn { 862 | from { opacity: 0.3; transform: translateX(100%); } 863 | } 864 | 865 | @-webkit-keyframes slideFadeUpOut { 866 | from { } 867 | to { opacity: 0.3; -webkit-transform: translateY(-100%); } 868 | } 869 | @keyframes slideFadeUpOut { 870 | from { } 871 | to { opacity: 0.3; transform: translateY(-100%); } 872 | } 873 | 874 | @-webkit-keyframes slideFadeDownIn { 875 | from { opacity: 0.3; -webkit-transform: translateY(-100%); } 876 | } 877 | @keyframes slideFadeDownIn { 878 | from { opacity: 0.3; transform: translateY(-100%); } 879 | } 880 | 881 | @-webkit-keyframes slideFadeDownOut { 882 | from { } 883 | to { opacity: 0.3; -webkit-transform: translateY(100%); } 884 | } 885 | @keyframes slideFadeDownOut { 886 | from { } 887 | to { opacity: 0.3; transform: translateY(100%); } 888 | } 889 | 890 | @-webkit-keyframes slideFadeUpIn { 891 | from { opacity: 0.3; -webkit-transform: translateY(100%); } 892 | } 893 | @keyframes slideFadeUpIn { 894 | from { opacity: 0.3; transform: translateY(100%); } 895 | } 896 | 897 | 898 | /* scale and fade */ 899 | 900 | @-webkit-keyframes scaleOut { 901 | from { } 902 | to { opacity: 0; -webkit-transform: scale(.8); } 903 | } 904 | @keyframes scaleOut { 905 | from { } 906 | to { opacity: 0; transform: scale(.8); } 907 | } 908 | 909 | @-webkit-keyframes scaleIn { 910 | from { opacity: 0; -webkit-transform: scale(.8); } 911 | } 912 | @keyframes scaleIn { 913 | from { opacity: 0; transform: scale(.8); } 914 | } 915 | 916 | @-webkit-keyframes scaleInDown { 917 | from { opacity: 0; -webkit-transform: scale(1.2); } 918 | } 919 | @keyframes scaleInDown { 920 | from { opacity: 0; transform: scale(1.2); } 921 | } 922 | 923 | @-webkit-keyframes scaleOutUp { 924 | from { } 925 | to { opacity: 0; -webkit-transform: scale(1.2); } 926 | } 927 | @keyframes scaleOutUp { 928 | from { } 929 | to { opacity: 0; transform: scale(1.2); } 930 | } 931 | 932 | @-webkit-keyframes scaleOutCenter { 933 | from { } 934 | to { opacity: 0; -webkit-transform: scale(.7); } 935 | } 936 | @keyframes scaleOutCenter { 937 | from { } 938 | to { opacity: 0; transform: scale(.7); } 939 | } 940 | 941 | @-webkit-keyframes scaleInCenter { 942 | from { opacity: 0; -webkit-transform: scale(.7); } 943 | } 944 | @keyframes scaleInCenter { 945 | from { opacity: 0; transform: scale(.7); } 946 | } 947 | 948 | 949 | /* pivot */ 950 | 951 | @-webkit-keyframes pivotLeftOut { 952 | 0% { } 953 | 40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 954 | 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 955 | } 956 | @keyframes pivotLeftOut { 957 | 0% { } 958 | 40% { transform: rotateY(15deg); opacity: .8; animation-timing-function: ease-out; } 959 | 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } 960 | } 961 | 962 | @-webkit-keyframes pivotRightOut { 963 | 0% { } 964 | 40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 965 | 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 966 | } 967 | @keyframes pivotRightOut { 968 | 0% { } 969 | 40% { transform: rotateY(-15deg); opacity: .8; animation-timing-function: ease-out; } 970 | 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } 971 | } 972 | 973 | @-webkit-keyframes pivotUpOut { 974 | 0% { } 975 | 40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 976 | 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 977 | } 978 | @keyframes pivotUpOut { 979 | 0% { } 980 | 40% { transform: rotateX(15deg); opacity: .8; animation-timing-function: ease-out; } 981 | 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } 982 | } 983 | 984 | @-webkit-keyframes pivotDownOut { 985 | 0% { } 986 | 40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 987 | 100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 988 | } 989 | @keyframes pivotDownOut { 990 | 0% { } 991 | 40% { transform: rotateX(-15deg); opacity: .8; animation-timing-function: ease-out; } 992 | 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } 993 | } 994 | 995 | 996 | 997 | 998 | 999 | @-webkit-keyframes pivotLeftIn { 1000 | 100% { } 1001 | 40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 1002 | 0% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 1003 | } 1004 | @keyframes pivotLeftIn { 1005 | 100% { } 1006 | 40% { transform: rotateY(15deg); opacity: .8; animation-timing-function: ease-out; } 1007 | 0% { transform: scale(0.8) translateZ(-200px); opacity:0; } 1008 | } 1009 | 1010 | @-webkit-keyframes pivotRightIn { 1011 | 100% { } 1012 | 40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 1013 | 0% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 1014 | } 1015 | @keyframes pivotRightIn { 1016 | 100% { } 1017 | 40% { transform: rotateY(-15deg); opacity: .8; animation-timing-function: ease-out; } 1018 | 0% { transform: scale(0.8) translateZ(-200px); opacity:0; } 1019 | } 1020 | 1021 | @-webkit-keyframes pivotUpIn { 1022 | 100% { } 1023 | 40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 1024 | 0% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 1025 | } 1026 | @keyframes pivotUpIn { 1027 | 100% { } 1028 | 40% { transform: rotateX(15deg); opacity: .8; animation-timing-function: ease-out; } 1029 | 0% { transform: scale(0.8) translateZ(-200px); opacity:0; } 1030 | } 1031 | 1032 | @-webkit-keyframes pivotDownIn { 1033 | 100% { } 1034 | 40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; } 1035 | 0% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; } 1036 | } 1037 | @keyframes pivotDownIn { 1038 | 100% { } 1039 | 40% { transform: rotateX(-15deg); opacity: .8; animation-timing-function: ease-out; } 1040 | 0% { transform: scale(0.8) translateZ(-200px); opacity:0; } 1041 | } 1042 | 1043 | 1044 | 1045 | 1046 | /* flip */ 1047 | 1048 | @-webkit-keyframes flipRightOut { 1049 | from { } 1050 | to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } 1051 | } 1052 | @keyframes flipRightOut { 1053 | from { } 1054 | to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } 1055 | } 1056 | 1057 | @-webkit-keyframes flipLeftIn { 1058 | from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } 1059 | } 1060 | @keyframes flipLeftIn { 1061 | from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } 1062 | } 1063 | 1064 | @-webkit-keyframes flipLeftOut { 1065 | from { } 1066 | to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } 1067 | } 1068 | @keyframes flipLeftOut { 1069 | from { } 1070 | to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } 1071 | } 1072 | 1073 | @-webkit-keyframes flipRightIn { 1074 | from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } 1075 | } 1076 | @keyframes flipRightIn { 1077 | from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } 1078 | } 1079 | 1080 | @-webkit-keyframes flipUpOut { 1081 | from { } 1082 | to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } 1083 | } 1084 | @keyframes flipUpOut { 1085 | from { } 1086 | to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } 1087 | } 1088 | 1089 | @-webkit-keyframes flipDownIn { 1090 | from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } 1091 | } 1092 | @keyframes flipDownIn { 1093 | from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } 1094 | } 1095 | 1096 | @-webkit-keyframes flipDownOut { 1097 | from { } 1098 | to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } 1099 | } 1100 | @keyframes flipDownOut { 1101 | from { } 1102 | to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } 1103 | } 1104 | 1105 | @-webkit-keyframes flipUpIn { 1106 | from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } 1107 | } 1108 | @keyframes flipUpIn { 1109 | from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } 1110 | } 1111 | 1112 | /* fall */ 1113 | 1114 | @-webkit-keyframes rotateFall { 1115 | 0% { -webkit-transform: rotateZ(0deg); } 1116 | 20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; } 1117 | 40% { -webkit-transform: rotateZ(17deg); } 1118 | 60% { -webkit-transform: rotateZ(16deg); } 1119 | 100% { -webkit-transform: translateY(100%) rotateZ(17deg); } 1120 | } 1121 | @keyframes rotateFall { 1122 | 0% { transform: rotateZ(0deg); } 1123 | 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } 1124 | 40% { transform: rotateZ(17deg); } 1125 | 60% { transform: rotateZ(16deg); } 1126 | 100% { transform: translateY(100%) rotateZ(17deg); } 1127 | } 1128 | 1129 | /* spin */ 1130 | 1131 | @-webkit-keyframes spinRightOut { 1132 | from { -webkit-transform: rotate(0deg); opacity: 1; } 1133 | to { -webkit-transform: rotate(180deg); opacity: 0; } 1134 | } 1135 | @keyframes spinRightOut { 1136 | from { transform: rotate(0deg); opacity: 1; } 1137 | to { transform: rotate(180deg); opacity: 0; } 1138 | } 1139 | 1140 | @-webkit-keyframes spinRightIn { 1141 | from { -webkit-transform: rotate(-180deg); opacity: 0; } 1142 | to { -webkit-transform: rotate(0deg); opacity: 1; } 1143 | } 1144 | @keyframes spinRightIn { 1145 | from { transform: rotate(-180deg); opacity: 0; } 1146 | to { transform: rotate(0deg); opacity: 1; } 1147 | } 1148 | 1149 | @-webkit-keyframes spinLeftOut { 1150 | from { -webkit-transform: rotate(0deg); opacity: 1; } 1151 | to { -webkit-transform: rotate(-180deg); opacity: 0; } 1152 | } 1153 | @keyframes spinLeftOut { 1154 | from { transform: rotate(0deg); opacity: 1; } 1155 | to { transform: rotate(-180deg); opacity: 0; } 1156 | } 1157 | 1158 | 1159 | @-webkit-keyframes spinLeftIn { 1160 | from { -webkit-transform: rotate(180deg); opacity: 0; } 1161 | to { -webkit-transform: rotate(0deg); opacity: 1; } 1162 | } 1163 | @keyframes spinLeftIn { 1164 | from { transform: rotate(180deg); opacity: 0; } 1165 | to { transform: rotate(0deg); opacity: 1; } 1166 | } 1167 | 1168 | /* push */ 1169 | 1170 | @-webkit-keyframes hingeLeftOut { 1171 | from { } 1172 | to { opacity: 0; -webkit-transform: rotateY(90deg); } 1173 | } 1174 | @keyframes hingeLeftOut { 1175 | from { } 1176 | to { opacity: 0; transform: rotateY(90deg); } 1177 | } 1178 | 1179 | @-webkit-keyframes hingeRightOut { 1180 | from { } 1181 | to { opacity: 0; -webkit-transform: rotateY(-90deg); } 1182 | } 1183 | @keyframes hingeRightOut { 1184 | from { } 1185 | to { opacity: 0; transform: rotateY(-90deg); } 1186 | } 1187 | 1188 | @-webkit-keyframes hingeUpOut { 1189 | from { } 1190 | to { opacity: 0; -webkit-transform: rotateX(-90deg); } 1191 | } 1192 | @keyframes hingeUpOut { 1193 | from { } 1194 | to { opacity: 0; transform: rotateX(-90deg); } 1195 | } 1196 | 1197 | @-webkit-keyframes hingeDownOut { 1198 | from { } 1199 | to { opacity: 0; -webkit-transform: rotateX(90deg); } 1200 | } 1201 | @keyframes hingeDownOut { 1202 | from { } 1203 | to { opacity: 0; transform: rotateX(90deg); } 1204 | } 1205 | 1206 | /* pull */ 1207 | 1208 | @-webkit-keyframes hingeRightIn { 1209 | from { opacity: 0; -webkit-transform: rotateY(-90deg); } 1210 | } 1211 | @keyframes hingeRightIn { 1212 | from { opacity: 0; transform: rotateY(-90deg); } 1213 | } 1214 | 1215 | @-webkit-keyframes hingeLeftIn { 1216 | from { opacity: 0; -webkit-transform: rotateY(90deg); } 1217 | } 1218 | @keyframes hingeLeftIn { 1219 | from { opacity: 0; transform: rotateY(90deg); } 1220 | } 1221 | 1222 | @-webkit-keyframes hingeUpIn { 1223 | from { opacity: 0; -webkit-transform: rotateX(-90deg); } 1224 | } 1225 | @keyframes hingeUpIn { 1226 | from { opacity: 0; transform: rotateX(-90deg); } 1227 | } 1228 | 1229 | @-webkit-keyframes hingeDownIn { 1230 | from { opacity: 0; -webkit-transform: rotateX(90deg); } 1231 | } 1232 | @keyframes hingeDownIn { 1233 | from { opacity: 0; transform: rotateX(90deg); } 1234 | } 1235 | 1236 | /* fold */ 1237 | 1238 | @-webkit-keyframes foldRightOut { 1239 | from { } 1240 | to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } 1241 | } 1242 | @keyframes foldRightOut { 1243 | from { } 1244 | to { opacity: 0; transform: translateX(100%) rotateY(90deg); } 1245 | } 1246 | 1247 | @-webkit-keyframes foldLeftOut { 1248 | from { } 1249 | to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } 1250 | } 1251 | @keyframes foldLeftOut { 1252 | from { } 1253 | to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } 1254 | } 1255 | 1256 | @-webkit-keyframes foldUpOut { 1257 | from { } 1258 | to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } 1259 | } 1260 | @keyframes foldUpOut { 1261 | from { } 1262 | to { opacity: 0; transform: translateY(-100%) rotateX(90deg); } 1263 | } 1264 | 1265 | @-webkit-keyframes foldDownOut { 1266 | from { } 1267 | to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } 1268 | } 1269 | @keyframes foldDownOut { 1270 | from { } 1271 | to { opacity: 0; transform: translateY(100%) rotateX(-90deg); } 1272 | } 1273 | 1274 | /* unfold */ 1275 | 1276 | @-webkit-keyframes foldLeftIn { 1277 | from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } 1278 | } 1279 | @keyframes foldLeftIn { 1280 | from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } 1281 | } 1282 | 1283 | @-webkit-keyframes foldRightIn { 1284 | from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } 1285 | } 1286 | @keyframes foldRightIn { 1287 | from { opacity: 0; transform: translateX(100%) rotateY(90deg); } 1288 | } 1289 | 1290 | @-webkit-keyframes foldUpIn { 1291 | from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } 1292 | } 1293 | @keyframes foldUpIn { 1294 | from { opacity: 0; transform: translateY(-100%) rotateX(90deg); } 1295 | } 1296 | 1297 | @-webkit-keyframes foldDownIn { 1298 | from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } 1299 | } 1300 | @keyframes foldDownIn { 1301 | from { opacity: 0; transform: translateY(100%) rotateX(-90deg); } 1302 | } 1303 | 1304 | /* room walls */ 1305 | 1306 | @-webkit-keyframes roomLeftOut { 1307 | from { } 1308 | to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); } 1309 | } 1310 | @keyframes roomLeftOut { 1311 | from { } 1312 | to { opacity: .3; transform: translateX(-100%) rotateY(90deg); } 1313 | } 1314 | 1315 | @-webkit-keyframes roomLeftIn { 1316 | from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); } 1317 | } 1318 | @keyframes roomLeftIn { 1319 | from { opacity: .3; transform: translateX(100%) rotateY(-90deg); } 1320 | } 1321 | 1322 | @-webkit-keyframes roomRightOut { 1323 | from { } 1324 | to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); } 1325 | } 1326 | @keyframes roomRightOut { 1327 | from { } 1328 | to { opacity: .3; transform: translateX(100%) rotateY(-90deg); } 1329 | } 1330 | 1331 | @-webkit-keyframes roomRightIn { 1332 | from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); } 1333 | } 1334 | @keyframes roomRightIn { 1335 | from { opacity: .3; transform: translateX(-100%) rotateY(90deg); } 1336 | } 1337 | 1338 | @-webkit-keyframes roomUpOut { 1339 | from { } 1340 | to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); } 1341 | } 1342 | @keyframes roomUpOut { 1343 | from { } 1344 | to { opacity: .3; transform: translateY(-100%) rotateX(-90deg); } 1345 | } 1346 | 1347 | @-webkit-keyframes roomUpIn { 1348 | from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); } 1349 | } 1350 | @keyframes roomUpIn { 1351 | from { opacity: .3; transform: translateY(100%) rotateX(90deg); } 1352 | } 1353 | 1354 | @-webkit-keyframes roomDownOut { 1355 | from { } 1356 | to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); } 1357 | } 1358 | @keyframes roomDownOut { 1359 | from { } 1360 | to { opacity: .3; transform: translateY(100%) rotateX(90deg); } 1361 | } 1362 | 1363 | @-webkit-keyframes roomDownIn { 1364 | from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); } 1365 | } 1366 | @keyframes roomDownIn { 1367 | from { opacity: .3; transform: translateY(-100%) rotateX(-90deg); } 1368 | } 1369 | 1370 | /* cube */ 1371 | 1372 | @-webkit-keyframes cubeLeftOut { 1373 | 0% { } 1374 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } 1375 | 100% { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } 1376 | } 1377 | @keyframes cubeLeftOut { 1378 | 0% { } 1379 | 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } 1380 | 100% { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } 1381 | } 1382 | 1383 | @-webkit-keyframes cubeLeftIn { 1384 | 0% { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } 1385 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } 1386 | } 1387 | @keyframes cubeLeftIn { 1388 | 0% { opacity: 0; transform: translateX(100%) rotateY(90deg); } 1389 | 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } 1390 | } 1391 | 1392 | @-webkit-keyframes cubeRightOut { 1393 | 0% { } 1394 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); } 1395 | 100% { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); } 1396 | } 1397 | @keyframes cubeRightOut { 1398 | 0% { } 1399 | 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } 1400 | 100% { opacity: 0; transform: translateX(100%) rotateY(90deg); } 1401 | } 1402 | 1403 | @-webkit-keyframes cubeRightIn { 1404 | 0% { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); } 1405 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } 1406 | } 1407 | @keyframes cubeRightIn { 1408 | 0% { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } 1409 | 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } 1410 | } 1411 | 1412 | @-webkit-keyframes cubeUpOut { 1413 | 0% { } 1414 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } 1415 | 100% { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } 1416 | } 1417 | @keyframes cubeUpOut { 1418 | 0% {} 1419 | 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } 1420 | 100% { opacity: 0; transform: translateY(-100%) rotateX(90deg); } 1421 | } 1422 | 1423 | @-webkit-keyframes cubeUpIn { 1424 | 0% { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } 1425 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 1426 | } 1427 | @keyframes cubeUpIn { 1428 | 0% { opacity: 0; transform: translateY(100%) rotateX(-90deg); } 1429 | 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 1430 | } 1431 | 1432 | @-webkit-keyframes cubeDownOut { 1433 | 0% { } 1434 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 1435 | 100% { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); } 1436 | } 1437 | @keyframes cubeDownOut { 1438 | 0% { } 1439 | 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 1440 | 100% { opacity: 0; transform: translateY(100%) rotateX(-90deg); } 1441 | } 1442 | 1443 | @-webkit-keyframes cubeDownIn { 1444 | 0% { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); } 1445 | 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } 1446 | } 1447 | @keyframes cubeDownIn { 1448 | 0% { opacity: 0; transform: translateY(-100%) rotateX(90deg); } 1449 | 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } 1450 | } 1451 | 1452 | /* carousel */ 1453 | 1454 | /*@-webkit-keyframes carouselLeftOut { 1455 | from { opacity: 1; -webkit-transform: translateX(0%) scale(1) rotateY(0deg); } 1456 | to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); } 1457 | } 1458 | @keyframes carouselLeftOut { 1459 | from { opacity: 1; transform: translateX(0%) scale(1) rotateY(0deg); } 1460 | to { opacity: .3; transform: translateX(-150%) scale(.4) rotateY(-65deg); } 1461 | } 1462 | 1463 | @-webkit-keyframes carouselLeftIn { 1464 | from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); } 1465 | to { opacity: 1; -webkit-transform: translateX(0) scale(1) rotateY(0deg); } 1466 | } 1467 | @keyframes carouselLeftIn { 1468 | from { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); } 1469 | to { opacity: 1; transform: translateX(0) scale(1) rotateY(0deg); } 1470 | 1471 | } 1472 | 1473 | @-webkit-keyframes carouselRightOut { 1474 | from { } 1475 | to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); } 1476 | } 1477 | @keyframes carouselRightOut { 1478 | from { } 1479 | to { opacity: .3; transform: translateX(200%) scale(.4) rotateY(65deg); } 1480 | } 1481 | 1482 | @-webkit-keyframes carouselRightIn { 1483 | from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); } 1484 | } 1485 | @keyframes carouselRightIn { 1486 | from { opacity: .3; transform: translateX(-200%) scale(.4) rotateY(-65deg); } 1487 | } 1488 | 1489 | @-webkit-keyframes carouselUpOut { 1490 | from { } 1491 | to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); } 1492 | } 1493 | @keyframes carouselUpOut { 1494 | from { } 1495 | to { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); } 1496 | } 1497 | 1498 | @-webkit-keyframes carouselUpIn { 1499 | from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); } 1500 | } 1501 | @keyframes carouselUpIn { 1502 | from { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); } 1503 | } 1504 | 1505 | @-webkit-keyframes carouselDownOut { 1506 | from { } 1507 | to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); } 1508 | } 1509 | @keyframes carouselDownOut { 1510 | from { } 1511 | to { opacity: .3; transform: translateY(200%) scale(.4) rotateX(-65deg); } 1512 | } 1513 | 1514 | @-webkit-keyframes carouselDownIn { 1515 | from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); } 1516 | } 1517 | @keyframes carouselDownIn { 1518 | from { opacity: .3; transform: translateY(-200%) scale(.4) rotateX(65deg); } 1519 | }*/ 1520 | 1521 | /* swing */ 1522 | 1523 | @-webkit-keyframes swingLeftOut { 1524 | from { } 1525 | to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); } 1526 | } 1527 | @keyframes swingLeftOut { 1528 | from { } 1529 | to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); } 1530 | } 1531 | @-webkit-keyframes swingLeftIn { 1532 | from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); } 1533 | to { opacity: 1; -webkit-transform: translateZ(0) rotateY(0deg); } 1534 | } 1535 | @keyframes swingLeftIn { 1536 | from { opacity: 0; transform: translateZ(-500px) rotateY(90deg); } 1537 | to { opacity: 1; transform: translateZ(0) rotateY(0deg); } 1538 | } 1539 | 1540 | @-webkit-keyframes swingRightOut { 1541 | from { } 1542 | to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); } 1543 | } 1544 | @keyframes swingRightOut { 1545 | from { } 1546 | to { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); } 1547 | } 1548 | @-webkit-keyframes swingRightIn { 1549 | from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); } 1550 | } 1551 | @keyframes swingRightIn { 1552 | from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); } 1553 | } 1554 | 1555 | 1556 | 1557 | @-webkit-keyframes swingUpOut { 1558 | from { } 1559 | to { opacity: 0; -webkit-transform: translateZ(-500px) rotateX(90deg); } 1560 | } 1561 | @keyframes swingUpOut { 1562 | from { } 1563 | to { opacity: 0; transform: translateZ(-500px) rotateX(90deg); } 1564 | } 1565 | @-webkit-keyframes swingUpIn { 1566 | from { opacity: 0; -webkit-transform: translateZ(-500px) rotateX(90deg); } 1567 | to { opacity: 1; -webkit-transform: translateZ(0) rotateX(0deg); } 1568 | } 1569 | @keyframes swingUpIn { 1570 | from { opacity: 0; transform: translateZ(-500px) rotateX(90deg); } 1571 | to { opacity: 1; transform: translateZ(0) rotateX(0deg); } 1572 | } 1573 | 1574 | @-webkit-keyframes swingDownOut { 1575 | from { } 1576 | to { opacity: 0; -webkit-transform: translateZ(-500px) rotateX(-90deg); } 1577 | } 1578 | @keyframes swingDownOut { 1579 | from { } 1580 | to { opacity: 0; transform: translateZ(-500px) rotateX(-90deg); } 1581 | } 1582 | @-webkit-keyframes swingDownIn { 1583 | from { opacity: 0; -webkit-transform: translateZ(-500px) rotateX(-90deg); } 1584 | } 1585 | @keyframes swingDownIn { 1586 | from { opacity: 0; transform: translateZ(-500px) rotateX(-90deg); } 1587 | } 1588 | 1589 | /* sweep */ 1590 | 1591 | @-webkit-keyframes sweepLeftOut { 1592 | 0% { } 1593 | 25% { opacity: .7; -webkit-transform: translateZ(-500px); } 1594 | 75% { opacity: .7; -webkit-transform: translateZ(-500px) translateX(-200%); } 1595 | 100% { opacity: .7; -webkit-transform: translateZ(-500px) translateX(-200%); } 1596 | } 1597 | @keyframes sweepLeftOut { 1598 | 0% { } 1599 | 25% { opacity: .7; transform: translateZ(-500px); } 1600 | 75% { opacity: .7; transform: translateZ(-500px) translateX(-200%); } 1601 | 100% { opacity: .7; transform: translateZ(-500px) translateX(-200%); } 1602 | } 1603 | 1604 | @-webkit-keyframes sweepLeftIn { 1605 | 0% { opacity: 0; -webkit-transform: translateZ(-500px) translateX(200%); } 1606 | 25% { opacity: .7; -webkit-transform: translateZ(-500px) translateX(200%); } 1607 | 75% { opacity: .7; -webkit-transform: translateZ(-500px); } 1608 | 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } 1609 | } 1610 | @keyframes sweepLeftIn { 1611 | 00% { opacity: 0; transform: translateZ(-500px) translateX(200%); } 1612 | 25% { opacity: .7; transform: translateZ(-500px) translateX(200%); } 1613 | 75% { opacity: .7; transform: translateZ(-500px); } 1614 | 100% { opacity: 1; transform: translateZ(0) translateX(0); } 1615 | } 1616 | 1617 | @-webkit-keyframes sweepRightOut { 1618 | 0% { } 1619 | 25% { opacity: .7; -webkit-transform: translateZ(-500px); } 1620 | 75% { opacity: .7; -webkit-transform: translateZ(-500px) translateX(200%); } 1621 | 100% { opacity: .7; -webkit-transform: translateZ(-500px) translateX(200%); } 1622 | } 1623 | @keyframes sweepRightOut { 1624 | 0% { } 1625 | 25% { opacity: .7; transform: translateZ(-500px); } 1626 | 75% { opacity: .7; transform: translateZ(-500px) translateX(200%); } 1627 | 100% { opacity: .7; transform: translateZ(-500px) translateX(200%); } 1628 | } 1629 | 1630 | @-webkit-keyframes sweepRightIn { 1631 | 0% { opacity: 0; -webkit-transform: translateZ(-500px) translateX(-200%); } 1632 | 25% { opacity: .7; -webkit-transform: translateZ(-500px) translateX(-200%); } 1633 | 75% { opacity: .7; -webkit-transform: translateZ(-500px); } 1634 | 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } 1635 | } 1636 | @keyframes sweepRightIn { 1637 | 0% { opacity: 0; transform: translateZ(-500px) translateX(-200%); } 1638 | 25% { opacity: .7; transform: translateZ(-500px) translateX(-200%); } 1639 | 75% { opacity: .7; transform: translateZ(-500px); } 1640 | 100% { opacity: 1; transform: translateZ(0) translateX(0); } 1641 | } 1642 | 1643 | 1644 | 1645 | @-webkit-keyframes sweepUpOut { 1646 | 0% { } 1647 | 25% { opacity: .7; -webkit-transform: translateZ(-500px); } 1648 | 75% { opacity: .7; -webkit-transform: translateZ(-500px) translateY(-200%); } 1649 | 100% { opacity: .7; -webkit-transform: translateZ(-500px) translateY(-200%); } 1650 | } 1651 | @keyframes sweepUpOut { 1652 | 0% { } 1653 | 25% { opacity: .7; transform: translateZ(-500px); } 1654 | 75% { opacity: .7; transform: translateZ(-500px) translateY(-200%); } 1655 | 100% { opacity: .7; transform: translateZ(-500px) translateY(-200%); } 1656 | } 1657 | 1658 | @-webkit-keyframes sweepUpIn { 1659 | 0% { opacity: 0; -webkit-transform: translateZ(-500px) translateY(200%); } 1660 | 25% { opacity: .7; -webkit-transform: translateZ(-500px) translateY(200%); } 1661 | 75% { opacity: .7; -webkit-transform: translateZ(-500px); } 1662 | 100% { opacity: 1; -webkit-transform: translateZ(0) translateY(0); } 1663 | } 1664 | @keyframes sweepUpIn { 1665 | 0% { opacity: 0; transform: translateZ(-500px) translateY(200%); } 1666 | 25% { opacity: .7; transform: translateZ(-500px) translateY(200%); } 1667 | 75% { opacity: .7; transform: translateZ(-500px); } 1668 | 100% { opacity: 1; transform: translateZ(0) translateY(0); } 1669 | } 1670 | 1671 | @-webkit-keyframes sweepDownOut { 1672 | 0% { } 1673 | 25% { opacity: .7; -webkit-transform: translateZ(-500px); } 1674 | 75% { opacity: .7; -webkit-transform: translateZ(-500px) translateY(200%); } 1675 | 100% { opacity: .7; -webkit-transform: translateZ(-500px) translateY(200%); } 1676 | } 1677 | @keyframes sweepDownOut { 1678 | 0% { } 1679 | 25% { opacity: .7; transform: translateZ(-500px); } 1680 | 75% { opacity: .7; transform: translateZ(-500px) translateY(200%); } 1681 | 100% { opacity: .7; transform: translateZ(-500px) translateY(200%); } 1682 | } 1683 | 1684 | @-webkit-keyframes sweepDownIn { 1685 | 0% { opacity: 0; -webkit-transform: translateZ(-500px) translateY(-200%); } 1686 | 25% { opacity: .7; -webkit-transform: translateZ(-500px) translateY(-200%); } 1687 | 75% { opacity: .7; -webkit-transform: translateZ(-500px); } 1688 | 100% { opacity: 1; -webkit-transform: translateZ(0) translateY(0); } 1689 | } 1690 | @keyframes sweepDownIn { 1691 | 0% { opacity: 0; transform: translateZ(-500px) translateY(-200%); } 1692 | 25% { opacity: .7; transform: translateZ(-500px) translateY(-200%); } 1693 | 75% { opacity: .7; transform: translateZ(-500px); } 1694 | 100% { opacity: 1; transform: translateZ(0) translateY(0); } 1695 | } 1696 | 1697 | -------------------------------------------------------------------------------- /packages/transitions/transitions.js: -------------------------------------------------------------------------------- 1 | //Set up transitions object for export, so user can customise container and content variables 2 | Transitions = {}; 3 | 4 | if (Meteor.isClient) { 5 | 6 | Meteor.startup(function () { 7 | 8 | //Helper to convert CSS seconds notation into ms for setTimout 9 | Template.registerHelper('s2ms', function(string) { 10 | //remove seconds notation 11 | var seconds = string.replace('s', ''); 12 | //convert 13 | var ms = seconds * 1000; 14 | return ms; 15 | }); 16 | 17 | var containerName = Transitions.container || ".transitions-container"; 18 | var contentName = Transitions.content || ".transitions-content"; 19 | var defaultTransitionIn = Transitions.transitionIn || ""; 20 | var defaultTransitionOut = Transitions.transitionOut || ""; 21 | 22 | //Set transition states to default 23 | transitionIn = defaultTransitionIn; 24 | transitionOut = defaultTransitionOut; 25 | 26 | //Set styles dynamically 27 | $("