├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── LICENSE.txt ├── README.html ├── README.md ├── data └── data.json ├── dist ├── _animations.scss ├── _bounceInDown.scss ├── _bounceInDrop.scss ├── _bounceInLeft.scss ├── _bounceInRight.scss ├── _bounceInScale.scss ├── _bounceInScale2.scss ├── _flipInBottom.scss ├── _flipInLeft.scss ├── _flipInRight.scss ├── _flipInTop.scss ├── _flyIn.scss ├── _flyInBottom.scss ├── _flyInLeft.scss ├── _flyInRight.scss ├── _glideInDown.scss ├── _glideInLeft.scss ├── _glideInRight.scss ├── _glideInUp.scss ├── _hoverJiggle.scss ├── _hoverJiggle2.scss ├── _jellyfall.scss ├── _jellyfall2.scss ├── _kitchenSink.scss ├── _newAnim.scss ├── _rubberband.scss ├── _slideInLeft.scss ├── _slideInRight.scss ├── _springScaleOut.scss ├── _twirlIn.scss ├── reboundgen.css ├── reboundgen.css.map ├── reboundgen.min.css └── reboundgen.scss ├── examples ├── index.handlebars ├── index.html ├── styles.css ├── styles.css.map ├── styles.min.css └── styles.scss ├── helpers.js ├── lib ├── rebound.js └── reboundgen.js ├── package.json └── test └── reboundgen_test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | tmp -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "loopfunc": false, 6 | "shadow": false, 7 | "latedef": "nofunc", 8 | "newcap": true, 9 | "noarg": true, 10 | "sub": true, 11 | "undef": true, 12 | "unused": true, 13 | "boss": true, 14 | "eqnull": true, 15 | "node": true 16 | } 17 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | 5 | // Project configuration. 6 | grunt.initConfig({ 7 | animationData: grunt.file.readJSON("data/data.json"), 8 | nodeunit: { 9 | files: ['test/**/*_test.js'], 10 | }, 11 | jshint: { 12 | options: { 13 | jshintrc: '.jshintrc' 14 | }, 15 | gruntfile: { 16 | src: 'Gruntfile.js' 17 | }, 18 | lib: { 19 | src: ['lib/**/*.js'] 20 | }, 21 | test: { 22 | src: ['test/**/*.js'] 23 | }, 24 | }, 25 | sass: { 26 | testpage: { 27 | files: { 28 | 'examples/styles.css': 'examples/styles.scss' 29 | } 30 | }, 31 | dist: { 32 | files: [{ 33 | 'dist/reboundgen.css': 'dist/reboundgen.scss' 34 | }] 35 | } 36 | }, 37 | cssmin: { 38 | testpage: { 39 | files: { 40 | 'examples/styles.min.css': 'examples/styles.css', 41 | } 42 | }, 43 | dist: { 44 | files: [{ 45 | 'dist/reboundgen.min.css': 'dist/reboundgen.css' 46 | }] 47 | } 48 | }, 49 | 'compile-handlebars': { 50 | example: { 51 | template: 'examples/index.handlebars', 52 | templateData: '<%= animationData %>', 53 | output: 'examples/index.html', 54 | }, 55 | }, 56 | watch: { 57 | gruntfile: { 58 | files: '<%= jshint.gruntfile.src %>', 59 | tasks: ['jshint:gruntfile'] 60 | }, 61 | lib: { 62 | files: '<%= jshint.lib.src %>', 63 | tasks: [ 'build' ] 64 | }, 65 | test: { 66 | files: '<%= jshint.test.src %>', 67 | tasks: [ 'build' ] 68 | }, 69 | animations: { 70 | files: [ 'data/data.json', 'examples/styles.scss' ], 71 | tasks: [ 'build' ] 72 | }, 73 | html: { 74 | files: [ 'examples/index.handlebars'], 75 | tasks: [ 'compile-handlebars' ], 76 | options: { 77 | livereload: true, 78 | } 79 | }, 80 | }, 81 | }); 82 | 83 | // These plugins provide necessary tasks. 84 | grunt.loadNpmTasks('grunt-contrib-nodeunit'); 85 | grunt.loadNpmTasks('grunt-contrib-jshint'); 86 | grunt.loadNpmTasks('grunt-contrib-watch'); 87 | grunt.loadNpmTasks('grunt-compile-handlebars'); 88 | grunt.loadNpmTasks('grunt-contrib-sass'); 89 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 90 | 91 | // Default task. 92 | grunt.registerTask('build', ['nodeunit', 'compile-handlebars', 'sass', 'cssmin' ]); 93 | grunt.registerTask('default', ['nodeunit']); 94 | 95 | }; 96 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | BSD License 2 | 3 | For the reboundgen software 4 | Copyright (c) 2014, David Wallin All rights reserved. 5 | 6 | For the rebound-js software 7 | Copyright (c) 2014, Facebook, Inc. All rights reserved. 8 | 9 | Redistribution and use in source and binary forms, with or without modification, 10 | are permitted provided that the following conditions are met: 11 | 12 | * Redistributions of source code must retain the above copyright notice, this 13 | list of conditions and the following disclaimer. 14 | 15 | * Redistributions in binary form must reproduce the above copyright notice, 16 | this list of conditions and the following disclaimer in the documentation 17 | and/or other materials provided with the distribution. 18 | 19 | * Neither the name Facebook nor the names of its contributors may be used to 20 | endorse or promote products derived from this software without specific 21 | prior written permission. 22 | 23 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 24 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 25 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 26 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 27 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 28 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 29 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 30 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 31 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 32 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 33 | -------------------------------------------------------------------------------- /README.html: -------------------------------------------------------------------------------- 1 | README

ReboundGen

1003 |

CSS3 Keyframe animation generator built on Facebook’s Rebound.js

1004 |

Examples

1005 |

See here for a list of the ‘out of the box’ animations.

1006 |

How to use

1007 |

Easy instructions

1008 |
    1009 |
  1. Download this package.
    2. 1010 |
  2. SCSS files are available in the dist/ folder. You can import the _animations.scss file to include all the animations.
    3. 1011 |
  3. Simply put the corresponding class on the element you want to animate. For Example: bounceInRight. Note that for the flipping animations you may need perspective: XXXXpx; on the container element for the full effect.
    4. 1012 |
1013 |

It’s recommended that you comment out animations you aren’t using from _animations.scss to save on file size. If you just want to use a pre-built css file, you can find it here (47kb.)

1014 |

How to customize and build your own animations

1015 |
    1016 |
  1. Clone this repo git clone https://github.com/dwarcher/reboundgen.git .
    2. 1017 |
  2. Install Grunt if you haven’t.
    3. 1018 |
  3. Edit the data/data.json (see below for more details)
    4. 1019 |
  4. Run grunt build
    5. 1020 |
  5. Built animations will go into dist/
    6. 1021 |
  6. Or, you can run grunt watch to build whenever you make a change.
    7. 1022 |
1023 |

This will build individual animations, compiled .css files and automatically add any new animations to the example page so you can see them immediately. This can be a big help for quickly developing new animations.

1024 |

Alertnately, you can compile from code.

1025 |

Install the module with: npm install reboundgen

1026 | 
var reboundgen = require('../lib/reboundgen.js');
1027 | 
1028 | reboundgen.generateFromFile("data/data.json")
1029 |
1030 | 1031 |

This could easily be turned into a grunt or gulp plugin…

1032 |

Data format

1033 | 
{ 
1034 |     "outputFolder": "dist/",
1035 |     "animations": 
1036 |     [
1037 |         {
1038 |             "steps": 50,
1039 |             "name": "bounceInRight",
1040 |             "tension": 50,
1041 |             "friction": 5,
1042 |             "fadeIn": 150,
1043 |             "hardBounce": true,
1044 |             "bounceDamp": 0.4,
1045 |             "properties": {
1046 |                 "translateX": { 
1047 |                     "friction": 3,
1048 |                     "start": 500, 
1049 |                     "end": 0 
1050 |                 },
1051 |                 "translateY": 500
1052 |             }
1053 |         }
1054 |     ]
1055 | }
1056 |
1057 | 1058 |

steps

1059 |

Type: Number
1060 | Default value: 50

1061 |

The number of keyframes to generate. In most cases you can leave this at 50, since reboundgen will remove unnecessary keyframes. However you can experiment with using lower values like 25 to save on file size.

1062 |

name

1063 |

Type: String

1064 |

The name of the animation and resulting .scss file. Be sure to avoid illegal characters.

1065 |

tension

1066 |

Type: Number
1067 | Default value: 30

1068 |

Tension of the spring. How quickly it snaps back.

1069 |

friction

1070 |

Type: Number
1071 | Default value: 5

1072 |

Friction force. Slows the spring motion.

1073 |

fadeIn

1074 |

Type: Number
1075 | Default value: 0

1076 |

Time in milliseconds to fade in opacity.

1077 |

fadeOut

1078 |

Type: Number
1079 | Default value: 0

1080 |

Time in milliseconds to fade out opacity.

1081 |

hardBounce

1082 |

Type: Boolean
1083 | Default value: false

1084 |

Instead of allowing the spring to freely oscillate, bounces the spring as if hitting a wall, when passing the target value.

1085 |

bounceDamp

1086 |

Type: Number
1087 | Default value: 0

1088 |

Factor of velocity lost when bouncing, in the range of 0…0.99

1089 |

properties

1090 |

Type: Object

1091 |

List of properties to animate. Currently we’re suppporting:

1092 | 1106 |

originX

1107 |

Type: Number
1108 | Default value: 0.5

1109 |

The transform-origin x parameter in the range of 0…1.0

1110 |

originY

1111 |

Type: Number
1112 | Default value: 0.5

1113 |

The transform-origin y parameter in the range of 0…1.0

1114 |

If you specify an object for the property, you can set the start and end. Additionally, any of the above parameters (friction, tension, etc.) can be overriden per property. If you don’t specify an object and simply specify a number instead, then it is assumed that you are transitioning from 0 to the number with the default settings.

1115 |

Known Issues

1116 |

I’ve noticed that Safari seems to break when using scale 0.0 as the initial scale when combined with rotation. Using 0.1 works. Also, the ‘rubberband’ animation seems to cause some rendering issues in Chrome sometimes.

1117 |

License

1118 |

Copyright (c) 2014 Dave Wallin
1119 | Licensed under the BSD license.

-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReboundGen 2 | 3 | SASS/CSS3 Keyframe animation generator built on [Facebook's Rebound.js](https://github.com/facebook/rebound-js). Similar to [Animate.css](http://daneden.github.io/animate.css/) 4 | 5 | 6 | ## Examples 7 | See [here](http://dwarcher.github.io/reboundgen/examples/) for a list of the 'out of the box' animations. 8 | 9 | ## How to use 10 | 11 | #### Easy instructions 12 | 13 | 1. [Download](https://github.com/dwarcher/reboundgen/archive/master.zip) this package. 14 | 2. SCSS files are available in the `dist/` folder. You can import the `_animations.scss` file to include all the animations. 15 | 3. Simply put the corresponding class on the element you want to animate. For Example: `bounceInRight`. Note that for the flipping animations you may need `perspective: XXXXpx;` on the container element for the full effect. 16 | 17 | It's recommended that you comment out animations you aren't using from `_animations.scss` to save on file size. If you just want to use a pre-built css file, you can find it [here](http://dwarcher.github.io/reboundgen/dist/reboundgen.min.css) (47kb.) 18 | 19 | ## How to customize and build your own animations 20 | 21 | 1. Clone this repo `git clone https://github.com/dwarcher/reboundgen.git .` 22 | 2. Install [Grunt](http://gruntjs.com/getting-started) if you haven't. 23 | 3. Edit the `data/data.json` (see below for more details) 24 | 4. Run `grunt build` 25 | 5. Built animations will go into `dist/` 26 | 6. Or, you can run `grunt watch` to build whenever you make a change. 27 | 28 | This will build individual animations, compiled .css files and automatically add any new animations to the example page so you can see them immediately. This can be a big help for quickly developing new animations. 29 | 30 | Alertnately, you can compile from code. 31 | 32 | Install the module with: `npm install reboundgen` 33 | 34 | ```javascript 35 | var reboundgen = require('../lib/reboundgen.js'); 36 | 37 | reboundgen.generateFromFile("data/data.json") 38 | ``` 39 | 40 | This could easily be turned into a grunt or gulp plugin... 41 | 42 | ## Data format 43 | 44 | ```javascript 45 | { 46 | "outputFolder": "dist/", 47 | "animations": 48 | [ 49 | { 50 | "steps": 50, 51 | "name": "bounceInRight", 52 | "tension": 50, 53 | "friction": 5, 54 | "fadeIn": 150, 55 | "hardBounce": true, 56 | "bounceDamp": 0.4, 57 | "properties": { 58 | "translateX": { 59 | "friction": 3, 60 | "start": 500, 61 | "end": 0 62 | }, 63 | "translateY": 500 64 | } 65 | } 66 | ] 67 | } 68 | ``` 69 | 70 | #### steps 71 | Type: `Number` 72 | Default value: `50` 73 | 74 | The number of keyframes to generate. In most cases you can leave this at 50, since reboundgen will remove unnecessary keyframes. However you can experiment with using lower values like 25 to save on file size. 75 | 76 | #### name 77 | Type: `String` 78 | 79 | The name of the animation and resulting .scss file. Be sure to avoid illegal characters. 80 | 81 | #### tension 82 | Type: `Number` 83 | Default value: `30` 84 | 85 | Tension of the spring. How quickly it snaps back. 86 | 87 | #### friction 88 | Type: `Number` 89 | Default value: `5` 90 | 91 | Friction force. Slows the spring motion. 92 | 93 | #### fadeIn 94 | Type: `Number` 95 | Default value: `0` 96 | 97 | Time in milliseconds to fade in opacity. 98 | 99 | #### fadeOut 100 | Type: `Number` 101 | Default value: `0` 102 | 103 | Time in milliseconds to fade out opacity. 104 | 105 | #### hardBounce 106 | Type: `Boolean` 107 | Default value: false 108 | 109 | Instead of allowing the spring to freely oscillate, bounces the spring as if hitting a wall, when passing the target value. 110 | 111 | #### bounceDamp 112 | Type: `Number` 113 | Default value: `0` 114 | 115 | Factor of velocity lost when bouncing, in the range of 0...0.99 116 | 117 | #### properties 118 | Type: `Object` 119 | 120 | List of properties to animate. Currently we're suppporting: 121 | 122 | + translateX 123 | + translateY 124 | + translateZ 125 | + scaleX 126 | + scaleY 127 | + scaleZ 128 | + rotate 129 | + rotateX 130 | + rotateY 131 | + rotateZ 132 | + skewX 133 | + skewY 134 | 135 | #### originX 136 | Type: `Number` 137 | Default value: `0.5` 138 | 139 | The transform-origin x parameter in the range of 0...1.0 140 | 141 | #### originY 142 | Type: `Number` 143 | Default value: `0.5` 144 | 145 | The transform-origin y parameter in the range of 0...1.0 146 | 147 | If you specify an object for the property, you can set the `start` and `end`. Additionally, any of the above parameters (friction, tension, etc.) can be overriden per property. If you don't specify an object and simply specify a number instead, then it is assumed that you are transitioning from 0 to the number with the default settings. 148 | 149 | ## Known Issues 150 | 151 | I've noticed that Safari seems to break when using scale 0.0 as the initial scale when combined with rotation. Using 0.1 works. Also, the 'rubberband' animation seems to cause some rendering issues in Chrome sometimes. 152 | 153 | ## License 154 | Copyright (c) 2014 Dave Wallin 155 | Licensed under the BSD license. 156 | -------------------------------------------------------------------------------- /data/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "outputFolder": "dist/", 3 | "animations": 4 | [ 5 | { 6 | "name": "bounceInRight", 7 | "tension": 50, 8 | "friction": 5, 9 | "fadeIn": 150, 10 | "hardBounce": true, 11 | "bounceDamp": 0.4, 12 | "properties": { 13 | "translateX": { 14 | "start": 500, 15 | "end": 0 16 | } 17 | } 18 | }, 19 | { 20 | "name": "bounceInLeft", 21 | "tension": 50, 22 | "friction": 1, 23 | "fadeIn": 150, 24 | "hardBounce": true, 25 | "bounceDamp": 0.4, 26 | "properties": { 27 | "translateX": { 28 | "start": -500, 29 | "end": 0 30 | } 31 | } 32 | }, 33 | { 34 | "name": "bounceInDown", 35 | "tension": 50, 36 | "friction": 1, 37 | "fadeIn": 300, 38 | "hardBounce": true, 39 | "bounceDamp": 0.4, 40 | "properties": { 41 | "translateY": { 42 | "start": -500, 43 | "end": 0 44 | } 45 | } 46 | }, 47 | { 48 | "name": "bounceInDrop", 49 | "tension": 30, 50 | "friction": 1, 51 | "fadeIn": 150, 52 | "hardBounce": true, 53 | "bounceDamp": 0.4, 54 | "properties": { 55 | "translateZ": { 56 | "start": 100, 57 | "end": 0 58 | } 59 | } 60 | }, 61 | { 62 | "name": "glideInRight", 63 | "steps": 20, 64 | "fadeIn": 300, 65 | "tension": 25, 66 | "friction": 10, 67 | "hardBounce": false, 68 | "properties": { 69 | "translateX": { 70 | "start": 500, 71 | "end": 0 72 | } 73 | } 74 | }, 75 | { 76 | "name": "glideInLeft", 77 | "steps": 20, 78 | "fadeIn": 300, 79 | "tension": 25, 80 | "friction": 10, 81 | "hardBounce": false, 82 | "properties": { 83 | "translateX": { 84 | "start": -500, 85 | "end": 0 86 | } 87 | } 88 | }, 89 | { 90 | "name": "glideInUp", 91 | "steps": 20, 92 | "fadeIn": 300, 93 | "tension": 25, 94 | "friction": 10, 95 | "hardBounce": false, 96 | "properties": { 97 | "translateY": { 98 | "start": 500, 99 | "end": 0 100 | } 101 | } 102 | }, 103 | { 104 | "name": "glideInDown", 105 | "steps": 20, 106 | "fadeIn": 300, 107 | "tension": 25, 108 | "friction": 10, 109 | "hardBounce": false, 110 | "properties": { 111 | "translateY": { 112 | "start": -500, 113 | "end": 0 114 | } 115 | } 116 | }, 117 | { 118 | "steps": 25, 119 | "name": "bounceInScale", 120 | "tension": 30, 121 | "friction": 5, 122 | "hardBounce": false, 123 | "bounceDamp": 0.5, 124 | "fadeIn": 100, 125 | "properties": { 126 | "scaleX": { 127 | "start": 0, 128 | "end": 1.00 129 | }, 130 | "scaleY": { 131 | "start": 0, 132 | "end": 1.00 133 | } 134 | } 135 | }, 136 | { 137 | "steps": 25, 138 | "name": "bounceInScale2", 139 | "tension": 10, 140 | "friction": 3, 141 | "hardBounce": false, 142 | "initialVelocity": 20, 143 | "fadeIn": 100, 144 | "properties": { 145 | "scaleX": { 146 | "start": 0, 147 | "end": 1.00 148 | }, 149 | "scaleY": { 150 | "start": 0, 151 | "end": 1.00 152 | } 153 | } 154 | }, 155 | { 156 | "name": "springScaleOut", 157 | "steps": 25, 158 | "tension": 30, 159 | "friction": 5, 160 | "hardBounce": false, 161 | "bounceDamp": 0.5, 162 | "fadeOut": 500, 163 | "properties": { 164 | "scaleX": { 165 | "initialVelocity": 30, 166 | "start": 1.00, 167 | "end": 0.00 168 | }, 169 | "scaleY": { 170 | "initialVelocity": 30, 171 | "start": 1.00, 172 | "end": 0.00 173 | } 174 | } 175 | }, 176 | { 177 | "name": "hoverJiggle", 178 | "steps": 25, 179 | "tension": 50, 180 | "friction": 3, 181 | "initialVelocity": 10, 182 | "properties": { 183 | "scaleX": { 184 | "start": 1.1, 185 | "end": 1.00 186 | }, 187 | "scaleY": { 188 | "start": 1.1, 189 | "end": 1.00 190 | } 191 | } 192 | }, 193 | { 194 | "name": "hoverJiggle2", 195 | "steps": 25, 196 | "tension": 50, 197 | "friction": 3, 198 | "initialVelocity": 10, 199 | "properties": { 200 | "rotate": { 201 | "start": 0.0, 202 | "end": 0.0, 203 | "initialVelocity": 360 204 | }, 205 | "scaleX": { 206 | "start": 1.5, 207 | "end": 1.00 208 | }, 209 | "scaleY": { 210 | "start": 1.1, 211 | "end": 1.00 212 | } 213 | } 214 | }, 215 | { 216 | "name": "twirlIn", 217 | "tension": 50, 218 | "friction": 3, 219 | "initialVelocity": 10, 220 | "fadeIn": 300, 221 | "properties": { 222 | "rotateZ": { 223 | "friction": 2, 224 | "start": 180.0, 225 | "end": 0.0, 226 | "initialVelocity": 180 227 | }, 228 | "scaleX": { 229 | "start": 0.1, 230 | "end": 1.00 231 | }, 232 | "scaleY": { 233 | "start": 0.1, 234 | "end": 1.00 235 | } 236 | } 237 | }, 238 | { 239 | "name": "rubberband", 240 | "tension": 80, 241 | "friction": 3, 242 | "properties": { 243 | "scaleX": { 244 | "start": 1.25, 245 | "end": 1.00, 246 | "initialVelocity": 30 247 | }, 248 | "scaleY": { 249 | "start": 0.75, 250 | "end": 1.00, 251 | "initialVelocity": -1 252 | } 253 | } 254 | }, 255 | { 256 | "name": "jellyfall", 257 | "tension": 120, 258 | "friction": 7, 259 | "hardBounce": true, 260 | "bounceDamp": 0.3, 261 | "fadeIn": 200, 262 | "originX": 0.5, 263 | "originY": 1.0, 264 | "properties": { 265 | "translateY": { 266 | "start": -300, 267 | "end": 0 268 | }, 269 | "scaleY": { 270 | "tension": 40, 271 | "hardBounce": false, 272 | "friction": 1, 273 | "start": 1.5, 274 | "end": 1.00 275 | }, 276 | "scaleX": { 277 | "tension": 40, 278 | "hardBounce": false, 279 | "friction": 1, 280 | "start": 0.5, 281 | "end": 1.00 282 | } 283 | } 284 | }, 285 | { 286 | "name": "jellyfall2", 287 | "tension": 120, 288 | "friction": 5, 289 | "hardBounce": true, 290 | "bounceDamp": 0.25, 291 | "fadeIn": 200, 292 | "originX": 0.5, 293 | "originY": 1.0, 294 | "properties": { 295 | "translateY": { 296 | "start": -300, 297 | "end": 0 298 | }, 299 | "scaleY": { 300 | "tension": 40, 301 | "hardBounce": false, 302 | "friction": 10, 303 | "start": 1.5, 304 | "end": 1.00 305 | }, 306 | "scaleX": { 307 | "tension": 40, 308 | "hardBounce": false, 309 | "friction": 10, 310 | "start": 0.5, 311 | "end": 1.00 312 | } 313 | } 314 | }, 315 | { 316 | "steps": 25, 317 | "name": "slideInRight", 318 | "tension": 50, 319 | "friction": 10, 320 | "fadeIn": 200, 321 | "originX": 0.0, 322 | "originY": 1.0, 323 | "properties": { 324 | "translateX": { 325 | "start": 300, 326 | "end": 0 327 | }, 328 | "skewX": { 329 | "tension": 2, 330 | "friction": 2, 331 | "start": -45, 332 | "end": 0 333 | } 334 | } 335 | }, 336 | { 337 | "steps": 25, 338 | "name": "slideInLeft", 339 | "tension": 50, 340 | "friction": 10, 341 | "fadeIn": 200, 342 | "originX": 1.0, 343 | "originY": 1.0, 344 | "properties": { 345 | "translateX": { 346 | "start": -300, 347 | "end": 0 348 | }, 349 | "skewX": { 350 | "tension": 2, 351 | "friction": 2, 352 | "start": 45, 353 | "end": 0 354 | } 355 | } 356 | }, 357 | { 358 | "name": "flipInLeft", 359 | "tension": 30, 360 | "friction": 5, 361 | "hardBounce": false, 362 | "bounceDamp": 0.5, 363 | "fadeIn": 200, 364 | "properties": { 365 | "rotateY": { 366 | "start": -90, 367 | "end": 0.0 368 | } 369 | } 370 | }, 371 | { 372 | "name": "flipInRight", 373 | "tension": 30, 374 | "friction": 5, 375 | "hardBounce": false, 376 | "bounceDamp": 0.5, 377 | "fadeIn": 200, 378 | "properties": { 379 | "rotateY": { 380 | "start": 90, 381 | "end": 0.0 382 | } 383 | } 384 | }, 385 | { 386 | "name": "flipInBottom", 387 | "tension": 30, 388 | "friction": 5, 389 | "hardBounce": false, 390 | "bounceDamp": 0.5, 391 | "fadeIn": 200, 392 | "properties": { 393 | "rotateX": { 394 | "start": 90, 395 | "end": 0.0 396 | } 397 | } 398 | }, 399 | { 400 | "name": "flipInTop", 401 | "tension": 30, 402 | "friction": 5, 403 | "hardBounce": false, 404 | "bounceDamp": 0.5, 405 | "fadeIn": 200, 406 | "properties": { 407 | "rotateX": { 408 | "start": -90, 409 | "end": 0.0 410 | } 411 | } 412 | }, 413 | { 414 | "name": "kitchenSink", 415 | "tension": 20, 416 | "friction": 3, 417 | "fadeIn": 100, 418 | "properties": { 419 | "rotateX": { 420 | "start": -90, 421 | "end": 0.0 422 | }, 423 | "rotateZ": { 424 | "start": -90, 425 | "end": 0.0 426 | }, 427 | "scaleX": { 428 | "start": 0.1, 429 | "end": 1.00 430 | }, 431 | "scaleY": { 432 | "tension": 5, 433 | "friction": 1, 434 | "start": 0.1, 435 | "end": 1.00 436 | } 437 | } 438 | }, 439 | { 440 | "name": "flyInBottom", 441 | "tension": 10, 442 | "friction": 5, 443 | "fadeIn": 200, 444 | "bounceDamp": 0.5, 445 | "originX": 0.5, 446 | "originY": 1.0, 447 | "properties": { 448 | "rotateX": { 449 | "start": 30, 450 | "end": 0.0 451 | }, 452 | "translateZ": { 453 | "start": -100, 454 | "end": 0 455 | } 456 | } 457 | }, 458 | { 459 | "name": "flyInLeft", 460 | "tension": 10, 461 | "friction": 5, 462 | "fadeIn": 200, 463 | "bounceDamp": 0.5, 464 | "originX": 0.5, 465 | "originY": 1.0, 466 | "properties": { 467 | "rotateY": { 468 | "start": 30, 469 | "end": 0.0 470 | }, 471 | "translateZ": { 472 | "start": -100, 473 | "end": 0 474 | } 475 | } 476 | }, 477 | { 478 | "name": "flyInRight", 479 | "tension": 10, 480 | "friction": 5, 481 | "fadeIn": 200, 482 | "bounceDamp": 0.5, 483 | "originX": 0.5, 484 | "originY": 1.0, 485 | "properties": { 486 | "rotateY": { 487 | "start": -30, 488 | "end": 0.0 489 | }, 490 | "translateZ": { 491 | "start": -100, 492 | "end": 0 493 | } 494 | } 495 | } 496 | ] 497 | } -------------------------------------------------------------------------------- /dist/_animations.scss: -------------------------------------------------------------------------------- 1 | @import "bounceInRight"; 2 | @import "bounceInLeft"; 3 | @import "bounceInDown"; 4 | @import "bounceInDrop"; 5 | @import "glideInRight"; 6 | @import "glideInLeft"; 7 | @import "glideInUp"; 8 | @import "glideInDown"; 9 | @import "bounceInScale"; 10 | @import "bounceInScale2"; 11 | @import "springScaleOut"; 12 | @import "hoverJiggle"; 13 | @import "hoverJiggle2"; 14 | @import "twirlIn"; 15 | @import "rubberband"; 16 | @import "jellyfall"; 17 | @import "jellyfall2"; 18 | @import "slideInRight"; 19 | @import "slideInLeft"; 20 | @import "flipInLeft"; 21 | @import "flipInRight"; 22 | @import "flipInBottom"; 23 | @import "flipInTop"; 24 | @import "kitchenSink"; 25 | @import "flyInBottom"; 26 | @import "flyInLeft"; 27 | @import "flyInRight"; 28 | -------------------------------------------------------------------------------- /dist/_bounceInDown.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceInDown { 2 | 0% { 3 | -webkit-transform: translateY(-500.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: translateY(-433.098px); 8 | opacity: 0.147; 9 | } 10 | 4% { 11 | -webkit-transform: translateY(-267.700px); 12 | opacity: 0.293; 13 | } 14 | 6% { 15 | -webkit-transform: translateY(0.000px); 16 | opacity: 0.440; 17 | } 18 | 8% { 19 | -webkit-transform: translateY(-100.666px); 20 | opacity: 0.587; 21 | } 22 | 10% { 23 | -webkit-transform: translateY(-129.751px); 24 | opacity: 0.733; 25 | } 26 | 12% { 27 | -webkit-transform: translateY(-106.898px); 28 | opacity: 0.880; 29 | } 30 | 14% { 31 | -webkit-transform: translateY(-59.373px); 32 | opacity: 1.000; 33 | } 34 | 16% { 35 | -webkit-transform: translateY(0.000px); 36 | } 37 | 18% { 38 | -webkit-transform: translateY(-25.258px); 39 | } 40 | 20% { 41 | -webkit-transform: translateY(-32.495px); 42 | } 43 | 22% { 44 | -webkit-transform: translateY(-27.002px); 45 | } 46 | 24% { 47 | -webkit-transform: translateY(-8.091px); 48 | } 49 | 26% { 50 | -webkit-transform: translateY(0.000px); 51 | } 52 | 28% { 53 | -webkit-transform: translateY(-6.352px); 54 | } 55 | 30% { 56 | -webkit-transform: translateY(-8.229px); 57 | } 58 | 32% { 59 | -webkit-transform: translateY(-6.762px); 60 | } 61 | 34% { 62 | -webkit-transform: translateY(-1.991px); 63 | } 64 | 36% { 65 | -webkit-transform: translateY(-0.635px); 66 | } 67 | 38% { 68 | -webkit-transform: translateY(-1.600px); 69 | } 70 | 40% { 71 | -webkit-transform: translateY(-2.073px); 72 | } 73 | 42% { 74 | -webkit-transform: translateY(-1.697px); 75 | } 76 | 44% { 77 | -webkit-transform: translateY(-0.491px); 78 | } 79 | 46% { 80 | -webkit-transform: translateY(-0.156px); 81 | } 82 | 50% { 83 | -webkit-transform: translateY(-0.519px); 84 | } 85 | 54% { 86 | -webkit-transform: translateY(-0.127px); 87 | } 88 | 100% { 89 | -webkit-transform: translateY(0.000px); 90 | opacity: 1.000; 91 | } 92 | } 93 | @keyframes bounceInDown { 94 | 0% { 95 | transform: translateY(-500.000px); 96 | opacity: 0.000; 97 | } 98 | 2% { 99 | transform: translateY(-433.098px); 100 | opacity: 0.147; 101 | } 102 | 4% { 103 | transform: translateY(-267.700px); 104 | opacity: 0.293; 105 | } 106 | 6% { 107 | transform: translateY(0.000px); 108 | opacity: 0.440; 109 | } 110 | 8% { 111 | transform: translateY(-100.666px); 112 | opacity: 0.587; 113 | } 114 | 10% { 115 | transform: translateY(-129.751px); 116 | opacity: 0.733; 117 | } 118 | 12% { 119 | transform: translateY(-106.898px); 120 | opacity: 0.880; 121 | } 122 | 14% { 123 | transform: translateY(-59.373px); 124 | opacity: 1.000; 125 | } 126 | 16% { 127 | transform: translateY(0.000px); 128 | } 129 | 18% { 130 | transform: translateY(-25.258px); 131 | } 132 | 20% { 133 | transform: translateY(-32.495px); 134 | } 135 | 22% { 136 | transform: translateY(-27.002px); 137 | } 138 | 24% { 139 | transform: translateY(-8.091px); 140 | } 141 | 26% { 142 | transform: translateY(0.000px); 143 | } 144 | 28% { 145 | transform: translateY(-6.352px); 146 | } 147 | 30% { 148 | transform: translateY(-8.229px); 149 | } 150 | 32% { 151 | transform: translateY(-6.762px); 152 | } 153 | 34% { 154 | transform: translateY(-1.991px); 155 | } 156 | 36% { 157 | transform: translateY(-0.635px); 158 | } 159 | 38% { 160 | transform: translateY(-1.600px); 161 | } 162 | 40% { 163 | transform: translateY(-2.073px); 164 | } 165 | 42% { 166 | transform: translateY(-1.697px); 167 | } 168 | 44% { 169 | transform: translateY(-0.491px); 170 | } 171 | 46% { 172 | transform: translateY(-0.156px); 173 | } 174 | 50% { 175 | transform: translateY(-0.519px); 176 | } 177 | 54% { 178 | transform: translateY(-0.127px); 179 | } 180 | 100% { 181 | transform: translateY(0.000px); 182 | opacity: 1.000; 183 | } 184 | } 185 | 186 | // Generated by easegen 187 | // Recommended Length: 2.2000439999999957 188 | .bounceInDown { 189 | -webkit-animation: bounceInDown 2.200s linear 0s 1 normal both; 190 | -webkit-transform-origin: 50% 50%; 191 | animation: bounceInDown 2.200s linear 0s 1 normal both; 192 | transform-origin: 50% 50%; 193 | } 194 | -------------------------------------------------------------------------------- /dist/_bounceInDrop.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceInDrop { 2 | 0% { 3 | -webkit-transform: translateZ(100.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: translateZ(90.195px); 8 | opacity: 0.302; 9 | } 10 | 4% { 11 | -webkit-transform: translateZ(65.322px); 12 | opacity: 0.604; 13 | } 14 | 6% { 15 | -webkit-transform: translateZ(13.119px); 16 | opacity: 0.907; 17 | } 18 | 8% { 19 | -webkit-transform: translateZ(12.314px); 20 | opacity: 1.000; 21 | } 22 | 10% { 23 | -webkit-transform: translateZ(23.579px); 24 | } 25 | 12% { 26 | -webkit-transform: translateZ(24.825px); 27 | } 28 | 14% { 29 | -webkit-transform: translateZ(18.166px); 30 | } 31 | 16% { 32 | -webkit-transform: translateZ(5.528px); 33 | } 34 | 18% { 35 | -webkit-transform: translateZ(0.000px); 36 | } 37 | 20% { 38 | -webkit-transform: translateZ(4.150px); 39 | } 40 | 22% { 41 | -webkit-transform: translateZ(5.952px); 42 | } 43 | 24% { 44 | -webkit-transform: translateZ(5.105px); 45 | } 46 | 26% { 47 | -webkit-transform: translateZ(3.448px); 48 | } 49 | 28% { 50 | -webkit-transform: translateZ(0.264px); 51 | } 52 | 30% { 53 | -webkit-transform: translateZ(0.706px); 54 | } 55 | 32% { 56 | -webkit-transform: translateZ(1.352px); 57 | } 58 | 36% { 59 | -webkit-transform: translateZ(1.040px); 60 | } 61 | 38% { 62 | -webkit-transform: translateZ(0.315px); 63 | } 64 | 40% { 65 | -webkit-transform: translateZ(0.000px); 66 | } 67 | 44% { 68 | -webkit-transform: translateZ(0.341px); 69 | } 70 | 50% { 71 | -webkit-transform: translateZ(0.015px); 72 | } 73 | 100% { 74 | -webkit-transform: translateZ(0.000px); 75 | opacity: 1.000; 76 | } 77 | } 78 | @keyframes bounceInDrop { 79 | 0% { 80 | transform: translateZ(100.000px); 81 | opacity: 0.000; 82 | } 83 | 2% { 84 | transform: translateZ(90.195px); 85 | opacity: 0.302; 86 | } 87 | 4% { 88 | transform: translateZ(65.322px); 89 | opacity: 0.604; 90 | } 91 | 6% { 92 | transform: translateZ(13.119px); 93 | opacity: 0.907; 94 | } 95 | 8% { 96 | transform: translateZ(12.314px); 97 | opacity: 1.000; 98 | } 99 | 10% { 100 | transform: translateZ(23.579px); 101 | } 102 | 12% { 103 | transform: translateZ(24.825px); 104 | } 105 | 14% { 106 | transform: translateZ(18.166px); 107 | } 108 | 16% { 109 | transform: translateZ(5.528px); 110 | } 111 | 18% { 112 | transform: translateZ(0.000px); 113 | } 114 | 20% { 115 | transform: translateZ(4.150px); 116 | } 117 | 22% { 118 | transform: translateZ(5.952px); 119 | } 120 | 24% { 121 | transform: translateZ(5.105px); 122 | } 123 | 26% { 124 | transform: translateZ(3.448px); 125 | } 126 | 28% { 127 | transform: translateZ(0.264px); 128 | } 129 | 30% { 130 | transform: translateZ(0.706px); 131 | } 132 | 32% { 133 | transform: translateZ(1.352px); 134 | } 135 | 36% { 136 | transform: translateZ(1.040px); 137 | } 138 | 38% { 139 | transform: translateZ(0.315px); 140 | } 141 | 40% { 142 | transform: translateZ(0.000px); 143 | } 144 | 44% { 145 | transform: translateZ(0.341px); 146 | } 147 | 50% { 148 | transform: translateZ(0.015px); 149 | } 150 | 100% { 151 | transform: translateZ(0.000px); 152 | opacity: 1.000; 153 | } 154 | } 155 | 156 | // Generated by easegen 157 | // Recommended Length: 2.2667119999999956 158 | .bounceInDrop { 159 | -webkit-animation: bounceInDrop 2.267s linear 0s 1 normal both; 160 | -webkit-transform-origin: 50% 50%; 161 | animation: bounceInDrop 2.267s linear 0s 1 normal both; 162 | transform-origin: 50% 50%; 163 | } 164 | -------------------------------------------------------------------------------- /dist/_bounceInLeft.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceInLeft { 2 | 0% { 3 | -webkit-transform: translateX(-500.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: translateX(-433.098px); 8 | opacity: 0.293; 9 | } 10 | 4% { 11 | -webkit-transform: translateX(-267.700px); 12 | opacity: 0.587; 13 | } 14 | 6% { 15 | -webkit-transform: translateX(0.000px); 16 | opacity: 0.880; 17 | } 18 | 8% { 19 | -webkit-transform: translateX(-100.666px); 20 | opacity: 1.000; 21 | } 22 | 10% { 23 | -webkit-transform: translateX(-129.751px); 24 | } 25 | 12% { 26 | -webkit-transform: translateX(-106.898px); 27 | } 28 | 14% { 29 | -webkit-transform: translateX(-59.373px); 30 | } 31 | 16% { 32 | -webkit-transform: translateX(0.000px); 33 | } 34 | 18% { 35 | -webkit-transform: translateX(-25.258px); 36 | } 37 | 20% { 38 | -webkit-transform: translateX(-32.495px); 39 | } 40 | 22% { 41 | -webkit-transform: translateX(-27.002px); 42 | } 43 | 24% { 44 | -webkit-transform: translateX(-8.091px); 45 | } 46 | 26% { 47 | -webkit-transform: translateX(0.000px); 48 | } 49 | 28% { 50 | -webkit-transform: translateX(-6.352px); 51 | } 52 | 30% { 53 | -webkit-transform: translateX(-8.229px); 54 | } 55 | 32% { 56 | -webkit-transform: translateX(-6.762px); 57 | } 58 | 34% { 59 | -webkit-transform: translateX(-1.991px); 60 | } 61 | 36% { 62 | -webkit-transform: translateX(-0.635px); 63 | } 64 | 38% { 65 | -webkit-transform: translateX(-1.600px); 66 | } 67 | 40% { 68 | -webkit-transform: translateX(-2.073px); 69 | } 70 | 42% { 71 | -webkit-transform: translateX(-1.697px); 72 | } 73 | 44% { 74 | -webkit-transform: translateX(-0.491px); 75 | } 76 | 46% { 77 | -webkit-transform: translateX(-0.156px); 78 | } 79 | 50% { 80 | -webkit-transform: translateX(-0.519px); 81 | } 82 | 54% { 83 | -webkit-transform: translateX(-0.127px); 84 | } 85 | 100% { 86 | -webkit-transform: translateX(0.000px); 87 | opacity: 1.000; 88 | } 89 | } 90 | @keyframes bounceInLeft { 91 | 0% { 92 | transform: translateX(-500.000px); 93 | opacity: 0.000; 94 | } 95 | 2% { 96 | transform: translateX(-433.098px); 97 | opacity: 0.293; 98 | } 99 | 4% { 100 | transform: translateX(-267.700px); 101 | opacity: 0.587; 102 | } 103 | 6% { 104 | transform: translateX(0.000px); 105 | opacity: 0.880; 106 | } 107 | 8% { 108 | transform: translateX(-100.666px); 109 | opacity: 1.000; 110 | } 111 | 10% { 112 | transform: translateX(-129.751px); 113 | } 114 | 12% { 115 | transform: translateX(-106.898px); 116 | } 117 | 14% { 118 | transform: translateX(-59.373px); 119 | } 120 | 16% { 121 | transform: translateX(0.000px); 122 | } 123 | 18% { 124 | transform: translateX(-25.258px); 125 | } 126 | 20% { 127 | transform: translateX(-32.495px); 128 | } 129 | 22% { 130 | transform: translateX(-27.002px); 131 | } 132 | 24% { 133 | transform: translateX(-8.091px); 134 | } 135 | 26% { 136 | transform: translateX(0.000px); 137 | } 138 | 28% { 139 | transform: translateX(-6.352px); 140 | } 141 | 30% { 142 | transform: translateX(-8.229px); 143 | } 144 | 32% { 145 | transform: translateX(-6.762px); 146 | } 147 | 34% { 148 | transform: translateX(-1.991px); 149 | } 150 | 36% { 151 | transform: translateX(-0.635px); 152 | } 153 | 38% { 154 | transform: translateX(-1.600px); 155 | } 156 | 40% { 157 | transform: translateX(-2.073px); 158 | } 159 | 42% { 160 | transform: translateX(-1.697px); 161 | } 162 | 44% { 163 | transform: translateX(-0.491px); 164 | } 165 | 46% { 166 | transform: translateX(-0.156px); 167 | } 168 | 50% { 169 | transform: translateX(-0.519px); 170 | } 171 | 54% { 172 | transform: translateX(-0.127px); 173 | } 174 | 100% { 175 | transform: translateX(0.000px); 176 | opacity: 1.000; 177 | } 178 | } 179 | 180 | // Generated by easegen 181 | // Recommended Length: 2.2000439999999957 182 | .bounceInLeft { 183 | -webkit-animation: bounceInLeft 2.200s linear 0s 1 normal both; 184 | -webkit-transform-origin: 50% 50%; 185 | animation: bounceInLeft 2.200s linear 0s 1 normal both; 186 | transform-origin: 50% 50%; 187 | } 188 | -------------------------------------------------------------------------------- /dist/_bounceInRight.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceInRight { 2 | 0% { 3 | -webkit-transform: translateX(500.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | opacity: 0.162; 8 | } 9 | 4% { 10 | -webkit-transform: translateX(440.825px); 11 | opacity: 0.324; 12 | } 13 | 6% { 14 | -webkit-transform: translateX(381.781px); 15 | opacity: 0.487; 16 | } 17 | 8% { 18 | -webkit-transform: translateX(241.229px); 19 | opacity: 0.649; 20 | } 21 | 10% { 22 | -webkit-transform: translateX(171.050px); 23 | opacity: 0.811; 24 | } 25 | 12% { 26 | -webkit-transform: translateX(50.001px); 27 | opacity: 0.973; 28 | } 29 | 14% { 30 | -webkit-transform: translateX(3.284px); 31 | opacity: 1.000; 32 | } 33 | 16% { 34 | -webkit-transform: translateX(11.179px); 35 | } 36 | 18% { 37 | -webkit-transform: translateX(18.967px); 38 | } 39 | 20% { 40 | -webkit-transform: translateX(26.223px); 41 | } 42 | 22% { 43 | -webkit-transform: translateX(26.480px); 44 | } 45 | 24% { 46 | -webkit-transform: translateX(22.511px); 47 | } 48 | 26% { 49 | -webkit-transform: translateX(19.163px); 50 | } 51 | 28% { 52 | -webkit-transform: translateX(15.500px); 53 | } 54 | 30% { 55 | -webkit-transform: translateX(7.939px); 56 | } 57 | 32% { 58 | -webkit-transform: translateX(4.694px); 59 | } 60 | 34% { 61 | -webkit-transform: translateX(0.000px); 62 | } 63 | 36% { 64 | -webkit-transform: translateX(0.697px); 65 | } 66 | 38% { 67 | -webkit-transform: translateX(1.536px); 68 | } 69 | 46% { 70 | -webkit-transform: translateX(1.000px); 71 | } 72 | 50% { 73 | -webkit-transform: translateX(0.302px); 74 | } 75 | 54% { 76 | -webkit-transform: translateX(0.000px); 77 | } 78 | 100% { 79 | -webkit-transform: translateX(0.000px); 80 | opacity: 1.000; 81 | } 82 | } 83 | @keyframes bounceInRight { 84 | 0% { 85 | transform: translateX(500.000px); 86 | opacity: 0.000; 87 | } 88 | 2% { 89 | opacity: 0.162; 90 | } 91 | 4% { 92 | transform: translateX(440.825px); 93 | opacity: 0.324; 94 | } 95 | 6% { 96 | transform: translateX(381.781px); 97 | opacity: 0.487; 98 | } 99 | 8% { 100 | transform: translateX(241.229px); 101 | opacity: 0.649; 102 | } 103 | 10% { 104 | transform: translateX(171.050px); 105 | opacity: 0.811; 106 | } 107 | 12% { 108 | transform: translateX(50.001px); 109 | opacity: 0.973; 110 | } 111 | 14% { 112 | transform: translateX(3.284px); 113 | opacity: 1.000; 114 | } 115 | 16% { 116 | transform: translateX(11.179px); 117 | } 118 | 18% { 119 | transform: translateX(18.967px); 120 | } 121 | 20% { 122 | transform: translateX(26.223px); 123 | } 124 | 22% { 125 | transform: translateX(26.480px); 126 | } 127 | 24% { 128 | transform: translateX(22.511px); 129 | } 130 | 26% { 131 | transform: translateX(19.163px); 132 | } 133 | 28% { 134 | transform: translateX(15.500px); 135 | } 136 | 30% { 137 | transform: translateX(7.939px); 138 | } 139 | 32% { 140 | transform: translateX(4.694px); 141 | } 142 | 34% { 143 | transform: translateX(0.000px); 144 | } 145 | 36% { 146 | transform: translateX(0.697px); 147 | } 148 | 38% { 149 | transform: translateX(1.536px); 150 | } 151 | 46% { 152 | transform: translateX(1.000px); 153 | } 154 | 50% { 155 | transform: translateX(0.302px); 156 | } 157 | 54% { 158 | transform: translateX(0.000px); 159 | } 160 | 100% { 161 | transform: translateX(0.000px); 162 | opacity: 1.000; 163 | } 164 | } 165 | 166 | // Generated by easegen 167 | // Recommended Length: 1.2166910000000004 168 | .bounceInRight { 169 | -webkit-animation: bounceInRight 1.217s linear 0s 1 normal both; 170 | -webkit-transform-origin: 50% 50%; 171 | animation: bounceInRight 1.217s linear 0s 1 normal both; 172 | transform-origin: 50% 50%; 173 | } 174 | -------------------------------------------------------------------------------- /dist/_bounceInScale.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceInScale { 2 | 0% { 3 | -webkit-transform: scaleX(0.000) scaleY(0.000); 4 | opacity: 0.000; 5 | } 6 | 4% { 7 | -webkit-transform: scaleX(0.088) scaleY(0.088); 8 | opacity: 0.460; 9 | } 10 | 8% { 11 | -webkit-transform: scaleX(0.392) scaleY(0.392); 12 | opacity: 0.920; 13 | } 14 | 12% { 15 | -webkit-transform: scaleX(0.613) scaleY(0.613); 16 | opacity: 1.000; 17 | } 18 | 16% { 19 | -webkit-transform: scaleX(0.885) scaleY(0.885); 20 | } 21 | 20% { 22 | -webkit-transform: scaleX(1.046) scaleY(1.046); 23 | } 24 | 24% { 25 | -webkit-transform: scaleX(1.107) scaleY(1.107); 26 | } 27 | 28% { 28 | -webkit-transform: scaleX(1.109) scaleY(1.109); 29 | } 30 | 32% { 31 | -webkit-transform: scaleX(1.082) scaleY(1.082); 32 | } 33 | 36% { 34 | -webkit-transform: scaleX(1.045) scaleY(1.045); 35 | } 36 | 40% { 37 | -webkit-transform: scaleX(1.014) scaleY(1.014); 38 | } 39 | 44% { 40 | -webkit-transform: scaleX(1.000) scaleY(1.000); 41 | } 42 | 48% { 43 | -webkit-transform: scaleX(0.990) scaleY(0.990); 44 | } 45 | 52% { 46 | -webkit-transform: scaleX(0.988) scaleY(0.988); 47 | } 48 | 56% { 49 | -webkit-transform: scaleX(0.991) scaleY(0.991); 50 | } 51 | 60% { 52 | -webkit-transform: scaleX(0.993) scaleY(0.993); 53 | } 54 | 64% { 55 | -webkit-transform: scaleX(0.997) scaleY(0.997); 56 | } 57 | 68% { 58 | -webkit-transform: scaleX(1.000) scaleY(1.000); 59 | } 60 | 76% { 61 | -webkit-transform: scaleX(1.001) scaleY(1.001); 62 | } 63 | 100% { 64 | -webkit-transform: scaleX(1.000) scaleY(1.000); 65 | opacity: 1.000; 66 | } 67 | } 68 | @keyframes bounceInScale { 69 | 0% { 70 | transform: scaleX(0.000) scaleY(0.000); 71 | opacity: 0.000; 72 | } 73 | 4% { 74 | transform: scaleX(0.088) scaleY(0.088); 75 | opacity: 0.460; 76 | } 77 | 8% { 78 | transform: scaleX(0.392) scaleY(0.392); 79 | opacity: 0.920; 80 | } 81 | 12% { 82 | transform: scaleX(0.613) scaleY(0.613); 83 | opacity: 1.000; 84 | } 85 | 16% { 86 | transform: scaleX(0.885) scaleY(0.885); 87 | } 88 | 20% { 89 | transform: scaleX(1.046) scaleY(1.046); 90 | } 91 | 24% { 92 | transform: scaleX(1.107) scaleY(1.107); 93 | } 94 | 28% { 95 | transform: scaleX(1.109) scaleY(1.109); 96 | } 97 | 32% { 98 | transform: scaleX(1.082) scaleY(1.082); 99 | } 100 | 36% { 101 | transform: scaleX(1.045) scaleY(1.045); 102 | } 103 | 40% { 104 | transform: scaleX(1.014) scaleY(1.014); 105 | } 106 | 44% { 107 | transform: scaleX(1.000) scaleY(1.000); 108 | } 109 | 48% { 110 | transform: scaleX(0.990) scaleY(0.990); 111 | } 112 | 52% { 113 | transform: scaleX(0.988) scaleY(0.988); 114 | } 115 | 56% { 116 | transform: scaleX(0.991) scaleY(0.991); 117 | } 118 | 60% { 119 | transform: scaleX(0.993) scaleY(0.993); 120 | } 121 | 64% { 122 | transform: scaleX(0.997) scaleY(0.997); 123 | } 124 | 68% { 125 | transform: scaleX(1.000) scaleY(1.000); 126 | } 127 | 76% { 128 | transform: scaleX(1.001) scaleY(1.001); 129 | } 130 | 100% { 131 | transform: scaleX(1.000) scaleY(1.000); 132 | opacity: 1.000; 133 | } 134 | } 135 | 136 | // Generated by easegen 137 | // Recommended Length: 1.150023000000001 138 | .bounceInScale { 139 | -webkit-animation: bounceInScale 1.150s linear 0s 1 normal both; 140 | -webkit-transform-origin: 50% 50%; 141 | animation: bounceInScale 1.150s linear 0s 1 normal both; 142 | transform-origin: 50% 50%; 143 | } 144 | -------------------------------------------------------------------------------- /dist/_bounceInScale2.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceInScale2 { 2 | 0% { 3 | -webkit-transform: scaleX(0.000) scaleY(0.000); 4 | opacity: 0.000; 5 | } 6 | 4% { 7 | -webkit-transform: scaleX(0.860) scaleY(0.860); 8 | opacity: 0.740; 9 | } 10 | 8% { 11 | -webkit-transform: scaleX(1.610) scaleY(1.610); 12 | opacity: 1.000; 13 | } 14 | 12% { 15 | -webkit-transform: scaleX(1.675) scaleY(1.675); 16 | } 17 | 16% { 18 | -webkit-transform: scaleX(1.402) scaleY(1.402); 19 | } 20 | 20% { 21 | -webkit-transform: scaleX(1.134) scaleY(1.134); 22 | } 23 | 24% { 24 | -webkit-transform: scaleX(0.915) scaleY(0.915); 25 | } 26 | 28% { 27 | -webkit-transform: scaleX(0.860) scaleY(0.860); 28 | } 29 | 32% { 30 | -webkit-transform: scaleX(0.892) scaleY(0.892); 31 | } 32 | 36% { 33 | -webkit-transform: scaleX(0.947) scaleY(0.947); 34 | } 35 | 40% { 36 | -webkit-transform: scaleX(0.995) scaleY(0.995); 37 | } 38 | 44% { 39 | -webkit-transform: scaleX(1.025) scaleY(1.025); 40 | } 41 | 48% { 42 | -webkit-transform: scaleX(1.028) scaleY(1.028); 43 | } 44 | 52% { 45 | -webkit-transform: scaleX(1.016) scaleY(1.016); 46 | } 47 | 56% { 48 | -webkit-transform: scaleX(1.005) scaleY(1.005); 49 | } 50 | 60% { 51 | -webkit-transform: scaleX(0.996) scaleY(0.996); 52 | } 53 | 64% { 54 | -webkit-transform: scaleX(0.994) scaleY(0.994); 55 | } 56 | 72% { 57 | -webkit-transform: scaleX(0.998) scaleY(0.998); 58 | } 59 | 76% { 60 | -webkit-transform: scaleX(1.000) scaleY(1.000); 61 | } 62 | 100% { 63 | -webkit-transform: scaleX(1.000) scaleY(1.000); 64 | opacity: 1.000; 65 | } 66 | } 67 | @keyframes bounceInScale2 { 68 | 0% { 69 | transform: scaleX(0.000) scaleY(0.000); 70 | opacity: 0.000; 71 | } 72 | 4% { 73 | transform: scaleX(0.860) scaleY(0.860); 74 | opacity: 0.740; 75 | } 76 | 8% { 77 | transform: scaleX(1.610) scaleY(1.610); 78 | opacity: 1.000; 79 | } 80 | 12% { 81 | transform: scaleX(1.675) scaleY(1.675); 82 | } 83 | 16% { 84 | transform: scaleX(1.402) scaleY(1.402); 85 | } 86 | 20% { 87 | transform: scaleX(1.134) scaleY(1.134); 88 | } 89 | 24% { 90 | transform: scaleX(0.915) scaleY(0.915); 91 | } 92 | 28% { 93 | transform: scaleX(0.860) scaleY(0.860); 94 | } 95 | 32% { 96 | transform: scaleX(0.892) scaleY(0.892); 97 | } 98 | 36% { 99 | transform: scaleX(0.947) scaleY(0.947); 100 | } 101 | 40% { 102 | transform: scaleX(0.995) scaleY(0.995); 103 | } 104 | 44% { 105 | transform: scaleX(1.025) scaleY(1.025); 106 | } 107 | 48% { 108 | transform: scaleX(1.028) scaleY(1.028); 109 | } 110 | 52% { 111 | transform: scaleX(1.016) scaleY(1.016); 112 | } 113 | 56% { 114 | transform: scaleX(1.005) scaleY(1.005); 115 | } 116 | 60% { 117 | transform: scaleX(0.996) scaleY(0.996); 118 | } 119 | 64% { 120 | transform: scaleX(0.994) scaleY(0.994); 121 | } 122 | 72% { 123 | transform: scaleX(0.998) scaleY(0.998); 124 | } 125 | 76% { 126 | transform: scaleX(1.000) scaleY(1.000); 127 | } 128 | 100% { 129 | transform: scaleX(1.000) scaleY(1.000); 130 | opacity: 1.000; 131 | } 132 | } 133 | 134 | // Generated by easegen 135 | // Recommended Length: 1.8500369999999973 136 | .bounceInScale2 { 137 | -webkit-animation: bounceInScale2 1.850s linear 0s 1 normal both; 138 | -webkit-transform-origin: 50% 50%; 139 | animation: bounceInScale2 1.850s linear 0s 1 normal both; 140 | transform-origin: 50% 50%; 141 | } 142 | -------------------------------------------------------------------------------- /dist/_flipInBottom.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flipInBottom { 2 | 0% { 3 | -webkit-transform: rotateX(90.000deg); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateX(87.845deg); 8 | opacity: 0.173; 9 | } 10 | 4% { 11 | -webkit-transform: rotateX(74.294deg); 12 | opacity: 0.347; 13 | } 14 | 6% { 15 | -webkit-transform: rotateX(54.835deg); 16 | opacity: 0.520; 17 | } 18 | 8% { 19 | -webkit-transform: rotateX(34.962deg); 20 | opacity: 0.693; 21 | } 22 | 10% { 23 | -webkit-transform: rotateX(17.398deg); 24 | opacity: 0.867; 25 | } 26 | 12% { 27 | -webkit-transform: rotateX(4.318deg); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateX(-6.871deg); 32 | } 33 | 16% { 34 | -webkit-transform: rotateX(-9.632deg); 35 | } 36 | 18% { 37 | -webkit-transform: rotateX(-9.832deg); 38 | } 39 | 20% { 40 | -webkit-transform: rotateX(-8.436deg); 41 | } 42 | 22% { 43 | -webkit-transform: rotateX(-6.330deg); 44 | } 45 | 24% { 46 | -webkit-transform: rotateX(-4.062deg); 47 | } 48 | 26% { 49 | -webkit-transform: rotateX(-2.094deg); 50 | } 51 | 28% { 52 | -webkit-transform: rotateX(-0.605deg); 53 | } 54 | 30% { 55 | -webkit-transform: rotateX(0.399deg); 56 | } 57 | 32% { 58 | -webkit-transform: rotateX(0.932deg); 59 | } 60 | 34% { 61 | -webkit-transform: rotateX(1.108deg); 62 | } 63 | 38% { 64 | -webkit-transform: rotateX(0.724deg); 65 | } 66 | 40% { 67 | -webkit-transform: rotateX(0.473deg); 68 | } 69 | 42% { 70 | -webkit-transform: rotateX(0.252deg); 71 | } 72 | 44% { 73 | -webkit-transform: rotateX(0.078deg); 74 | } 75 | 46% { 76 | -webkit-transform: rotateX(-0.037deg); 77 | } 78 | 100% { 79 | -webkit-transform: rotateX(0.000deg); 80 | opacity: 1.000; 81 | } 82 | } 83 | @keyframes flipInBottom { 84 | 0% { 85 | transform: rotateX(90.000deg); 86 | opacity: 0.000; 87 | } 88 | 2% { 89 | transform: rotateX(87.845deg); 90 | opacity: 0.173; 91 | } 92 | 4% { 93 | transform: rotateX(74.294deg); 94 | opacity: 0.347; 95 | } 96 | 6% { 97 | transform: rotateX(54.835deg); 98 | opacity: 0.520; 99 | } 100 | 8% { 101 | transform: rotateX(34.962deg); 102 | opacity: 0.693; 103 | } 104 | 10% { 105 | transform: rotateX(17.398deg); 106 | opacity: 0.867; 107 | } 108 | 12% { 109 | transform: rotateX(4.318deg); 110 | opacity: 1.000; 111 | } 112 | 14% { 113 | transform: rotateX(-6.871deg); 114 | } 115 | 16% { 116 | transform: rotateX(-9.632deg); 117 | } 118 | 18% { 119 | transform: rotateX(-9.832deg); 120 | } 121 | 20% { 122 | transform: rotateX(-8.436deg); 123 | } 124 | 22% { 125 | transform: rotateX(-6.330deg); 126 | } 127 | 24% { 128 | transform: rotateX(-4.062deg); 129 | } 130 | 26% { 131 | transform: rotateX(-2.094deg); 132 | } 133 | 28% { 134 | transform: rotateX(-0.605deg); 135 | } 136 | 30% { 137 | transform: rotateX(0.399deg); 138 | } 139 | 32% { 140 | transform: rotateX(0.932deg); 141 | } 142 | 34% { 143 | transform: rotateX(1.108deg); 144 | } 145 | 38% { 146 | transform: rotateX(0.724deg); 147 | } 148 | 40% { 149 | transform: rotateX(0.473deg); 150 | } 151 | 42% { 152 | transform: rotateX(0.252deg); 153 | } 154 | 44% { 155 | transform: rotateX(0.078deg); 156 | } 157 | 46% { 158 | transform: rotateX(-0.037deg); 159 | } 160 | 100% { 161 | transform: rotateX(0.000deg); 162 | opacity: 1.000; 163 | } 164 | } 165 | 166 | // Generated by easegen 167 | // Recommended Length: 1.7333679999999978 168 | .flipInBottom { 169 | -webkit-animation: flipInBottom 1.733s linear 0s 1 normal both; 170 | -webkit-transform-origin: 50% 50%; 171 | animation: flipInBottom 1.733s linear 0s 1 normal both; 172 | transform-origin: 50% 50%; 173 | } 174 | -------------------------------------------------------------------------------- /dist/_flipInLeft.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flipInLeft { 2 | 0% { 3 | -webkit-transform: rotateY(-90.000deg); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateY(-87.845deg); 8 | opacity: 0.173; 9 | } 10 | 4% { 11 | -webkit-transform: rotateY(-74.294deg); 12 | opacity: 0.347; 13 | } 14 | 6% { 15 | -webkit-transform: rotateY(-54.835deg); 16 | opacity: 0.520; 17 | } 18 | 8% { 19 | -webkit-transform: rotateY(-34.962deg); 20 | opacity: 0.693; 21 | } 22 | 10% { 23 | -webkit-transform: rotateY(-17.398deg); 24 | opacity: 0.867; 25 | } 26 | 12% { 27 | -webkit-transform: rotateY(-4.318deg); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateY(6.871deg); 32 | } 33 | 16% { 34 | -webkit-transform: rotateY(9.632deg); 35 | } 36 | 18% { 37 | -webkit-transform: rotateY(9.832deg); 38 | } 39 | 20% { 40 | -webkit-transform: rotateY(8.436deg); 41 | } 42 | 22% { 43 | -webkit-transform: rotateY(6.330deg); 44 | } 45 | 24% { 46 | -webkit-transform: rotateY(4.062deg); 47 | } 48 | 26% { 49 | -webkit-transform: rotateY(2.094deg); 50 | } 51 | 28% { 52 | -webkit-transform: rotateY(0.605deg); 53 | } 54 | 30% { 55 | -webkit-transform: rotateY(-0.399deg); 56 | } 57 | 32% { 58 | -webkit-transform: rotateY(-0.932deg); 59 | } 60 | 34% { 61 | -webkit-transform: rotateY(-1.108deg); 62 | } 63 | 38% { 64 | -webkit-transform: rotateY(-0.724deg); 65 | } 66 | 40% { 67 | -webkit-transform: rotateY(-0.473deg); 68 | } 69 | 42% { 70 | -webkit-transform: rotateY(-0.252deg); 71 | } 72 | 44% { 73 | -webkit-transform: rotateY(-0.078deg); 74 | } 75 | 46% { 76 | -webkit-transform: rotateY(0.037deg); 77 | } 78 | 100% { 79 | -webkit-transform: rotateY(0.000deg); 80 | opacity: 1.000; 81 | } 82 | } 83 | @keyframes flipInLeft { 84 | 0% { 85 | transform: rotateY(-90.000deg); 86 | opacity: 0.000; 87 | } 88 | 2% { 89 | transform: rotateY(-87.845deg); 90 | opacity: 0.173; 91 | } 92 | 4% { 93 | transform: rotateY(-74.294deg); 94 | opacity: 0.347; 95 | } 96 | 6% { 97 | transform: rotateY(-54.835deg); 98 | opacity: 0.520; 99 | } 100 | 8% { 101 | transform: rotateY(-34.962deg); 102 | opacity: 0.693; 103 | } 104 | 10% { 105 | transform: rotateY(-17.398deg); 106 | opacity: 0.867; 107 | } 108 | 12% { 109 | transform: rotateY(-4.318deg); 110 | opacity: 1.000; 111 | } 112 | 14% { 113 | transform: rotateY(6.871deg); 114 | } 115 | 16% { 116 | transform: rotateY(9.632deg); 117 | } 118 | 18% { 119 | transform: rotateY(9.832deg); 120 | } 121 | 20% { 122 | transform: rotateY(8.436deg); 123 | } 124 | 22% { 125 | transform: rotateY(6.330deg); 126 | } 127 | 24% { 128 | transform: rotateY(4.062deg); 129 | } 130 | 26% { 131 | transform: rotateY(2.094deg); 132 | } 133 | 28% { 134 | transform: rotateY(0.605deg); 135 | } 136 | 30% { 137 | transform: rotateY(-0.399deg); 138 | } 139 | 32% { 140 | transform: rotateY(-0.932deg); 141 | } 142 | 34% { 143 | transform: rotateY(-1.108deg); 144 | } 145 | 38% { 146 | transform: rotateY(-0.724deg); 147 | } 148 | 40% { 149 | transform: rotateY(-0.473deg); 150 | } 151 | 42% { 152 | transform: rotateY(-0.252deg); 153 | } 154 | 44% { 155 | transform: rotateY(-0.078deg); 156 | } 157 | 46% { 158 | transform: rotateY(0.037deg); 159 | } 160 | 100% { 161 | transform: rotateY(0.000deg); 162 | opacity: 1.000; 163 | } 164 | } 165 | 166 | // Generated by easegen 167 | // Recommended Length: 1.7333679999999978 168 | .flipInLeft { 169 | -webkit-animation: flipInLeft 1.733s linear 0s 1 normal both; 170 | -webkit-transform-origin: 50% 50%; 171 | animation: flipInLeft 1.733s linear 0s 1 normal both; 172 | transform-origin: 50% 50%; 173 | } 174 | -------------------------------------------------------------------------------- /dist/_flipInRight.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flipInRight { 2 | 0% { 3 | -webkit-transform: rotateY(90.000deg); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateY(87.845deg); 8 | opacity: 0.173; 9 | } 10 | 4% { 11 | -webkit-transform: rotateY(74.294deg); 12 | opacity: 0.347; 13 | } 14 | 6% { 15 | -webkit-transform: rotateY(54.835deg); 16 | opacity: 0.520; 17 | } 18 | 8% { 19 | -webkit-transform: rotateY(34.962deg); 20 | opacity: 0.693; 21 | } 22 | 10% { 23 | -webkit-transform: rotateY(17.398deg); 24 | opacity: 0.867; 25 | } 26 | 12% { 27 | -webkit-transform: rotateY(4.318deg); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateY(-6.871deg); 32 | } 33 | 16% { 34 | -webkit-transform: rotateY(-9.632deg); 35 | } 36 | 18% { 37 | -webkit-transform: rotateY(-9.832deg); 38 | } 39 | 20% { 40 | -webkit-transform: rotateY(-8.436deg); 41 | } 42 | 22% { 43 | -webkit-transform: rotateY(-6.330deg); 44 | } 45 | 24% { 46 | -webkit-transform: rotateY(-4.062deg); 47 | } 48 | 26% { 49 | -webkit-transform: rotateY(-2.094deg); 50 | } 51 | 28% { 52 | -webkit-transform: rotateY(-0.605deg); 53 | } 54 | 30% { 55 | -webkit-transform: rotateY(0.399deg); 56 | } 57 | 32% { 58 | -webkit-transform: rotateY(0.932deg); 59 | } 60 | 34% { 61 | -webkit-transform: rotateY(1.108deg); 62 | } 63 | 38% { 64 | -webkit-transform: rotateY(0.724deg); 65 | } 66 | 40% { 67 | -webkit-transform: rotateY(0.473deg); 68 | } 69 | 42% { 70 | -webkit-transform: rotateY(0.252deg); 71 | } 72 | 44% { 73 | -webkit-transform: rotateY(0.078deg); 74 | } 75 | 46% { 76 | -webkit-transform: rotateY(-0.037deg); 77 | } 78 | 100% { 79 | -webkit-transform: rotateY(0.000deg); 80 | opacity: 1.000; 81 | } 82 | } 83 | @keyframes flipInRight { 84 | 0% { 85 | transform: rotateY(90.000deg); 86 | opacity: 0.000; 87 | } 88 | 2% { 89 | transform: rotateY(87.845deg); 90 | opacity: 0.173; 91 | } 92 | 4% { 93 | transform: rotateY(74.294deg); 94 | opacity: 0.347; 95 | } 96 | 6% { 97 | transform: rotateY(54.835deg); 98 | opacity: 0.520; 99 | } 100 | 8% { 101 | transform: rotateY(34.962deg); 102 | opacity: 0.693; 103 | } 104 | 10% { 105 | transform: rotateY(17.398deg); 106 | opacity: 0.867; 107 | } 108 | 12% { 109 | transform: rotateY(4.318deg); 110 | opacity: 1.000; 111 | } 112 | 14% { 113 | transform: rotateY(-6.871deg); 114 | } 115 | 16% { 116 | transform: rotateY(-9.632deg); 117 | } 118 | 18% { 119 | transform: rotateY(-9.832deg); 120 | } 121 | 20% { 122 | transform: rotateY(-8.436deg); 123 | } 124 | 22% { 125 | transform: rotateY(-6.330deg); 126 | } 127 | 24% { 128 | transform: rotateY(-4.062deg); 129 | } 130 | 26% { 131 | transform: rotateY(-2.094deg); 132 | } 133 | 28% { 134 | transform: rotateY(-0.605deg); 135 | } 136 | 30% { 137 | transform: rotateY(0.399deg); 138 | } 139 | 32% { 140 | transform: rotateY(0.932deg); 141 | } 142 | 34% { 143 | transform: rotateY(1.108deg); 144 | } 145 | 38% { 146 | transform: rotateY(0.724deg); 147 | } 148 | 40% { 149 | transform: rotateY(0.473deg); 150 | } 151 | 42% { 152 | transform: rotateY(0.252deg); 153 | } 154 | 44% { 155 | transform: rotateY(0.078deg); 156 | } 157 | 46% { 158 | transform: rotateY(-0.037deg); 159 | } 160 | 100% { 161 | transform: rotateY(0.000deg); 162 | opacity: 1.000; 163 | } 164 | } 165 | 166 | // Generated by easegen 167 | // Recommended Length: 1.7333679999999978 168 | .flipInRight { 169 | -webkit-animation: flipInRight 1.733s linear 0s 1 normal both; 170 | -webkit-transform-origin: 50% 50%; 171 | animation: flipInRight 1.733s linear 0s 1 normal both; 172 | transform-origin: 50% 50%; 173 | } 174 | -------------------------------------------------------------------------------- /dist/_flipInTop.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flipInTop { 2 | 0% { 3 | -webkit-transform: rotateX(-90.000deg); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateX(-87.845deg); 8 | opacity: 0.173; 9 | } 10 | 4% { 11 | -webkit-transform: rotateX(-74.294deg); 12 | opacity: 0.347; 13 | } 14 | 6% { 15 | -webkit-transform: rotateX(-54.835deg); 16 | opacity: 0.520; 17 | } 18 | 8% { 19 | -webkit-transform: rotateX(-34.962deg); 20 | opacity: 0.693; 21 | } 22 | 10% { 23 | -webkit-transform: rotateX(-17.398deg); 24 | opacity: 0.867; 25 | } 26 | 12% { 27 | -webkit-transform: rotateX(-4.318deg); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateX(6.871deg); 32 | } 33 | 16% { 34 | -webkit-transform: rotateX(9.632deg); 35 | } 36 | 18% { 37 | -webkit-transform: rotateX(9.832deg); 38 | } 39 | 20% { 40 | -webkit-transform: rotateX(8.436deg); 41 | } 42 | 22% { 43 | -webkit-transform: rotateX(6.330deg); 44 | } 45 | 24% { 46 | -webkit-transform: rotateX(4.062deg); 47 | } 48 | 26% { 49 | -webkit-transform: rotateX(2.094deg); 50 | } 51 | 28% { 52 | -webkit-transform: rotateX(0.605deg); 53 | } 54 | 30% { 55 | -webkit-transform: rotateX(-0.399deg); 56 | } 57 | 32% { 58 | -webkit-transform: rotateX(-0.932deg); 59 | } 60 | 34% { 61 | -webkit-transform: rotateX(-1.108deg); 62 | } 63 | 38% { 64 | -webkit-transform: rotateX(-0.724deg); 65 | } 66 | 40% { 67 | -webkit-transform: rotateX(-0.473deg); 68 | } 69 | 42% { 70 | -webkit-transform: rotateX(-0.252deg); 71 | } 72 | 44% { 73 | -webkit-transform: rotateX(-0.078deg); 74 | } 75 | 46% { 76 | -webkit-transform: rotateX(0.037deg); 77 | } 78 | 100% { 79 | -webkit-transform: rotateX(0.000deg); 80 | opacity: 1.000; 81 | } 82 | } 83 | @keyframes flipInTop { 84 | 0% { 85 | transform: rotateX(-90.000deg); 86 | opacity: 0.000; 87 | } 88 | 2% { 89 | transform: rotateX(-87.845deg); 90 | opacity: 0.173; 91 | } 92 | 4% { 93 | transform: rotateX(-74.294deg); 94 | opacity: 0.347; 95 | } 96 | 6% { 97 | transform: rotateX(-54.835deg); 98 | opacity: 0.520; 99 | } 100 | 8% { 101 | transform: rotateX(-34.962deg); 102 | opacity: 0.693; 103 | } 104 | 10% { 105 | transform: rotateX(-17.398deg); 106 | opacity: 0.867; 107 | } 108 | 12% { 109 | transform: rotateX(-4.318deg); 110 | opacity: 1.000; 111 | } 112 | 14% { 113 | transform: rotateX(6.871deg); 114 | } 115 | 16% { 116 | transform: rotateX(9.632deg); 117 | } 118 | 18% { 119 | transform: rotateX(9.832deg); 120 | } 121 | 20% { 122 | transform: rotateX(8.436deg); 123 | } 124 | 22% { 125 | transform: rotateX(6.330deg); 126 | } 127 | 24% { 128 | transform: rotateX(4.062deg); 129 | } 130 | 26% { 131 | transform: rotateX(2.094deg); 132 | } 133 | 28% { 134 | transform: rotateX(0.605deg); 135 | } 136 | 30% { 137 | transform: rotateX(-0.399deg); 138 | } 139 | 32% { 140 | transform: rotateX(-0.932deg); 141 | } 142 | 34% { 143 | transform: rotateX(-1.108deg); 144 | } 145 | 38% { 146 | transform: rotateX(-0.724deg); 147 | } 148 | 40% { 149 | transform: rotateX(-0.473deg); 150 | } 151 | 42% { 152 | transform: rotateX(-0.252deg); 153 | } 154 | 44% { 155 | transform: rotateX(-0.078deg); 156 | } 157 | 46% { 158 | transform: rotateX(0.037deg); 159 | } 160 | 100% { 161 | transform: rotateX(0.000deg); 162 | opacity: 1.000; 163 | } 164 | } 165 | 166 | // Generated by easegen 167 | // Recommended Length: 1.7333679999999978 168 | .flipInTop { 169 | -webkit-animation: flipInTop 1.733s linear 0s 1 normal both; 170 | -webkit-transform-origin: 50% 50%; 171 | animation: flipInTop 1.733s linear 0s 1 normal both; 172 | transform-origin: 50% 50%; 173 | } 174 | -------------------------------------------------------------------------------- /dist/_flyIn.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flyIn { 2 | 0% { 3 | -webkit-transform: rotateX(30.000deg) translateZ(-100.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateX(29.549deg) translateZ(-98.497px); 8 | opacity: 0.172; 9 | } 10 | 4% { 11 | -webkit-transform: rotateX(26.674deg) translateZ(-88.914px); 12 | opacity: 0.343; 13 | } 14 | 6% { 15 | -webkit-transform: rotateX(22.385deg) translateZ(-74.615px); 16 | opacity: 0.515; 17 | } 18 | 8% { 19 | -webkit-transform: rotateX(17.700deg) translateZ(-59.000px); 20 | opacity: 0.687; 21 | } 22 | 10% { 23 | -webkit-transform: rotateX(13.108deg) translateZ(-43.694px); 24 | opacity: 0.858; 25 | } 26 | 12% { 27 | -webkit-transform: rotateX(9.119deg) translateZ(-30.396px); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateX(5.876deg) translateZ(-19.588px); 32 | } 33 | 16% { 34 | -webkit-transform: rotateX(3.320deg) translateZ(-11.066px); 35 | } 36 | 18% { 37 | -webkit-transform: rotateX(0.796deg) translateZ(-2.654px); 38 | } 39 | 20% { 40 | -webkit-transform: rotateX(-0.195deg) translateZ(0.649px); 41 | } 42 | 22% { 43 | -webkit-transform: rotateX(-0.766deg) translateZ(2.553px); 44 | } 45 | 24% { 46 | -webkit-transform: rotateX(-1.040deg) translateZ(3.468px); 47 | } 48 | 30% { 49 | -webkit-transform: rotateX(-0.891deg) translateZ(2.968px); 50 | } 51 | 32% { 52 | -webkit-transform: rotateX(-0.720deg) translateZ(2.399px); 53 | } 54 | 34% { 55 | -webkit-transform: rotateX(-0.549deg) translateZ(1.831px); 56 | } 57 | 36% { 58 | -webkit-transform: rotateX(-0.392deg) translateZ(1.305px); 59 | } 60 | 38% { 61 | -webkit-transform: rotateX(-0.260deg) translateZ(0.867px); 62 | } 63 | 40% { 64 | -webkit-transform: rotateX(-0.157deg) translateZ(0.524px); 65 | } 66 | 42% { 67 | -webkit-transform: translateZ(0.263px); 68 | } 69 | 44% { 70 | -webkit-transform: rotateX(-0.025deg); 71 | } 72 | 46% { 73 | -webkit-transform: translateZ(-0.032px); 74 | } 75 | 100% { 76 | -webkit-transform: rotateX(0.000deg) translateZ(0.000px); 77 | opacity: 1.000; 78 | } 79 | } 80 | @keyframes flyIn { 81 | 0% { 82 | transform: rotateX(30.000deg) translateZ(-100.000px); 83 | opacity: 0.000; 84 | } 85 | 2% { 86 | transform: rotateX(29.549deg) translateZ(-98.497px); 87 | opacity: 0.172; 88 | } 89 | 4% { 90 | transform: rotateX(26.674deg) translateZ(-88.914px); 91 | opacity: 0.343; 92 | } 93 | 6% { 94 | transform: rotateX(22.385deg) translateZ(-74.615px); 95 | opacity: 0.515; 96 | } 97 | 8% { 98 | transform: rotateX(17.700deg) translateZ(-59.000px); 99 | opacity: 0.687; 100 | } 101 | 10% { 102 | transform: rotateX(13.108deg) translateZ(-43.694px); 103 | opacity: 0.858; 104 | } 105 | 12% { 106 | transform: rotateX(9.119deg) translateZ(-30.396px); 107 | opacity: 1.000; 108 | } 109 | 14% { 110 | transform: rotateX(5.876deg) translateZ(-19.588px); 111 | } 112 | 16% { 113 | transform: rotateX(3.320deg) translateZ(-11.066px); 114 | } 115 | 18% { 116 | transform: rotateX(0.796deg) translateZ(-2.654px); 117 | } 118 | 20% { 119 | transform: rotateX(-0.195deg) translateZ(0.649px); 120 | } 121 | 22% { 122 | transform: rotateX(-0.766deg) translateZ(2.553px); 123 | } 124 | 24% { 125 | transform: rotateX(-1.040deg) translateZ(3.468px); 126 | } 127 | 30% { 128 | transform: rotateX(-0.891deg) translateZ(2.968px); 129 | } 130 | 32% { 131 | transform: rotateX(-0.720deg) translateZ(2.399px); 132 | } 133 | 34% { 134 | transform: rotateX(-0.549deg) translateZ(1.831px); 135 | } 136 | 36% { 137 | transform: rotateX(-0.392deg) translateZ(1.305px); 138 | } 139 | 38% { 140 | transform: rotateX(-0.260deg) translateZ(0.867px); 141 | } 142 | 40% { 143 | transform: rotateX(-0.157deg) translateZ(0.524px); 144 | } 145 | 42% { 146 | transform: translateZ(0.263px); 147 | } 148 | 44% { 149 | transform: rotateX(-0.025deg); 150 | } 151 | 46% { 152 | transform: translateZ(-0.032px); 153 | } 154 | 100% { 155 | transform: rotateX(0.000deg) translateZ(0.000px); 156 | opacity: 1.000; 157 | } 158 | } 159 | 160 | // Generated by easegen 161 | // Recommended Length: 1.716700999999998 162 | .flyIn { 163 | -webkit-animation: flyIn 1.717s linear 0s 1 normal both; 164 | -webkit-transform-origin: 50% 100%; 165 | animation: flyIn 1.717s linear 0s 1 normal both; 166 | transform-origin: 50% 100%; 167 | } 168 | -------------------------------------------------------------------------------- /dist/_flyInBottom.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flyInBottom { 2 | 0% { 3 | -webkit-transform: rotateX(30.000deg) translateZ(-100.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateX(29.549deg) translateZ(-98.497px); 8 | opacity: 0.172; 9 | } 10 | 4% { 11 | -webkit-transform: rotateX(26.674deg) translateZ(-88.914px); 12 | opacity: 0.343; 13 | } 14 | 6% { 15 | -webkit-transform: rotateX(22.385deg) translateZ(-74.615px); 16 | opacity: 0.515; 17 | } 18 | 8% { 19 | -webkit-transform: rotateX(17.700deg) translateZ(-59.000px); 20 | opacity: 0.687; 21 | } 22 | 10% { 23 | -webkit-transform: rotateX(13.108deg) translateZ(-43.694px); 24 | opacity: 0.858; 25 | } 26 | 12% { 27 | -webkit-transform: rotateX(9.119deg) translateZ(-30.396px); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateX(5.876deg) translateZ(-19.588px); 32 | } 33 | 16% { 34 | -webkit-transform: rotateX(3.320deg) translateZ(-11.066px); 35 | } 36 | 18% { 37 | -webkit-transform: rotateX(0.796deg) translateZ(-2.654px); 38 | } 39 | 20% { 40 | -webkit-transform: rotateX(-0.195deg) translateZ(0.649px); 41 | } 42 | 22% { 43 | -webkit-transform: rotateX(-0.766deg) translateZ(2.553px); 44 | } 45 | 24% { 46 | -webkit-transform: rotateX(-1.040deg) translateZ(3.468px); 47 | } 48 | 30% { 49 | -webkit-transform: rotateX(-0.891deg) translateZ(2.968px); 50 | } 51 | 32% { 52 | -webkit-transform: rotateX(-0.720deg) translateZ(2.399px); 53 | } 54 | 34% { 55 | -webkit-transform: rotateX(-0.549deg) translateZ(1.831px); 56 | } 57 | 36% { 58 | -webkit-transform: rotateX(-0.392deg) translateZ(1.305px); 59 | } 60 | 38% { 61 | -webkit-transform: rotateX(-0.260deg) translateZ(0.867px); 62 | } 63 | 40% { 64 | -webkit-transform: rotateX(-0.157deg) translateZ(0.524px); 65 | } 66 | 42% { 67 | -webkit-transform: translateZ(0.263px); 68 | } 69 | 44% { 70 | -webkit-transform: rotateX(-0.025deg); 71 | } 72 | 46% { 73 | -webkit-transform: translateZ(-0.032px); 74 | } 75 | 100% { 76 | -webkit-transform: rotateX(0.000deg) translateZ(0.000px); 77 | opacity: 1.000; 78 | } 79 | } 80 | @keyframes flyInBottom { 81 | 0% { 82 | transform: rotateX(30.000deg) translateZ(-100.000px); 83 | opacity: 0.000; 84 | } 85 | 2% { 86 | transform: rotateX(29.549deg) translateZ(-98.497px); 87 | opacity: 0.172; 88 | } 89 | 4% { 90 | transform: rotateX(26.674deg) translateZ(-88.914px); 91 | opacity: 0.343; 92 | } 93 | 6% { 94 | transform: rotateX(22.385deg) translateZ(-74.615px); 95 | opacity: 0.515; 96 | } 97 | 8% { 98 | transform: rotateX(17.700deg) translateZ(-59.000px); 99 | opacity: 0.687; 100 | } 101 | 10% { 102 | transform: rotateX(13.108deg) translateZ(-43.694px); 103 | opacity: 0.858; 104 | } 105 | 12% { 106 | transform: rotateX(9.119deg) translateZ(-30.396px); 107 | opacity: 1.000; 108 | } 109 | 14% { 110 | transform: rotateX(5.876deg) translateZ(-19.588px); 111 | } 112 | 16% { 113 | transform: rotateX(3.320deg) translateZ(-11.066px); 114 | } 115 | 18% { 116 | transform: rotateX(0.796deg) translateZ(-2.654px); 117 | } 118 | 20% { 119 | transform: rotateX(-0.195deg) translateZ(0.649px); 120 | } 121 | 22% { 122 | transform: rotateX(-0.766deg) translateZ(2.553px); 123 | } 124 | 24% { 125 | transform: rotateX(-1.040deg) translateZ(3.468px); 126 | } 127 | 30% { 128 | transform: rotateX(-0.891deg) translateZ(2.968px); 129 | } 130 | 32% { 131 | transform: rotateX(-0.720deg) translateZ(2.399px); 132 | } 133 | 34% { 134 | transform: rotateX(-0.549deg) translateZ(1.831px); 135 | } 136 | 36% { 137 | transform: rotateX(-0.392deg) translateZ(1.305px); 138 | } 139 | 38% { 140 | transform: rotateX(-0.260deg) translateZ(0.867px); 141 | } 142 | 40% { 143 | transform: rotateX(-0.157deg) translateZ(0.524px); 144 | } 145 | 42% { 146 | transform: translateZ(0.263px); 147 | } 148 | 44% { 149 | transform: rotateX(-0.025deg); 150 | } 151 | 46% { 152 | transform: translateZ(-0.032px); 153 | } 154 | 100% { 155 | transform: rotateX(0.000deg) translateZ(0.000px); 156 | opacity: 1.000; 157 | } 158 | } 159 | 160 | // Generated by easegen 161 | // Recommended Length: 1.716700999999998 162 | .flyInBottom { 163 | -webkit-animation: flyInBottom 1.717s linear 0s 1 normal both; 164 | -webkit-transform-origin: 50% 100%; 165 | animation: flyInBottom 1.717s linear 0s 1 normal both; 166 | transform-origin: 50% 100%; 167 | } 168 | -------------------------------------------------------------------------------- /dist/_flyInLeft.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flyInLeft { 2 | 0% { 3 | -webkit-transform: rotateY(30.000deg) translateZ(-100.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateY(29.549deg) translateZ(-98.497px); 8 | opacity: 0.172; 9 | } 10 | 4% { 11 | -webkit-transform: rotateY(26.674deg) translateZ(-88.914px); 12 | opacity: 0.343; 13 | } 14 | 6% { 15 | -webkit-transform: rotateY(22.385deg) translateZ(-74.615px); 16 | opacity: 0.515; 17 | } 18 | 8% { 19 | -webkit-transform: rotateY(17.700deg) translateZ(-59.000px); 20 | opacity: 0.687; 21 | } 22 | 10% { 23 | -webkit-transform: rotateY(13.108deg) translateZ(-43.694px); 24 | opacity: 0.858; 25 | } 26 | 12% { 27 | -webkit-transform: rotateY(9.119deg) translateZ(-30.396px); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateY(5.876deg) translateZ(-19.588px); 32 | } 33 | 16% { 34 | -webkit-transform: rotateY(3.320deg) translateZ(-11.066px); 35 | } 36 | 18% { 37 | -webkit-transform: rotateY(0.796deg) translateZ(-2.654px); 38 | } 39 | 20% { 40 | -webkit-transform: rotateY(-0.195deg) translateZ(0.649px); 41 | } 42 | 22% { 43 | -webkit-transform: rotateY(-0.766deg) translateZ(2.553px); 44 | } 45 | 24% { 46 | -webkit-transform: rotateY(-1.040deg) translateZ(3.468px); 47 | } 48 | 30% { 49 | -webkit-transform: rotateY(-0.891deg) translateZ(2.968px); 50 | } 51 | 32% { 52 | -webkit-transform: rotateY(-0.720deg) translateZ(2.399px); 53 | } 54 | 34% { 55 | -webkit-transform: rotateY(-0.549deg) translateZ(1.831px); 56 | } 57 | 36% { 58 | -webkit-transform: rotateY(-0.392deg) translateZ(1.305px); 59 | } 60 | 38% { 61 | -webkit-transform: rotateY(-0.260deg) translateZ(0.867px); 62 | } 63 | 40% { 64 | -webkit-transform: rotateY(-0.157deg) translateZ(0.524px); 65 | } 66 | 42% { 67 | -webkit-transform: translateZ(0.263px); 68 | } 69 | 44% { 70 | -webkit-transform: rotateY(-0.025deg); 71 | } 72 | 46% { 73 | -webkit-transform: translateZ(-0.032px); 74 | } 75 | 100% { 76 | -webkit-transform: rotateY(0.000deg) translateZ(0.000px); 77 | opacity: 1.000; 78 | } 79 | } 80 | @keyframes flyInLeft { 81 | 0% { 82 | transform: rotateY(30.000deg) translateZ(-100.000px); 83 | opacity: 0.000; 84 | } 85 | 2% { 86 | transform: rotateY(29.549deg) translateZ(-98.497px); 87 | opacity: 0.172; 88 | } 89 | 4% { 90 | transform: rotateY(26.674deg) translateZ(-88.914px); 91 | opacity: 0.343; 92 | } 93 | 6% { 94 | transform: rotateY(22.385deg) translateZ(-74.615px); 95 | opacity: 0.515; 96 | } 97 | 8% { 98 | transform: rotateY(17.700deg) translateZ(-59.000px); 99 | opacity: 0.687; 100 | } 101 | 10% { 102 | transform: rotateY(13.108deg) translateZ(-43.694px); 103 | opacity: 0.858; 104 | } 105 | 12% { 106 | transform: rotateY(9.119deg) translateZ(-30.396px); 107 | opacity: 1.000; 108 | } 109 | 14% { 110 | transform: rotateY(5.876deg) translateZ(-19.588px); 111 | } 112 | 16% { 113 | transform: rotateY(3.320deg) translateZ(-11.066px); 114 | } 115 | 18% { 116 | transform: rotateY(0.796deg) translateZ(-2.654px); 117 | } 118 | 20% { 119 | transform: rotateY(-0.195deg) translateZ(0.649px); 120 | } 121 | 22% { 122 | transform: rotateY(-0.766deg) translateZ(2.553px); 123 | } 124 | 24% { 125 | transform: rotateY(-1.040deg) translateZ(3.468px); 126 | } 127 | 30% { 128 | transform: rotateY(-0.891deg) translateZ(2.968px); 129 | } 130 | 32% { 131 | transform: rotateY(-0.720deg) translateZ(2.399px); 132 | } 133 | 34% { 134 | transform: rotateY(-0.549deg) translateZ(1.831px); 135 | } 136 | 36% { 137 | transform: rotateY(-0.392deg) translateZ(1.305px); 138 | } 139 | 38% { 140 | transform: rotateY(-0.260deg) translateZ(0.867px); 141 | } 142 | 40% { 143 | transform: rotateY(-0.157deg) translateZ(0.524px); 144 | } 145 | 42% { 146 | transform: translateZ(0.263px); 147 | } 148 | 44% { 149 | transform: rotateY(-0.025deg); 150 | } 151 | 46% { 152 | transform: translateZ(-0.032px); 153 | } 154 | 100% { 155 | transform: rotateY(0.000deg) translateZ(0.000px); 156 | opacity: 1.000; 157 | } 158 | } 159 | 160 | // Generated by easegen 161 | // Recommended Length: 1.716700999999998 162 | .flyInLeft { 163 | -webkit-animation: flyInLeft 1.717s linear 0s 1 normal both; 164 | -webkit-transform-origin: 50% 100%; 165 | animation: flyInLeft 1.717s linear 0s 1 normal both; 166 | transform-origin: 50% 100%; 167 | } 168 | -------------------------------------------------------------------------------- /dist/_flyInRight.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes flyInRight { 2 | 0% { 3 | -webkit-transform: rotateY(-30.000deg) translateZ(-100.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateY(-29.549deg) translateZ(-98.497px); 8 | opacity: 0.172; 9 | } 10 | 4% { 11 | -webkit-transform: rotateY(-26.674deg) translateZ(-88.914px); 12 | opacity: 0.343; 13 | } 14 | 6% { 15 | -webkit-transform: rotateY(-22.385deg) translateZ(-74.615px); 16 | opacity: 0.515; 17 | } 18 | 8% { 19 | -webkit-transform: rotateY(-17.700deg) translateZ(-59.000px); 20 | opacity: 0.687; 21 | } 22 | 10% { 23 | -webkit-transform: rotateY(-13.108deg) translateZ(-43.694px); 24 | opacity: 0.858; 25 | } 26 | 12% { 27 | -webkit-transform: rotateY(-9.119deg) translateZ(-30.396px); 28 | opacity: 1.000; 29 | } 30 | 14% { 31 | -webkit-transform: rotateY(-5.876deg) translateZ(-19.588px); 32 | } 33 | 16% { 34 | -webkit-transform: rotateY(-3.320deg) translateZ(-11.066px); 35 | } 36 | 18% { 37 | -webkit-transform: rotateY(-0.796deg) translateZ(-2.654px); 38 | } 39 | 20% { 40 | -webkit-transform: rotateY(0.195deg) translateZ(0.649px); 41 | } 42 | 22% { 43 | -webkit-transform: rotateY(0.766deg) translateZ(2.553px); 44 | } 45 | 24% { 46 | -webkit-transform: rotateY(1.040deg) translateZ(3.468px); 47 | } 48 | 30% { 49 | -webkit-transform: rotateY(0.891deg) translateZ(2.968px); 50 | } 51 | 32% { 52 | -webkit-transform: rotateY(0.720deg) translateZ(2.399px); 53 | } 54 | 34% { 55 | -webkit-transform: rotateY(0.549deg) translateZ(1.831px); 56 | } 57 | 36% { 58 | -webkit-transform: rotateY(0.392deg) translateZ(1.305px); 59 | } 60 | 38% { 61 | -webkit-transform: rotateY(0.260deg) translateZ(0.867px); 62 | } 63 | 40% { 64 | -webkit-transform: rotateY(0.157deg) translateZ(0.524px); 65 | } 66 | 42% { 67 | -webkit-transform: translateZ(0.263px); 68 | } 69 | 44% { 70 | -webkit-transform: rotateY(0.025deg); 71 | } 72 | 46% { 73 | -webkit-transform: translateZ(-0.032px); 74 | } 75 | 100% { 76 | -webkit-transform: rotateY(0.000deg) translateZ(0.000px); 77 | opacity: 1.000; 78 | } 79 | } 80 | @keyframes flyInRight { 81 | 0% { 82 | transform: rotateY(-30.000deg) translateZ(-100.000px); 83 | opacity: 0.000; 84 | } 85 | 2% { 86 | transform: rotateY(-29.549deg) translateZ(-98.497px); 87 | opacity: 0.172; 88 | } 89 | 4% { 90 | transform: rotateY(-26.674deg) translateZ(-88.914px); 91 | opacity: 0.343; 92 | } 93 | 6% { 94 | transform: rotateY(-22.385deg) translateZ(-74.615px); 95 | opacity: 0.515; 96 | } 97 | 8% { 98 | transform: rotateY(-17.700deg) translateZ(-59.000px); 99 | opacity: 0.687; 100 | } 101 | 10% { 102 | transform: rotateY(-13.108deg) translateZ(-43.694px); 103 | opacity: 0.858; 104 | } 105 | 12% { 106 | transform: rotateY(-9.119deg) translateZ(-30.396px); 107 | opacity: 1.000; 108 | } 109 | 14% { 110 | transform: rotateY(-5.876deg) translateZ(-19.588px); 111 | } 112 | 16% { 113 | transform: rotateY(-3.320deg) translateZ(-11.066px); 114 | } 115 | 18% { 116 | transform: rotateY(-0.796deg) translateZ(-2.654px); 117 | } 118 | 20% { 119 | transform: rotateY(0.195deg) translateZ(0.649px); 120 | } 121 | 22% { 122 | transform: rotateY(0.766deg) translateZ(2.553px); 123 | } 124 | 24% { 125 | transform: rotateY(1.040deg) translateZ(3.468px); 126 | } 127 | 30% { 128 | transform: rotateY(0.891deg) translateZ(2.968px); 129 | } 130 | 32% { 131 | transform: rotateY(0.720deg) translateZ(2.399px); 132 | } 133 | 34% { 134 | transform: rotateY(0.549deg) translateZ(1.831px); 135 | } 136 | 36% { 137 | transform: rotateY(0.392deg) translateZ(1.305px); 138 | } 139 | 38% { 140 | transform: rotateY(0.260deg) translateZ(0.867px); 141 | } 142 | 40% { 143 | transform: rotateY(0.157deg) translateZ(0.524px); 144 | } 145 | 42% { 146 | transform: translateZ(0.263px); 147 | } 148 | 44% { 149 | transform: rotateY(0.025deg); 150 | } 151 | 46% { 152 | transform: translateZ(-0.032px); 153 | } 154 | 100% { 155 | transform: rotateY(0.000deg) translateZ(0.000px); 156 | opacity: 1.000; 157 | } 158 | } 159 | 160 | // Generated by easegen 161 | // Recommended Length: 1.716700999999998 162 | .flyInRight { 163 | -webkit-animation: flyInRight 1.717s linear 0s 1 normal both; 164 | -webkit-transform-origin: 50% 100%; 165 | animation: flyInRight 1.717s linear 0s 1 normal both; 166 | transform-origin: 50% 100%; 167 | } 168 | -------------------------------------------------------------------------------- /dist/_glideInDown.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes glideInDown { 2 | 0% { 3 | -webkit-transform: translateY(-500.000px); 4 | opacity: 0.000; 5 | } 6 | 5% { 7 | -webkit-transform: translateY(-331.344px); 8 | opacity: 0.367; 9 | } 10 | 10% { 11 | -webkit-transform: translateY(-170.581px); 12 | opacity: 0.733; 13 | } 14 | 15% { 15 | -webkit-transform: translateY(-74.797px); 16 | opacity: 1.000; 17 | } 18 | 20% { 19 | -webkit-transform: translateY(-36.503px); 20 | } 21 | 25% { 22 | -webkit-transform: translateY(-15.738px); 23 | } 24 | 30% { 25 | -webkit-transform: translateY(-6.799px); 26 | } 27 | 35% { 28 | -webkit-transform: translateY(-3.311px); 29 | } 30 | 40% { 31 | -webkit-transform: translateY(-1.433px); 32 | } 33 | 45% { 34 | -webkit-transform: translateY(-0.698px); 35 | } 36 | 50% { 37 | -webkit-transform: translateY(-0.301px); 38 | } 39 | 65% { 40 | -webkit-transform: translateY(-0.027px); 41 | } 42 | 100% { 43 | -webkit-transform: translateY(0.000px); 44 | opacity: 1.000; 45 | } 46 | } 47 | @keyframes glideInDown { 48 | 0% { 49 | transform: translateY(-500.000px); 50 | opacity: 0.000; 51 | } 52 | 5% { 53 | transform: translateY(-331.344px); 54 | opacity: 0.367; 55 | } 56 | 10% { 57 | transform: translateY(-170.581px); 58 | opacity: 0.733; 59 | } 60 | 15% { 61 | transform: translateY(-74.797px); 62 | opacity: 1.000; 63 | } 64 | 20% { 65 | transform: translateY(-36.503px); 66 | } 67 | 25% { 68 | transform: translateY(-15.738px); 69 | } 70 | 30% { 71 | transform: translateY(-6.799px); 72 | } 73 | 35% { 74 | transform: translateY(-3.311px); 75 | } 76 | 40% { 77 | transform: translateY(-1.433px); 78 | } 79 | 45% { 80 | transform: translateY(-0.698px); 81 | } 82 | 50% { 83 | transform: translateY(-0.301px); 84 | } 85 | 65% { 86 | transform: translateY(-0.027px); 87 | } 88 | 100% { 89 | transform: translateY(0.000px); 90 | opacity: 1.000; 91 | } 92 | } 93 | 94 | // Generated by easegen 95 | // Recommended Length: 2.2000439999999957 96 | .glideInDown { 97 | -webkit-animation: glideInDown 2.200s linear 0s 1 normal both; 98 | -webkit-transform-origin: 50% 50%; 99 | animation: glideInDown 2.200s linear 0s 1 normal both; 100 | transform-origin: 50% 50%; 101 | } 102 | -------------------------------------------------------------------------------- /dist/_glideInLeft.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes glideInLeft { 2 | 0% { 3 | -webkit-transform: translateX(-500.000px); 4 | opacity: 0.000; 5 | } 6 | 5% { 7 | -webkit-transform: translateX(-331.344px); 8 | opacity: 0.367; 9 | } 10 | 10% { 11 | -webkit-transform: translateX(-170.581px); 12 | opacity: 0.733; 13 | } 14 | 15% { 15 | -webkit-transform: translateX(-74.797px); 16 | opacity: 1.000; 17 | } 18 | 20% { 19 | -webkit-transform: translateX(-36.503px); 20 | } 21 | 25% { 22 | -webkit-transform: translateX(-15.738px); 23 | } 24 | 30% { 25 | -webkit-transform: translateX(-6.799px); 26 | } 27 | 35% { 28 | -webkit-transform: translateX(-3.311px); 29 | } 30 | 40% { 31 | -webkit-transform: translateX(-1.433px); 32 | } 33 | 45% { 34 | -webkit-transform: translateX(-0.698px); 35 | } 36 | 50% { 37 | -webkit-transform: translateX(-0.301px); 38 | } 39 | 65% { 40 | -webkit-transform: translateX(-0.027px); 41 | } 42 | 100% { 43 | -webkit-transform: translateX(0.000px); 44 | opacity: 1.000; 45 | } 46 | } 47 | @keyframes glideInLeft { 48 | 0% { 49 | transform: translateX(-500.000px); 50 | opacity: 0.000; 51 | } 52 | 5% { 53 | transform: translateX(-331.344px); 54 | opacity: 0.367; 55 | } 56 | 10% { 57 | transform: translateX(-170.581px); 58 | opacity: 0.733; 59 | } 60 | 15% { 61 | transform: translateX(-74.797px); 62 | opacity: 1.000; 63 | } 64 | 20% { 65 | transform: translateX(-36.503px); 66 | } 67 | 25% { 68 | transform: translateX(-15.738px); 69 | } 70 | 30% { 71 | transform: translateX(-6.799px); 72 | } 73 | 35% { 74 | transform: translateX(-3.311px); 75 | } 76 | 40% { 77 | transform: translateX(-1.433px); 78 | } 79 | 45% { 80 | transform: translateX(-0.698px); 81 | } 82 | 50% { 83 | transform: translateX(-0.301px); 84 | } 85 | 65% { 86 | transform: translateX(-0.027px); 87 | } 88 | 100% { 89 | transform: translateX(0.000px); 90 | opacity: 1.000; 91 | } 92 | } 93 | 94 | // Generated by easegen 95 | // Recommended Length: 2.2000439999999957 96 | .glideInLeft { 97 | -webkit-animation: glideInLeft 2.200s linear 0s 1 normal both; 98 | -webkit-transform-origin: 50% 50%; 99 | animation: glideInLeft 2.200s linear 0s 1 normal both; 100 | transform-origin: 50% 50%; 101 | } 102 | -------------------------------------------------------------------------------- /dist/_glideInRight.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes glideInRight { 2 | 0% { 3 | -webkit-transform: translateX(500.000px); 4 | opacity: 0.000; 5 | } 6 | 5% { 7 | -webkit-transform: translateX(331.344px); 8 | opacity: 0.367; 9 | } 10 | 10% { 11 | -webkit-transform: translateX(170.581px); 12 | opacity: 0.733; 13 | } 14 | 15% { 15 | -webkit-transform: translateX(74.797px); 16 | opacity: 1.000; 17 | } 18 | 20% { 19 | -webkit-transform: translateX(36.503px); 20 | } 21 | 25% { 22 | -webkit-transform: translateX(15.738px); 23 | } 24 | 30% { 25 | -webkit-transform: translateX(6.799px); 26 | } 27 | 35% { 28 | -webkit-transform: translateX(3.311px); 29 | } 30 | 40% { 31 | -webkit-transform: translateX(1.433px); 32 | } 33 | 45% { 34 | -webkit-transform: translateX(0.698px); 35 | } 36 | 50% { 37 | -webkit-transform: translateX(0.301px); 38 | } 39 | 65% { 40 | -webkit-transform: translateX(0.027px); 41 | } 42 | 100% { 43 | -webkit-transform: translateX(0.000px); 44 | opacity: 1.000; 45 | } 46 | } 47 | @keyframes glideInRight { 48 | 0% { 49 | transform: translateX(500.000px); 50 | opacity: 0.000; 51 | } 52 | 5% { 53 | transform: translateX(331.344px); 54 | opacity: 0.367; 55 | } 56 | 10% { 57 | transform: translateX(170.581px); 58 | opacity: 0.733; 59 | } 60 | 15% { 61 | transform: translateX(74.797px); 62 | opacity: 1.000; 63 | } 64 | 20% { 65 | transform: translateX(36.503px); 66 | } 67 | 25% { 68 | transform: translateX(15.738px); 69 | } 70 | 30% { 71 | transform: translateX(6.799px); 72 | } 73 | 35% { 74 | transform: translateX(3.311px); 75 | } 76 | 40% { 77 | transform: translateX(1.433px); 78 | } 79 | 45% { 80 | transform: translateX(0.698px); 81 | } 82 | 50% { 83 | transform: translateX(0.301px); 84 | } 85 | 65% { 86 | transform: translateX(0.027px); 87 | } 88 | 100% { 89 | transform: translateX(0.000px); 90 | opacity: 1.000; 91 | } 92 | } 93 | 94 | // Generated by easegen 95 | // Recommended Length: 2.2000439999999957 96 | .glideInRight { 97 | -webkit-animation: glideInRight 2.200s linear 0s 1 normal both; 98 | -webkit-transform-origin: 50% 50%; 99 | animation: glideInRight 2.200s linear 0s 1 normal both; 100 | transform-origin: 50% 50%; 101 | } 102 | -------------------------------------------------------------------------------- /dist/_glideInUp.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes glideInUp { 2 | 0% { 3 | -webkit-transform: translateY(500.000px); 4 | opacity: 0.000; 5 | } 6 | 5% { 7 | -webkit-transform: translateY(331.344px); 8 | opacity: 0.367; 9 | } 10 | 10% { 11 | -webkit-transform: translateY(170.581px); 12 | opacity: 0.733; 13 | } 14 | 15% { 15 | -webkit-transform: translateY(74.797px); 16 | opacity: 1.000; 17 | } 18 | 20% { 19 | -webkit-transform: translateY(36.503px); 20 | } 21 | 25% { 22 | -webkit-transform: translateY(15.738px); 23 | } 24 | 30% { 25 | -webkit-transform: translateY(6.799px); 26 | } 27 | 35% { 28 | -webkit-transform: translateY(3.311px); 29 | } 30 | 40% { 31 | -webkit-transform: translateY(1.433px); 32 | } 33 | 45% { 34 | -webkit-transform: translateY(0.698px); 35 | } 36 | 50% { 37 | -webkit-transform: translateY(0.301px); 38 | } 39 | 65% { 40 | -webkit-transform: translateY(0.027px); 41 | } 42 | 100% { 43 | -webkit-transform: translateY(0.000px); 44 | opacity: 1.000; 45 | } 46 | } 47 | @keyframes glideInUp { 48 | 0% { 49 | transform: translateY(500.000px); 50 | opacity: 0.000; 51 | } 52 | 5% { 53 | transform: translateY(331.344px); 54 | opacity: 0.367; 55 | } 56 | 10% { 57 | transform: translateY(170.581px); 58 | opacity: 0.733; 59 | } 60 | 15% { 61 | transform: translateY(74.797px); 62 | opacity: 1.000; 63 | } 64 | 20% { 65 | transform: translateY(36.503px); 66 | } 67 | 25% { 68 | transform: translateY(15.738px); 69 | } 70 | 30% { 71 | transform: translateY(6.799px); 72 | } 73 | 35% { 74 | transform: translateY(3.311px); 75 | } 76 | 40% { 77 | transform: translateY(1.433px); 78 | } 79 | 45% { 80 | transform: translateY(0.698px); 81 | } 82 | 50% { 83 | transform: translateY(0.301px); 84 | } 85 | 65% { 86 | transform: translateY(0.027px); 87 | } 88 | 100% { 89 | transform: translateY(0.000px); 90 | opacity: 1.000; 91 | } 92 | } 93 | 94 | // Generated by easegen 95 | // Recommended Length: 2.2000439999999957 96 | .glideInUp { 97 | -webkit-animation: glideInUp 2.200s linear 0s 1 normal both; 98 | -webkit-transform-origin: 50% 50%; 99 | animation: glideInUp 2.200s linear 0s 1 normal both; 100 | transform-origin: 50% 50%; 101 | } 102 | -------------------------------------------------------------------------------- /dist/_hoverJiggle.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes hoverJiggle { 2 | 0% { 3 | -webkit-transform: scaleX(1.100) scaleY(1.100); 4 | } 5 | 4% { 6 | -webkit-transform: scaleX(1.424) scaleY(1.424); 7 | } 8 | 8% { 9 | -webkit-transform: scaleX(1.371) scaleY(1.371); 10 | } 11 | 12% { 12 | -webkit-transform: scaleX(1.147) scaleY(1.147); 13 | } 14 | 16% { 15 | -webkit-transform: scaleX(0.892) scaleY(0.892); 16 | } 17 | 20% { 18 | -webkit-transform: scaleX(0.837) scaleY(0.837); 19 | } 20 | 24% { 21 | -webkit-transform: scaleX(0.928) scaleY(0.928); 22 | } 23 | 28% { 24 | -webkit-transform: scaleX(1.030) scaleY(1.030); 25 | } 26 | 32% { 27 | -webkit-transform: scaleX(1.060) scaleY(1.060); 28 | } 29 | 36% { 30 | -webkit-transform: scaleX(1.043) scaleY(1.043); 31 | } 32 | 40% { 33 | -webkit-transform: scaleX(1.002) scaleY(1.002); 34 | } 35 | 44% { 36 | -webkit-transform: scaleX(0.979) scaleY(0.979); 37 | } 38 | 48% { 39 | -webkit-transform: scaleX(0.982) scaleY(0.982); 40 | } 41 | 52% { 42 | -webkit-transform: scaleX(0.993) scaleY(0.993); 43 | } 44 | 56% { 45 | -webkit-transform: scaleX(1.006) scaleY(1.006); 46 | } 47 | 60% { 48 | -webkit-transform: scaleX(1.008) scaleY(1.008); 49 | } 50 | 64% { 51 | -webkit-transform: scaleX(1.003) scaleY(1.003); 52 | } 53 | 68% { 54 | -webkit-transform: scaleX(0.998) scaleY(0.998); 55 | } 56 | 80% { 57 | -webkit-transform: scaleX(1.000) scaleY(1.000); 58 | } 59 | 100% { 60 | -webkit-transform: scaleX(1.000) scaleY(1.000); 61 | } 62 | } 63 | @keyframes hoverJiggle { 64 | 0% { 65 | transform: scaleX(1.100) scaleY(1.100); 66 | } 67 | 4% { 68 | transform: scaleX(1.424) scaleY(1.424); 69 | } 70 | 8% { 71 | transform: scaleX(1.371) scaleY(1.371); 72 | } 73 | 12% { 74 | transform: scaleX(1.147) scaleY(1.147); 75 | } 76 | 16% { 77 | transform: scaleX(0.892) scaleY(0.892); 78 | } 79 | 20% { 80 | transform: scaleX(0.837) scaleY(0.837); 81 | } 82 | 24% { 83 | transform: scaleX(0.928) scaleY(0.928); 84 | } 85 | 28% { 86 | transform: scaleX(1.030) scaleY(1.030); 87 | } 88 | 32% { 89 | transform: scaleX(1.060) scaleY(1.060); 90 | } 91 | 36% { 92 | transform: scaleX(1.043) scaleY(1.043); 93 | } 94 | 40% { 95 | transform: scaleX(1.002) scaleY(1.002); 96 | } 97 | 44% { 98 | transform: scaleX(0.979) scaleY(0.979); 99 | } 100 | 48% { 101 | transform: scaleX(0.982) scaleY(0.982); 102 | } 103 | 52% { 104 | transform: scaleX(0.993) scaleY(0.993); 105 | } 106 | 56% { 107 | transform: scaleX(1.006) scaleY(1.006); 108 | } 109 | 60% { 110 | transform: scaleX(1.008) scaleY(1.008); 111 | } 112 | 64% { 113 | transform: scaleX(1.003) scaleY(1.003); 114 | } 115 | 68% { 116 | transform: scaleX(0.998) scaleY(0.998); 117 | } 118 | 80% { 119 | transform: scaleX(1.000) scaleY(1.000); 120 | } 121 | 100% { 122 | transform: scaleX(1.000) scaleY(1.000); 123 | } 124 | } 125 | 126 | // Generated by easegen 127 | // Recommended Length: 1.5833649999999986 128 | .hoverJiggle { 129 | -webkit-animation: hoverJiggle 1.583s linear 0s 1 normal both; 130 | -webkit-transform-origin: 50% 50%; 131 | animation: hoverJiggle 1.583s linear 0s 1 normal both; 132 | transform-origin: 50% 50%; 133 | } 134 | -------------------------------------------------------------------------------- /dist/_hoverJiggle2.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes hoverJiggle2 { 2 | 0% { 3 | -webkit-transform: rotate(0.000deg) scaleX(1.500) scaleY(1.100); 4 | } 5 | 4% { 6 | -webkit-transform: rotate(14.185deg) scaleX(1.689) scaleY(1.454); 7 | } 8 | 8% { 9 | -webkit-transform: rotate(6.244deg) scaleX(1.038) scaleY(1.147); 10 | } 11 | 12% { 12 | -webkit-transform: rotate(-3.986deg) scaleX(0.737) scaleY(0.858); 13 | } 14 | 16% { 15 | -webkit-transform: rotate(-4.509deg) scaleX(0.871) scaleY(0.874); 16 | } 17 | 20% { 18 | -webkit-transform: rotate(0.590deg) scaleX(1.082) scaleY(1.030); 19 | } 20 | 24% { 21 | -webkit-transform: rotate(1.943deg) scaleX(1.073) scaleY(1.058); 22 | } 23 | 28% { 24 | -webkit-transform: rotate(0.568deg) scaleX(0.994) scaleY(1.012); 25 | } 26 | 32% { 27 | -webkit-transform: rotate(-0.705deg) scaleX(0.967) scaleY(0.978); 28 | } 29 | 36% { 30 | -webkit-transform: rotate(-0.411deg) scaleX(0.993) scaleY(0.990); 31 | } 32 | 40% { 33 | -webkit-transform: rotate(0.140deg) scaleX(1.012) scaleY(1.006); 34 | } 35 | 44% { 36 | -webkit-transform: scaleX(1.006); 37 | } 38 | 48% { 39 | -webkit-transform: rotate(0.001deg) scaleX(0.997) scaleY(0.999); 40 | } 41 | 52% { 42 | -webkit-transform: scaleY(0.997); 43 | } 44 | 56% { 45 | -webkit-transform: scaleX(1.000) scaleY(0.999); 46 | } 47 | 60% { 48 | -webkit-transform: scaleX(1.002) scaleY(1.001); 49 | } 50 | 68% { 51 | -webkit-transform: scaleX(0.999); 52 | } 53 | 100% { 54 | -webkit-transform: rotate(0.000deg) scaleX(1.000) scaleY(1.000); 55 | } 56 | } 57 | @keyframes hoverJiggle2 { 58 | 0% { 59 | transform: rotate(0.000deg) scaleX(1.500) scaleY(1.100); 60 | } 61 | 4% { 62 | transform: rotate(14.185deg) scaleX(1.689) scaleY(1.454); 63 | } 64 | 8% { 65 | transform: rotate(6.244deg) scaleX(1.038) scaleY(1.147); 66 | } 67 | 12% { 68 | transform: rotate(-3.986deg) scaleX(0.737) scaleY(0.858); 69 | } 70 | 16% { 71 | transform: rotate(-4.509deg) scaleX(0.871) scaleY(0.874); 72 | } 73 | 20% { 74 | transform: rotate(0.590deg) scaleX(1.082) scaleY(1.030); 75 | } 76 | 24% { 77 | transform: rotate(1.943deg) scaleX(1.073) scaleY(1.058); 78 | } 79 | 28% { 80 | transform: rotate(0.568deg) scaleX(0.994) scaleY(1.012); 81 | } 82 | 32% { 83 | transform: rotate(-0.705deg) scaleX(0.967) scaleY(0.978); 84 | } 85 | 36% { 86 | transform: rotate(-0.411deg) scaleX(0.993) scaleY(0.990); 87 | } 88 | 40% { 89 | transform: rotate(0.140deg) scaleX(1.012) scaleY(1.006); 90 | } 91 | 44% { 92 | transform: scaleX(1.006); 93 | } 94 | 48% { 95 | transform: rotate(0.001deg) scaleX(0.997) scaleY(0.999); 96 | } 97 | 52% { 98 | transform: scaleY(0.997); 99 | } 100 | 56% { 101 | transform: scaleX(1.000) scaleY(0.999); 102 | } 103 | 60% { 104 | transform: scaleX(1.002) scaleY(1.001); 105 | } 106 | 68% { 107 | transform: scaleX(0.999); 108 | } 109 | 100% { 110 | transform: rotate(0.000deg) scaleX(1.000) scaleY(1.000); 111 | } 112 | } 113 | 114 | // Generated by easegen 115 | // Recommended Length: 2.2167109999999957 116 | .hoverJiggle2 { 117 | -webkit-animation: hoverJiggle2 2.217s linear 0s 1 normal both; 118 | -webkit-transform-origin: 50% 50%; 119 | animation: hoverJiggle2 2.217s linear 0s 1 normal both; 120 | transform-origin: 50% 50%; 121 | } 122 | -------------------------------------------------------------------------------- /dist/_jellyfall.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes jellyfall { 2 | 0% { 3 | -webkit-transform: translateY(-300.000px) scaleY(1.500) scaleX(0.500); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: translateY(-178.268px) scaleY(1.379) scaleX(0.624); 8 | opacity: 0.350; 9 | } 10 | 4% { 11 | -webkit-transform: translateY(0.000px) scaleY(1.006) scaleX(0.998); 12 | opacity: 0.700; 13 | } 14 | 6% { 15 | -webkit-transform: translateY(-11.024px) scaleY(0.679) scaleX(1.322); 16 | opacity: 1.000; 17 | } 18 | 8% { 19 | -webkit-transform: translateY(-1.404px) scaleY(0.746) scaleX(1.252); 20 | } 21 | 10% { 22 | -webkit-transform: translateY(-0.641px) scaleY(0.994) scaleX(1.003); 23 | } 24 | 12% { 25 | -webkit-transform: translateY(-0.303px) scaleY(1.191) scaleX(0.808); 26 | } 27 | 14% { 28 | -webkit-transform: translateY(-0.017px) scaleY(1.197) scaleX(0.804); 29 | } 30 | 16% { 31 | -webkit-transform: scaleY(1.006) scaleX(0.996); 32 | } 33 | 18% { 34 | -webkit-transform: scaleY(0.875) scaleX(1.126); 35 | } 36 | 20% { 37 | -webkit-transform: scaleY(0.869) scaleX(1.130); 38 | } 39 | 22% { 40 | -webkit-transform: scaleY(0.966) scaleX(1.033); 41 | } 42 | 24% { 43 | -webkit-transform: scaleY(1.067) scaleX(0.932); 44 | } 45 | 26% { 46 | -webkit-transform: scaleY(1.087) scaleX(0.913); 47 | } 48 | 28% { 49 | -webkit-transform: scaleY(1.023) scaleX(0.977); 50 | } 51 | 30% { 52 | -webkit-transform: scaleY(0.956) scaleX(1.045); 53 | } 54 | 32% { 55 | -webkit-transform: scaleY(0.938) scaleX(1.062); 56 | } 57 | 34% { 58 | -webkit-transform: scaleY(0.971) scaleX(1.028); 59 | } 60 | 36% { 61 | -webkit-transform: scaleY(1.029) scaleX(0.971); 62 | } 63 | 38% { 64 | -webkit-transform: scaleY(1.041) scaleX(0.959); 65 | } 66 | 40% { 67 | -webkit-transform: scaleY(1.019) scaleX(0.981); 68 | } 69 | 42% { 70 | -webkit-transform: scaleY(0.987) scaleX(1.013); 71 | } 72 | 44% { 73 | -webkit-transform: scaleY(0.972) scaleX(1.028); 74 | } 75 | 46% { 76 | -webkit-transform: scaleY(0.987) scaleX(1.012); 77 | } 78 | 48% { 79 | -webkit-transform: scaleY(1.008) scaleX(0.991); 80 | } 81 | 50% { 82 | -webkit-transform: scaleY(1.018) scaleX(0.982); 83 | } 84 | 52% { 85 | -webkit-transform: scaleY(1.012) scaleX(0.988); 86 | } 87 | 54% { 88 | -webkit-transform: scaleY(0.998) scaleX(1.002); 89 | } 90 | 56% { 91 | -webkit-transform: scaleY(0.988) scaleX(1.012); 92 | } 93 | 58% { 94 | -webkit-transform: scaleY(0.992) scaleX(1.008); 95 | } 96 | 60% { 97 | -webkit-transform: scaleY(1.002) scaleX(0.998); 98 | } 99 | 62% { 100 | -webkit-transform: scaleY(1.008) scaleX(0.992); 101 | } 102 | 66% { 103 | -webkit-transform: scaleY(0.999) scaleX(1.001); 104 | } 105 | 68% { 106 | -webkit-transform: scaleY(0.995) scaleX(1.005); 107 | } 108 | 72% { 109 | -webkit-transform: scaleY(1.000) scaleX(1.000); 110 | } 111 | 74% { 112 | -webkit-transform: scaleY(1.003) scaleX(0.997); 113 | } 114 | 78% { 115 | -webkit-transform: scaleY(1.000) scaleX(1.000); 116 | } 117 | 80% { 118 | -webkit-transform: scaleY(0.998) scaleX(1.002); 119 | } 120 | 86% { 121 | -webkit-transform: scaleY(1.001) scaleX(0.999); 122 | } 123 | 92% { 124 | -webkit-transform: scaleY(0.999) scaleX(1.001); 125 | } 126 | 100% { 127 | -webkit-transform: translateY(0.000px) scaleY(1.000) scaleX(1.000); 128 | opacity: 1.000; 129 | } 130 | } 131 | @keyframes jellyfall { 132 | 0% { 133 | transform: translateY(-300.000px) scaleY(1.500) scaleX(0.500); 134 | opacity: 0.000; 135 | } 136 | 2% { 137 | transform: translateY(-178.268px) scaleY(1.379) scaleX(0.624); 138 | opacity: 0.350; 139 | } 140 | 4% { 141 | transform: translateY(0.000px) scaleY(1.006) scaleX(0.998); 142 | opacity: 0.700; 143 | } 144 | 6% { 145 | transform: translateY(-11.024px) scaleY(0.679) scaleX(1.322); 146 | opacity: 1.000; 147 | } 148 | 8% { 149 | transform: translateY(-1.404px) scaleY(0.746) scaleX(1.252); 150 | } 151 | 10% { 152 | transform: translateY(-0.641px) scaleY(0.994) scaleX(1.003); 153 | } 154 | 12% { 155 | transform: translateY(-0.303px) scaleY(1.191) scaleX(0.808); 156 | } 157 | 14% { 158 | transform: translateY(-0.017px) scaleY(1.197) scaleX(0.804); 159 | } 160 | 16% { 161 | transform: scaleY(1.006) scaleX(0.996); 162 | } 163 | 18% { 164 | transform: scaleY(0.875) scaleX(1.126); 165 | } 166 | 20% { 167 | transform: scaleY(0.869) scaleX(1.130); 168 | } 169 | 22% { 170 | transform: scaleY(0.966) scaleX(1.033); 171 | } 172 | 24% { 173 | transform: scaleY(1.067) scaleX(0.932); 174 | } 175 | 26% { 176 | transform: scaleY(1.087) scaleX(0.913); 177 | } 178 | 28% { 179 | transform: scaleY(1.023) scaleX(0.977); 180 | } 181 | 30% { 182 | transform: scaleY(0.956) scaleX(1.045); 183 | } 184 | 32% { 185 | transform: scaleY(0.938) scaleX(1.062); 186 | } 187 | 34% { 188 | transform: scaleY(0.971) scaleX(1.028); 189 | } 190 | 36% { 191 | transform: scaleY(1.029) scaleX(0.971); 192 | } 193 | 38% { 194 | transform: scaleY(1.041) scaleX(0.959); 195 | } 196 | 40% { 197 | transform: scaleY(1.019) scaleX(0.981); 198 | } 199 | 42% { 200 | transform: scaleY(0.987) scaleX(1.013); 201 | } 202 | 44% { 203 | transform: scaleY(0.972) scaleX(1.028); 204 | } 205 | 46% { 206 | transform: scaleY(0.987) scaleX(1.012); 207 | } 208 | 48% { 209 | transform: scaleY(1.008) scaleX(0.991); 210 | } 211 | 50% { 212 | transform: scaleY(1.018) scaleX(0.982); 213 | } 214 | 52% { 215 | transform: scaleY(1.012) scaleX(0.988); 216 | } 217 | 54% { 218 | transform: scaleY(0.998) scaleX(1.002); 219 | } 220 | 56% { 221 | transform: scaleY(0.988) scaleX(1.012); 222 | } 223 | 58% { 224 | transform: scaleY(0.992) scaleX(1.008); 225 | } 226 | 60% { 227 | transform: scaleY(1.002) scaleX(0.998); 228 | } 229 | 62% { 230 | transform: scaleY(1.008) scaleX(0.992); 231 | } 232 | 66% { 233 | transform: scaleY(0.999) scaleX(1.001); 234 | } 235 | 68% { 236 | transform: scaleY(0.995) scaleX(1.005); 237 | } 238 | 72% { 239 | transform: scaleY(1.000) scaleX(1.000); 240 | } 241 | 74% { 242 | transform: scaleY(1.003) scaleX(0.997); 243 | } 244 | 78% { 245 | transform: scaleY(1.000) scaleX(1.000); 246 | } 247 | 80% { 248 | transform: scaleY(0.998) scaleX(1.002); 249 | } 250 | 86% { 251 | transform: scaleY(1.001) scaleX(0.999); 252 | } 253 | 92% { 254 | transform: scaleY(0.999) scaleX(1.001); 255 | } 256 | 100% { 257 | transform: translateY(0.000px) scaleY(1.000) scaleX(1.000); 258 | opacity: 1.000; 259 | } 260 | } 261 | 262 | // Generated by easegen 263 | // Recommended Length: 3.5000699999999894 264 | .jellyfall { 265 | -webkit-animation: jellyfall 3.500s linear 0s 1 normal both; 266 | -webkit-transform-origin: 50% 100%; 267 | animation: jellyfall 3.500s linear 0s 1 normal both; 268 | transform-origin: 50% 100%; 269 | } 270 | -------------------------------------------------------------------------------- /dist/_jellyfall2.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes jellyfall2 { 2 | 0% { 3 | -webkit-transform: translateY(-300.000px) scaleY(1.500) scaleX(0.500); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | opacity: 0.098; 8 | } 9 | 4% { 10 | -webkit-transform: translateY(-280.888px) scaleY(1.487) scaleX(0.514); 11 | opacity: 0.197; 12 | } 13 | 6% { 14 | -webkit-transform: translateY(-167.995px) scaleY(1.417) scaleX(0.585); 15 | opacity: 0.295; 16 | } 17 | 8% { 18 | -webkit-transform: translateY(-100.098px) scaleY(1.374) scaleX(0.628); 19 | opacity: 0.393; 20 | } 21 | 10% { 22 | -webkit-transform: translateY(-33.430px) scaleY(1.329) scaleX(0.673); 23 | opacity: 0.492; 24 | } 25 | 12% { 26 | -webkit-transform: translateY(0.000px) scaleY(1.287) scaleX(0.714); 27 | opacity: 0.590; 28 | } 29 | 14% { 30 | -webkit-transform: translateY(-10.111px) scaleY(1.249) scaleX(0.752); 31 | opacity: 0.688; 32 | } 33 | 16% { 34 | -webkit-transform: translateY(-17.073px) scaleY(1.213) scaleX(0.788); 35 | opacity: 0.787; 36 | } 37 | 18% { 38 | -webkit-transform: translateY(-20.539px) scaleY(1.155) scaleX(0.846); 39 | opacity: 0.885; 40 | } 41 | 20% { 42 | -webkit-transform: translateY(-18.258px) scaleY(1.131) scaleX(0.870); 43 | opacity: 0.983; 44 | } 45 | 22% { 46 | -webkit-transform: translateY(-14.384px) scaleY(1.110) scaleX(0.891); 47 | opacity: 1.000; 48 | } 49 | 24% { 50 | -webkit-transform: translateY(-9.806px) scaleY(1.093) scaleX(0.908); 51 | } 52 | 26% { 53 | -webkit-transform: translateY(-4.948px) scaleY(1.077) scaleX(0.923); 54 | } 55 | 28% { 56 | -webkit-transform: translateY(0.000px) scaleY(1.054) scaleX(0.946); 57 | } 58 | 30% { 59 | -webkit-transform: translateY(-0.637px) scaleY(1.045) scaleX(0.955); 60 | } 61 | 32% { 62 | -webkit-transform: translateY(-1.045px) scaleY(1.037) scaleX(0.963); 63 | } 64 | 34% { 65 | -webkit-transform: scaleY(1.031) scaleX(0.969); 66 | } 67 | 36% { 68 | -webkit-transform: scaleY(1.026) scaleX(0.975); 69 | } 70 | 38% { 71 | -webkit-transform: scaleY(1.021) scaleX(0.979); 72 | } 73 | 40% { 74 | -webkit-transform: translateY(-0.584px) scaleY(1.015) scaleX(0.986); 75 | } 76 | 42% { 77 | -webkit-transform: translateY(-0.295px) scaleY(1.012) scaleX(0.988); 78 | } 79 | 44% { 80 | -webkit-transform: translateY(-0.041px) scaleY(1.010) scaleX(0.990); 81 | } 82 | 46% { 83 | -webkit-transform: scaleY(1.008) scaleX(0.992); 84 | } 85 | 50% { 86 | -webkit-transform: scaleY(1.005) scaleX(0.995); 87 | } 88 | 56% { 89 | -webkit-transform: scaleY(1.003) scaleX(0.997); 90 | } 91 | 64% { 92 | -webkit-transform: scaleY(1.001) scaleX(0.999); 93 | } 94 | 100% { 95 | -webkit-transform: translateY(0.000px) scaleY(1.000) scaleX(1.000); 96 | opacity: 1.000; 97 | } 98 | } 99 | @keyframes jellyfall2 { 100 | 0% { 101 | transform: translateY(-300.000px) scaleY(1.500) scaleX(0.500); 102 | opacity: 0.000; 103 | } 104 | 2% { 105 | opacity: 0.098; 106 | } 107 | 4% { 108 | transform: translateY(-280.888px) scaleY(1.487) scaleX(0.514); 109 | opacity: 0.197; 110 | } 111 | 6% { 112 | transform: translateY(-167.995px) scaleY(1.417) scaleX(0.585); 113 | opacity: 0.295; 114 | } 115 | 8% { 116 | transform: translateY(-100.098px) scaleY(1.374) scaleX(0.628); 117 | opacity: 0.393; 118 | } 119 | 10% { 120 | transform: translateY(-33.430px) scaleY(1.329) scaleX(0.673); 121 | opacity: 0.492; 122 | } 123 | 12% { 124 | transform: translateY(0.000px) scaleY(1.287) scaleX(0.714); 125 | opacity: 0.590; 126 | } 127 | 14% { 128 | transform: translateY(-10.111px) scaleY(1.249) scaleX(0.752); 129 | opacity: 0.688; 130 | } 131 | 16% { 132 | transform: translateY(-17.073px) scaleY(1.213) scaleX(0.788); 133 | opacity: 0.787; 134 | } 135 | 18% { 136 | transform: translateY(-20.539px) scaleY(1.155) scaleX(0.846); 137 | opacity: 0.885; 138 | } 139 | 20% { 140 | transform: translateY(-18.258px) scaleY(1.131) scaleX(0.870); 141 | opacity: 0.983; 142 | } 143 | 22% { 144 | transform: translateY(-14.384px) scaleY(1.110) scaleX(0.891); 145 | opacity: 1.000; 146 | } 147 | 24% { 148 | transform: translateY(-9.806px) scaleY(1.093) scaleX(0.908); 149 | } 150 | 26% { 151 | transform: translateY(-4.948px) scaleY(1.077) scaleX(0.923); 152 | } 153 | 28% { 154 | transform: translateY(0.000px) scaleY(1.054) scaleX(0.946); 155 | } 156 | 30% { 157 | transform: translateY(-0.637px) scaleY(1.045) scaleX(0.955); 158 | } 159 | 32% { 160 | transform: translateY(-1.045px) scaleY(1.037) scaleX(0.963); 161 | } 162 | 34% { 163 | transform: scaleY(1.031) scaleX(0.969); 164 | } 165 | 36% { 166 | transform: scaleY(1.026) scaleX(0.975); 167 | } 168 | 38% { 169 | transform: scaleY(1.021) scaleX(0.979); 170 | } 171 | 40% { 172 | transform: translateY(-0.584px) scaleY(1.015) scaleX(0.986); 173 | } 174 | 42% { 175 | transform: translateY(-0.295px) scaleY(1.012) scaleX(0.988); 176 | } 177 | 44% { 178 | transform: translateY(-0.041px) scaleY(1.010) scaleX(0.990); 179 | } 180 | 46% { 181 | transform: scaleY(1.008) scaleX(0.992); 182 | } 183 | 50% { 184 | transform: scaleY(1.005) scaleX(0.995); 185 | } 186 | 56% { 187 | transform: scaleY(1.003) scaleX(0.997); 188 | } 189 | 64% { 190 | transform: scaleY(1.001) scaleX(0.999); 191 | } 192 | 100% { 193 | transform: translateY(0.000px) scaleY(1.000) scaleX(1.000); 194 | opacity: 1.000; 195 | } 196 | } 197 | 198 | // Generated by easegen 199 | // Recommended Length: 0.9833530000000014 200 | .jellyfall2 { 201 | -webkit-animation: jellyfall2 0.983s linear 0s 1 normal both; 202 | -webkit-transform-origin: 50% 100%; 203 | animation: jellyfall2 0.983s linear 0s 1 normal both; 204 | transform-origin: 50% 100%; 205 | } 206 | -------------------------------------------------------------------------------- /dist/_kitchenSink.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes kitchenSink { 2 | 0% { 3 | -webkit-transform: rotateX(-90.000deg) rotateZ(-90.000deg) scaleX(0.100) scaleY(0.100); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateX(-75.973deg) rotateZ(-75.973deg) scaleX(0.241) scaleY(0.203); 8 | opacity: 0.727; 9 | } 10 | 4% { 11 | -webkit-transform: rotateX(-24.436deg) rotateZ(-24.436deg) scaleX(0.757) scaleY(0.672); 12 | opacity: 1.000; 13 | } 14 | 6% { 15 | -webkit-transform: rotateX(9.099deg) rotateZ(9.099deg) scaleX(1.092) scaleY(1.098); 16 | } 17 | 8% { 18 | -webkit-transform: rotateX(22.668deg) rotateZ(22.668deg) scaleX(1.227) scaleY(1.393); 19 | } 20 | 10% { 21 | -webkit-transform: rotateX(17.265deg) rotateZ(17.265deg) scaleX(1.172) scaleY(1.469); 22 | } 23 | 12% { 24 | -webkit-transform: rotateX(6.382deg) rotateZ(6.382deg) scaleX(1.064) scaleY(1.327); 25 | } 26 | 14% { 27 | -webkit-transform: rotateX(-3.694deg) rotateZ(-3.694deg) scaleX(0.963) scaleY(1.038); 28 | } 29 | 16% { 30 | -webkit-transform: rotateX(-5.956deg) rotateZ(-5.956deg) scaleX(0.940) scaleY(0.844); 31 | } 32 | 18% { 33 | -webkit-transform: rotateX(-4.448deg) rotateZ(-4.448deg) scaleX(0.956) scaleY(0.748); 34 | } 35 | 20% { 36 | -webkit-transform: rotateX(-0.986deg) rotateZ(-0.986deg) scaleX(0.990) scaleY(0.785); 37 | } 38 | 22% { 39 | -webkit-transform: rotateX(0.948deg) rotateZ(0.948deg) scaleX(1.010) scaleY(0.896); 40 | } 41 | 24% { 42 | -webkit-transform: rotateX(1.532deg) rotateZ(1.532deg) scaleX(1.015) scaleY(1.019); 43 | } 44 | 26% { 45 | -webkit-transform: rotateX(0.972deg) rotateZ(0.972deg) scaleX(1.010) scaleY(1.121); 46 | } 47 | 28% { 48 | -webkit-transform: rotateX(0.251deg) rotateZ(0.251deg) scaleX(1.002) scaleY(1.136); 49 | } 50 | 30% { 51 | -webkit-transform: rotateX(-0.242deg) rotateZ(-0.242deg) scaleX(0.998) scaleY(1.098); 52 | } 53 | 32% { 54 | -webkit-transform: rotateX(-0.386deg) rotateZ(-0.386deg) scaleY(1.016); 55 | } 56 | 34% { 57 | -webkit-transform: rotateX(-0.251deg) rotateZ(-0.251deg) scaleY(0.959); 58 | } 59 | 36% { 60 | -webkit-transform: rotateX(-0.064deg) rotateZ(-0.064deg) scaleX(0.999) scaleY(0.929); 61 | } 62 | 38% { 63 | -webkit-transform: rotateX(0.080deg) rotateZ(0.080deg) scaleY(0.937); 64 | } 65 | 40% { 66 | -webkit-transform: scaleX(1.001) scaleY(0.967); 67 | } 68 | 42% { 69 | -webkit-transform: scaleY(1.011); 70 | } 71 | 44% { 72 | -webkit-transform: scaleY(1.034); 73 | } 74 | 46% { 75 | -webkit-transform: rotateX(-0.021deg) rotateZ(-0.021deg) scaleY(1.039); 76 | } 77 | 48% { 78 | -webkit-transform: scaleY(1.025); 79 | } 80 | 50% { 81 | -webkit-transform: scaleY(1.006); 82 | } 83 | 52% { 84 | -webkit-transform: scaleY(0.989); 85 | } 86 | 54% { 87 | -webkit-transform: scaleY(0.979); 88 | } 89 | 56% { 90 | -webkit-transform: scaleY(0.981); 91 | } 92 | 58% { 93 | -webkit-transform: scaleY(0.990); 94 | } 95 | 60% { 96 | -webkit-transform: scaleY(1.003); 97 | } 98 | 62% { 99 | -webkit-transform: scaleY(1.009); 100 | } 101 | 64% { 102 | -webkit-transform: scaleY(1.011); 103 | } 104 | 66% { 105 | -webkit-transform: scaleY(1.007); 106 | } 107 | 68% { 108 | -webkit-transform: scaleY(1.002); 109 | } 110 | 70% { 111 | -webkit-transform: scaleY(0.996); 112 | } 113 | 72% { 114 | -webkit-transform: scaleY(0.994); 115 | } 116 | 76% { 117 | -webkit-transform: scaleY(0.998); 118 | } 119 | 78% { 120 | -webkit-transform: scaleY(1.001); 121 | } 122 | 80% { 123 | -webkit-transform: scaleY(1.003); 124 | } 125 | 86% { 126 | -webkit-transform: scaleY(1.001); 127 | } 128 | 88% { 129 | -webkit-transform: scaleY(0.999); 130 | } 131 | 98% { 132 | -webkit-transform: scaleY(1.001); 133 | } 134 | 100% { 135 | -webkit-transform: rotateX(0.000deg) rotateZ(0.000deg) scaleX(1.000) scaleY(1.000); 136 | opacity: 1.000; 137 | } 138 | } 139 | @keyframes kitchenSink { 140 | 0% { 141 | transform: rotateX(-90.000deg) rotateZ(-90.000deg) scaleX(0.100) scaleY(0.100); 142 | opacity: 0.000; 143 | } 144 | 2% { 145 | transform: rotateX(-75.973deg) rotateZ(-75.973deg) scaleX(0.241) scaleY(0.203); 146 | opacity: 0.727; 147 | } 148 | 4% { 149 | transform: rotateX(-24.436deg) rotateZ(-24.436deg) scaleX(0.757) scaleY(0.672); 150 | opacity: 1.000; 151 | } 152 | 6% { 153 | transform: rotateX(9.099deg) rotateZ(9.099deg) scaleX(1.092) scaleY(1.098); 154 | } 155 | 8% { 156 | transform: rotateX(22.668deg) rotateZ(22.668deg) scaleX(1.227) scaleY(1.393); 157 | } 158 | 10% { 159 | transform: rotateX(17.265deg) rotateZ(17.265deg) scaleX(1.172) scaleY(1.469); 160 | } 161 | 12% { 162 | transform: rotateX(6.382deg) rotateZ(6.382deg) scaleX(1.064) scaleY(1.327); 163 | } 164 | 14% { 165 | transform: rotateX(-3.694deg) rotateZ(-3.694deg) scaleX(0.963) scaleY(1.038); 166 | } 167 | 16% { 168 | transform: rotateX(-5.956deg) rotateZ(-5.956deg) scaleX(0.940) scaleY(0.844); 169 | } 170 | 18% { 171 | transform: rotateX(-4.448deg) rotateZ(-4.448deg) scaleX(0.956) scaleY(0.748); 172 | } 173 | 20% { 174 | transform: rotateX(-0.986deg) rotateZ(-0.986deg) scaleX(0.990) scaleY(0.785); 175 | } 176 | 22% { 177 | transform: rotateX(0.948deg) rotateZ(0.948deg) scaleX(1.010) scaleY(0.896); 178 | } 179 | 24% { 180 | transform: rotateX(1.532deg) rotateZ(1.532deg) scaleX(1.015) scaleY(1.019); 181 | } 182 | 26% { 183 | transform: rotateX(0.972deg) rotateZ(0.972deg) scaleX(1.010) scaleY(1.121); 184 | } 185 | 28% { 186 | transform: rotateX(0.251deg) rotateZ(0.251deg) scaleX(1.002) scaleY(1.136); 187 | } 188 | 30% { 189 | transform: rotateX(-0.242deg) rotateZ(-0.242deg) scaleX(0.998) scaleY(1.098); 190 | } 191 | 32% { 192 | transform: rotateX(-0.386deg) rotateZ(-0.386deg) scaleY(1.016); 193 | } 194 | 34% { 195 | transform: rotateX(-0.251deg) rotateZ(-0.251deg) scaleY(0.959); 196 | } 197 | 36% { 198 | transform: rotateX(-0.064deg) rotateZ(-0.064deg) scaleX(0.999) scaleY(0.929); 199 | } 200 | 38% { 201 | transform: rotateX(0.080deg) rotateZ(0.080deg) scaleY(0.937); 202 | } 203 | 40% { 204 | transform: scaleX(1.001) scaleY(0.967); 205 | } 206 | 42% { 207 | transform: scaleY(1.011); 208 | } 209 | 44% { 210 | transform: scaleY(1.034); 211 | } 212 | 46% { 213 | transform: rotateX(-0.021deg) rotateZ(-0.021deg) scaleY(1.039); 214 | } 215 | 48% { 216 | transform: scaleY(1.025); 217 | } 218 | 50% { 219 | transform: scaleY(1.006); 220 | } 221 | 52% { 222 | transform: scaleY(0.989); 223 | } 224 | 54% { 225 | transform: scaleY(0.979); 226 | } 227 | 56% { 228 | transform: scaleY(0.981); 229 | } 230 | 58% { 231 | transform: scaleY(0.990); 232 | } 233 | 60% { 234 | transform: scaleY(1.003); 235 | } 236 | 62% { 237 | transform: scaleY(1.009); 238 | } 239 | 64% { 240 | transform: scaleY(1.011); 241 | } 242 | 66% { 243 | transform: scaleY(1.007); 244 | } 245 | 68% { 246 | transform: scaleY(1.002); 247 | } 248 | 70% { 249 | transform: scaleY(0.996); 250 | } 251 | 72% { 252 | transform: scaleY(0.994); 253 | } 254 | 76% { 255 | transform: scaleY(0.998); 256 | } 257 | 78% { 258 | transform: scaleY(1.001); 259 | } 260 | 80% { 261 | transform: scaleY(1.003); 262 | } 263 | 86% { 264 | transform: scaleY(1.001); 265 | } 266 | 88% { 267 | transform: scaleY(0.999); 268 | } 269 | 98% { 270 | transform: scaleY(1.001); 271 | } 272 | 100% { 273 | transform: rotateX(0.000deg) rotateZ(0.000deg) scaleX(1.000) scaleY(1.000); 274 | opacity: 1.000; 275 | } 276 | } 277 | 278 | // Generated by easegen 279 | // Recommended Length: 3.6334059999999884 280 | .kitchenSink { 281 | -webkit-animation: kitchenSink 3.633s linear 0s 1 normal both; 282 | -webkit-transform-origin: 50% 50%; 283 | animation: kitchenSink 3.633s linear 0s 1 normal both; 284 | transform-origin: 50% 50%; 285 | } 286 | -------------------------------------------------------------------------------- /dist/_newAnim.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes newAnim { 2 | 0% { 3 | -webkit-transform: translateY(-500.000px); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: translateY(-469.077px); 8 | opacity: 0.382; 9 | } 10 | 4% { 11 | -webkit-transform: translateY(-270.898px); 12 | opacity: 0.764; 13 | } 14 | 6% { 15 | -webkit-transform: translateY(-68.767px); 16 | opacity: 1.000; 17 | } 18 | 8% { 19 | -webkit-transform: translateY(-43.315px); 20 | } 21 | 10% { 22 | -webkit-transform: translateY(-88.914px); 23 | } 24 | 12% { 25 | -webkit-transform: translateY(-102.843px); 26 | } 27 | 14% { 28 | -webkit-transform: translateY(-81.460px); 29 | } 30 | 16% { 31 | -webkit-transform: translateY(-29.250px); 32 | } 33 | 18% { 34 | -webkit-transform: translateY(0.000px); 35 | } 36 | 20% { 37 | -webkit-transform: translateY(-12.996px); 38 | } 39 | 22% { 40 | -webkit-transform: translateY(-21.539px); 41 | } 42 | 24% { 43 | -webkit-transform: translateY(-20.632px); 44 | } 45 | 26% { 46 | -webkit-transform: translateY(-11.987px); 47 | } 48 | 28% { 49 | -webkit-transform: translateY(-3.132px); 50 | } 51 | 30% { 52 | -webkit-transform: translateY(-1.945px); 53 | } 54 | 32% { 55 | -webkit-transform: translateY(-3.937px); 56 | } 57 | 34% { 58 | -webkit-transform: translateY(-4.599px); 59 | } 60 | 36% { 61 | -webkit-transform: translateY(-3.584px); 62 | } 63 | 38% { 64 | -webkit-transform: translateY(-1.907px); 65 | } 66 | 40% { 67 | -webkit-transform: translateY(0.000px); 68 | } 69 | 42% { 70 | -webkit-transform: translateY(-0.571px); 71 | } 72 | 44% { 73 | -webkit-transform: translateY(-0.946px); 74 | } 75 | 48% { 76 | -webkit-transform: translateY(-0.527px); 77 | } 78 | 50% { 79 | -webkit-transform: translateY(-0.138px); 80 | } 81 | 100% { 82 | -webkit-transform: translateY(0.000px); 83 | opacity: 1.000; 84 | } 85 | } 86 | @keyframes newAnim { 87 | 0% { 88 | transform: translateY(-500.000px); 89 | opacity: 0.000; 90 | } 91 | 2% { 92 | transform: translateY(-469.077px); 93 | opacity: 0.382; 94 | } 95 | 4% { 96 | transform: translateY(-270.898px); 97 | opacity: 0.764; 98 | } 99 | 6% { 100 | transform: translateY(-68.767px); 101 | opacity: 1.000; 102 | } 103 | 8% { 104 | transform: translateY(-43.315px); 105 | } 106 | 10% { 107 | transform: translateY(-88.914px); 108 | } 109 | 12% { 110 | transform: translateY(-102.843px); 111 | } 112 | 14% { 113 | transform: translateY(-81.460px); 114 | } 115 | 16% { 116 | transform: translateY(-29.250px); 117 | } 118 | 18% { 119 | transform: translateY(0.000px); 120 | } 121 | 20% { 122 | transform: translateY(-12.996px); 123 | } 124 | 22% { 125 | transform: translateY(-21.539px); 126 | } 127 | 24% { 128 | transform: translateY(-20.632px); 129 | } 130 | 26% { 131 | transform: translateY(-11.987px); 132 | } 133 | 28% { 134 | transform: translateY(-3.132px); 135 | } 136 | 30% { 137 | transform: translateY(-1.945px); 138 | } 139 | 32% { 140 | transform: translateY(-3.937px); 141 | } 142 | 34% { 143 | transform: translateY(-4.599px); 144 | } 145 | 36% { 146 | transform: translateY(-3.584px); 147 | } 148 | 38% { 149 | transform: translateY(-1.907px); 150 | } 151 | 40% { 152 | transform: translateY(0.000px); 153 | } 154 | 42% { 155 | transform: translateY(-0.571px); 156 | } 157 | 44% { 158 | transform: translateY(-0.946px); 159 | } 160 | 48% { 161 | transform: translateY(-0.527px); 162 | } 163 | 50% { 164 | transform: translateY(-0.138px); 165 | } 166 | 100% { 167 | transform: translateY(0.000px); 168 | opacity: 1.000; 169 | } 170 | } 171 | 172 | // Generated by easegen 173 | // Recommended Length: 2.8667239999999925 174 | .newAnim { 175 | -webkit-animation: newAnim 2.867s linear 0s 1 normal both; 176 | -webkit-transform-origin: 50% 50%; 177 | animation: newAnim 2.867s linear 0s 1 normal both; 178 | transform-origin: 50% 50%; 179 | } 180 | -------------------------------------------------------------------------------- /dist/_rubberband.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes rubberband { 2 | 0% { 3 | -webkit-transform: scaleX(1.250) scaleY(0.750); 4 | } 5 | 2% { 6 | -webkit-transform: scaleX(1.692) scaleY(0.748); 7 | } 8 | 4% { 9 | -webkit-transform: scaleX(2.162) scaleY(0.808); 10 | } 11 | 6% { 12 | -webkit-transform: scaleX(2.128) scaleY(0.912); 13 | } 14 | 8% { 15 | -webkit-transform: scaleX(1.748) scaleY(1.016); 16 | } 17 | 10% { 18 | -webkit-transform: scaleX(1.226) scaleY(1.087); 19 | } 20 | 12% { 21 | -webkit-transform: scaleX(0.778) scaleY(1.111); 22 | } 23 | 14% { 24 | -webkit-transform: scaleX(0.524) scaleY(1.093); 25 | } 26 | 16% { 27 | -webkit-transform: scaleX(0.489) scaleY(1.050); 28 | } 29 | 18% { 30 | -webkit-transform: scaleX(0.627) scaleY(1.003); 31 | } 32 | 20% { 33 | -webkit-transform: scaleX(0.845) scaleY(0.968); 34 | } 35 | 22% { 36 | -webkit-transform: scaleX(1.056) scaleY(0.952); 37 | } 38 | 24% { 39 | -webkit-transform: scaleX(1.190) scaleY(0.957); 40 | } 41 | 26% { 42 | -webkit-transform: scaleX(1.227) scaleY(0.973); 43 | } 44 | 28% { 45 | -webkit-transform: scaleX(1.182) scaleY(0.994); 46 | } 47 | 30% { 48 | -webkit-transform: scaleX(1.090) scaleY(1.011); 49 | } 50 | 32% { 51 | -webkit-transform: scaleX(0.996) scaleY(1.020); 52 | } 53 | 34% { 54 | -webkit-transform: scaleX(0.927); 55 | } 56 | 36% { 57 | -webkit-transform: scaleX(0.901) scaleY(1.014); 58 | } 59 | 38% { 60 | -webkit-transform: scaleX(0.913) scaleY(1.005); 61 | } 62 | 40% { 63 | -webkit-transform: scaleX(0.950) scaleY(0.997); 64 | } 65 | 42% { 66 | -webkit-transform: scaleX(0.993) scaleY(0.992); 67 | } 68 | 44% { 69 | -webkit-transform: scaleX(1.026); 70 | } 71 | 46% { 72 | -webkit-transform: scaleX(1.042); 73 | } 74 | 48% { 75 | -webkit-transform: scaleX(1.040) scaleY(0.997); 76 | } 77 | 50% { 78 | -webkit-transform: scaleX(1.026) scaleY(1.001); 79 | } 80 | 52% { 81 | -webkit-transform: scaleX(1.007) scaleY(1.003); 82 | } 83 | 54% { 84 | -webkit-transform: scaleX(0.991); 85 | } 86 | 56% { 87 | -webkit-transform: scaleX(0.983); 88 | } 89 | 60% { 90 | -webkit-transform: scaleX(0.987) scaleY(1.000); 91 | } 92 | 62% { 93 | -webkit-transform: scaleX(0.995); 94 | } 95 | 64% { 96 | -webkit-transform: scaleX(1.002) scaleY(0.998); 97 | } 98 | 66% { 99 | -webkit-transform: scaleX(1.007); 100 | } 101 | 70% { 102 | -webkit-transform: scaleY(1.000); 103 | } 104 | 72% { 105 | -webkit-transform: scaleX(1.003); 106 | } 107 | 74% { 108 | -webkit-transform: scaleX(1.000); 109 | } 110 | 76% { 111 | -webkit-transform: scaleX(0.997); 112 | } 113 | 84% { 114 | -webkit-transform: scaleX(1.000); 115 | } 116 | 88% { 117 | -webkit-transform: scaleX(1.002); 118 | } 119 | 96% { 120 | -webkit-transform: scaleX(1.000); 121 | } 122 | 100% { 123 | -webkit-transform: scaleX(1.000) scaleY(1.000); 124 | } 125 | } 126 | @keyframes rubberband { 127 | 0% { 128 | transform: scaleX(1.250) scaleY(0.750); 129 | } 130 | 2% { 131 | transform: scaleX(1.692) scaleY(0.748); 132 | } 133 | 4% { 134 | transform: scaleX(2.162) scaleY(0.808); 135 | } 136 | 6% { 137 | transform: scaleX(2.128) scaleY(0.912); 138 | } 139 | 8% { 140 | transform: scaleX(1.748) scaleY(1.016); 141 | } 142 | 10% { 143 | transform: scaleX(1.226) scaleY(1.087); 144 | } 145 | 12% { 146 | transform: scaleX(0.778) scaleY(1.111); 147 | } 148 | 14% { 149 | transform: scaleX(0.524) scaleY(1.093); 150 | } 151 | 16% { 152 | transform: scaleX(0.489) scaleY(1.050); 153 | } 154 | 18% { 155 | transform: scaleX(0.627) scaleY(1.003); 156 | } 157 | 20% { 158 | transform: scaleX(0.845) scaleY(0.968); 159 | } 160 | 22% { 161 | transform: scaleX(1.056) scaleY(0.952); 162 | } 163 | 24% { 164 | transform: scaleX(1.190) scaleY(0.957); 165 | } 166 | 26% { 167 | transform: scaleX(1.227) scaleY(0.973); 168 | } 169 | 28% { 170 | transform: scaleX(1.182) scaleY(0.994); 171 | } 172 | 30% { 173 | transform: scaleX(1.090) scaleY(1.011); 174 | } 175 | 32% { 176 | transform: scaleX(0.996) scaleY(1.020); 177 | } 178 | 34% { 179 | transform: scaleX(0.927); 180 | } 181 | 36% { 182 | transform: scaleX(0.901) scaleY(1.014); 183 | } 184 | 38% { 185 | transform: scaleX(0.913) scaleY(1.005); 186 | } 187 | 40% { 188 | transform: scaleX(0.950) scaleY(0.997); 189 | } 190 | 42% { 191 | transform: scaleX(0.993) scaleY(0.992); 192 | } 193 | 44% { 194 | transform: scaleX(1.026); 195 | } 196 | 46% { 197 | transform: scaleX(1.042); 198 | } 199 | 48% { 200 | transform: scaleX(1.040) scaleY(0.997); 201 | } 202 | 50% { 203 | transform: scaleX(1.026) scaleY(1.001); 204 | } 205 | 52% { 206 | transform: scaleX(1.007) scaleY(1.003); 207 | } 208 | 54% { 209 | transform: scaleX(0.991); 210 | } 211 | 56% { 212 | transform: scaleX(0.983); 213 | } 214 | 60% { 215 | transform: scaleX(0.987) scaleY(1.000); 216 | } 217 | 62% { 218 | transform: scaleX(0.995); 219 | } 220 | 64% { 221 | transform: scaleX(1.002) scaleY(0.998); 222 | } 223 | 66% { 224 | transform: scaleX(1.007); 225 | } 226 | 70% { 227 | transform: scaleY(1.000); 228 | } 229 | 72% { 230 | transform: scaleX(1.003); 231 | } 232 | 74% { 233 | transform: scaleX(1.000); 234 | } 235 | 76% { 236 | transform: scaleX(0.997); 237 | } 238 | 84% { 239 | transform: scaleX(1.000); 240 | } 241 | 88% { 242 | transform: scaleX(1.002); 243 | } 244 | 96% { 245 | transform: scaleX(1.000); 246 | } 247 | 100% { 248 | transform: scaleX(1.000) scaleY(1.000); 249 | } 250 | } 251 | 252 | // Generated by easegen 253 | // Recommended Length: 1.6666999999999983 254 | .rubberband { 255 | -webkit-animation: rubberband 1.667s linear 0s 1 normal both; 256 | -webkit-transform-origin: 50% 50%; 257 | animation: rubberband 1.667s linear 0s 1 normal both; 258 | transform-origin: 50% 50%; 259 | } 260 | -------------------------------------------------------------------------------- /dist/_slideInLeft.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes slideInLeft { 2 | 0% { 3 | -webkit-transform: translateX(-300.000px) skewX(45.000deg); 4 | opacity: 0.000; 5 | } 6 | 4% { 7 | -webkit-transform: translateX(-130.348px) skewX(26.202deg); 8 | opacity: 0.660; 9 | } 10 | 8% { 11 | -webkit-transform: translateX(-22.718px) skewX(-4.518deg); 12 | opacity: 1.000; 13 | } 14 | 12% { 15 | -webkit-transform: translateX(-2.478px) skewX(-13.049deg); 16 | } 17 | 16% { 18 | -webkit-transform: translateX(-0.110px) skewX(-5.011deg); 19 | } 20 | 20% { 21 | -webkit-transform: skewX(2.728deg); 22 | } 23 | 24% { 24 | -webkit-transform: skewX(3.465deg); 25 | } 26 | 28% { 27 | -webkit-transform: skewX(1.049deg); 28 | } 29 | 32% { 30 | -webkit-transform: skewX(-0.956deg); 31 | } 32 | 40% { 33 | -webkit-transform: skewX(-0.094deg); 34 | } 35 | 44% { 36 | -webkit-transform: skewX(0.330deg); 37 | } 38 | 48% { 39 | -webkit-transform: skewX(0.211deg); 40 | } 41 | 52% { 42 | -webkit-transform: skewX(-0.025deg); 43 | } 44 | 100% { 45 | -webkit-transform: translateX(0.000px) skewX(0.000deg); 46 | opacity: 1.000; 47 | } 48 | } 49 | @keyframes slideInLeft { 50 | 0% { 51 | transform: translateX(-300.000px) skewX(45.000deg); 52 | opacity: 0.000; 53 | } 54 | 4% { 55 | transform: translateX(-130.348px) skewX(26.202deg); 56 | opacity: 0.660; 57 | } 58 | 8% { 59 | transform: translateX(-22.718px) skewX(-4.518deg); 60 | opacity: 1.000; 61 | } 62 | 12% { 63 | transform: translateX(-2.478px) skewX(-13.049deg); 64 | } 65 | 16% { 66 | transform: translateX(-0.110px) skewX(-5.011deg); 67 | } 68 | 20% { 69 | transform: skewX(2.728deg); 70 | } 71 | 24% { 72 | transform: skewX(3.465deg); 73 | } 74 | 28% { 75 | transform: skewX(1.049deg); 76 | } 77 | 32% { 78 | transform: skewX(-0.956deg); 79 | } 80 | 40% { 81 | transform: skewX(-0.094deg); 82 | } 83 | 44% { 84 | transform: skewX(0.330deg); 85 | } 86 | 48% { 87 | transform: skewX(0.211deg); 88 | } 89 | 52% { 90 | transform: skewX(-0.025deg); 91 | } 92 | 100% { 93 | transform: translateX(0.000px) skewX(0.000deg); 94 | opacity: 1.000; 95 | } 96 | } 97 | 98 | // Generated by easegen 99 | // Recommended Length: 3.3000659999999904 100 | .slideInLeft { 101 | -webkit-animation: slideInLeft 3.300s linear 0s 1 normal both; 102 | -webkit-transform-origin: 100% 100%; 103 | animation: slideInLeft 3.300s linear 0s 1 normal both; 104 | transform-origin: 100% 100%; 105 | } 106 | -------------------------------------------------------------------------------- /dist/_slideInRight.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes slideInRight { 2 | 0% { 3 | -webkit-transform: translateX(300.000px) skewX(-45.000deg); 4 | opacity: 0.000; 5 | } 6 | 4% { 7 | -webkit-transform: translateX(130.348px) skewX(-26.202deg); 8 | opacity: 0.660; 9 | } 10 | 8% { 11 | -webkit-transform: translateX(22.718px) skewX(4.518deg); 12 | opacity: 1.000; 13 | } 14 | 12% { 15 | -webkit-transform: translateX(2.478px) skewX(13.049deg); 16 | } 17 | 16% { 18 | -webkit-transform: translateX(0.110px) skewX(5.011deg); 19 | } 20 | 20% { 21 | -webkit-transform: skewX(-2.728deg); 22 | } 23 | 24% { 24 | -webkit-transform: skewX(-3.465deg); 25 | } 26 | 28% { 27 | -webkit-transform: skewX(-1.049deg); 28 | } 29 | 32% { 30 | -webkit-transform: skewX(0.956deg); 31 | } 32 | 40% { 33 | -webkit-transform: skewX(0.094deg); 34 | } 35 | 44% { 36 | -webkit-transform: skewX(-0.330deg); 37 | } 38 | 48% { 39 | -webkit-transform: skewX(-0.211deg); 40 | } 41 | 52% { 42 | -webkit-transform: skewX(0.025deg); 43 | } 44 | 100% { 45 | -webkit-transform: translateX(0.000px) skewX(0.000deg); 46 | opacity: 1.000; 47 | } 48 | } 49 | @keyframes slideInRight { 50 | 0% { 51 | transform: translateX(300.000px) skewX(-45.000deg); 52 | opacity: 0.000; 53 | } 54 | 4% { 55 | transform: translateX(130.348px) skewX(-26.202deg); 56 | opacity: 0.660; 57 | } 58 | 8% { 59 | transform: translateX(22.718px) skewX(4.518deg); 60 | opacity: 1.000; 61 | } 62 | 12% { 63 | transform: translateX(2.478px) skewX(13.049deg); 64 | } 65 | 16% { 66 | transform: translateX(0.110px) skewX(5.011deg); 67 | } 68 | 20% { 69 | transform: skewX(-2.728deg); 70 | } 71 | 24% { 72 | transform: skewX(-3.465deg); 73 | } 74 | 28% { 75 | transform: skewX(-1.049deg); 76 | } 77 | 32% { 78 | transform: skewX(0.956deg); 79 | } 80 | 40% { 81 | transform: skewX(0.094deg); 82 | } 83 | 44% { 84 | transform: skewX(-0.330deg); 85 | } 86 | 48% { 87 | transform: skewX(-0.211deg); 88 | } 89 | 52% { 90 | transform: skewX(0.025deg); 91 | } 92 | 100% { 93 | transform: translateX(0.000px) skewX(0.000deg); 94 | opacity: 1.000; 95 | } 96 | } 97 | 98 | // Generated by easegen 99 | // Recommended Length: 3.3000659999999904 100 | .slideInRight { 101 | -webkit-animation: slideInRight 3.300s linear 0s 1 normal both; 102 | -webkit-transform-origin: 0% 100%; 103 | animation: slideInRight 3.300s linear 0s 1 normal both; 104 | transform-origin: 0% 100%; 105 | } 106 | -------------------------------------------------------------------------------- /dist/_springScaleOut.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes springScaleOut { 2 | 0% { 3 | -webkit-transform: scaleX(1.000) scaleY(1.000); 4 | } 5 | 4% { 6 | -webkit-transform: scaleX(1.657) scaleY(1.657); 7 | } 8 | 8% { 9 | -webkit-transform: scaleX(1.709) scaleY(1.709); 10 | } 11 | 12% { 12 | -webkit-transform: scaleX(1.219) scaleY(1.219); 13 | } 14 | 16% { 15 | -webkit-transform: scaleX(0.624) scaleY(0.624); 16 | } 17 | 20% { 18 | -webkit-transform: scaleX(0.159) scaleY(0.159); 19 | } 20 | 24% { 21 | -webkit-transform: scaleX(-0.104) scaleY(-0.104); 22 | } 23 | 28% { 24 | -webkit-transform: scaleX(-0.195) scaleY(-0.195); 25 | } 26 | 32% { 27 | -webkit-transform: scaleX(-0.179) scaleY(-0.179); 28 | } 29 | 36% { 30 | -webkit-transform: scaleX(-0.117) scaleY(-0.117); 31 | } 32 | 40% { 33 | -webkit-transform: scaleX(-0.053) scaleY(-0.053); 34 | } 35 | 44% { 36 | -webkit-transform: scaleX(-0.008) scaleY(-0.008); 37 | } 38 | 48% { 39 | -webkit-transform: scaleX(0.016) scaleY(0.016); 40 | } 41 | 52% { 42 | -webkit-transform: scaleX(0.021) scaleY(0.021); 43 | } 44 | 60% { 45 | -webkit-transform: scaleX(0.014) scaleY(0.014); 46 | opacity: 0.000; 47 | } 48 | 64% { 49 | -webkit-transform: scaleX(0.006) scaleY(0.006); 50 | } 51 | 68% { 52 | -webkit-transform: scaleX(0.001) scaleY(0.001); 53 | } 54 | 72% { 55 | -webkit-transform: scaleX(-0.002) scaleY(-0.002); 56 | } 57 | 92% { 58 | -webkit-transform: scaleX(-0.000) scaleY(-0.000); 59 | } 60 | 100% { 61 | -webkit-transform: scaleX(0.000) scaleY(0.000); 62 | opacity: 0.000; 63 | } 64 | } 65 | @keyframes springScaleOut { 66 | 0% { 67 | transform: scaleX(1.000) scaleY(1.000); 68 | } 69 | 4% { 70 | transform: scaleX(1.657) scaleY(1.657); 71 | } 72 | 8% { 73 | transform: scaleX(1.709) scaleY(1.709); 74 | } 75 | 12% { 76 | transform: scaleX(1.219) scaleY(1.219); 77 | } 78 | 16% { 79 | transform: scaleX(0.624) scaleY(0.624); 80 | } 81 | 20% { 82 | transform: scaleX(0.159) scaleY(0.159); 83 | } 84 | 24% { 85 | transform: scaleX(-0.104) scaleY(-0.104); 86 | } 87 | 28% { 88 | transform: scaleX(-0.195) scaleY(-0.195); 89 | } 90 | 32% { 91 | transform: scaleX(-0.179) scaleY(-0.179); 92 | } 93 | 36% { 94 | transform: scaleX(-0.117) scaleY(-0.117); 95 | } 96 | 40% { 97 | transform: scaleX(-0.053) scaleY(-0.053); 98 | } 99 | 44% { 100 | transform: scaleX(-0.008) scaleY(-0.008); 101 | } 102 | 48% { 103 | transform: scaleX(0.016) scaleY(0.016); 104 | } 105 | 52% { 106 | transform: scaleX(0.021) scaleY(0.021); 107 | } 108 | 60% { 109 | transform: scaleX(0.014) scaleY(0.014); 110 | opacity: 0.000; 111 | } 112 | 64% { 113 | transform: scaleX(0.006) scaleY(0.006); 114 | } 115 | 68% { 116 | transform: scaleX(0.001) scaleY(0.001); 117 | } 118 | 72% { 119 | transform: scaleX(-0.002) scaleY(-0.002); 120 | } 121 | 92% { 122 | transform: scaleX(-0.000) scaleY(-0.000); 123 | } 124 | 100% { 125 | transform: scaleX(0.000) scaleY(0.000); 126 | opacity: 0.000; 127 | } 128 | } 129 | 130 | // Generated by easegen 131 | // Recommended Length: 1.2333580000000004 132 | .springScaleOut { 133 | -webkit-animation: springScaleOut 1.233s linear 0s 1 normal both; 134 | -webkit-transform-origin: 50% 50%; 135 | animation: springScaleOut 1.233s linear 0s 1 normal both; 136 | transform-origin: 50% 50%; 137 | } 138 | -------------------------------------------------------------------------------- /dist/_twirlIn.scss: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes twirlIn { 2 | 0% { 3 | -webkit-transform: rotateZ(180.000deg) scaleX(0.100) scaleY(0.100); 4 | opacity: 0.000; 5 | } 6 | 2% { 7 | -webkit-transform: rotateZ(138.190deg) scaleX(0.682) scaleY(0.682); 8 | opacity: 0.248; 9 | } 10 | 4% { 11 | -webkit-transform: rotateZ(-24.958deg) scaleX(1.369) scaleY(1.369); 12 | opacity: 0.496; 13 | } 14 | 6% { 15 | -webkit-transform: rotateZ(-90.306deg) scaleX(1.360) scaleY(1.360); 16 | opacity: 0.743; 17 | } 18 | 8% { 19 | -webkit-transform: rotateZ(-42.944deg) scaleX(1.022) scaleY(1.022); 20 | opacity: 0.991; 21 | } 22 | 10% { 23 | -webkit-transform: rotateZ(21.971deg) scaleX(0.858) scaleY(0.858); 24 | } 25 | 12% { 26 | -webkit-transform: rotateZ(43.805deg) scaleX(0.898) scaleY(0.898); 27 | } 28 | 14% { 29 | -webkit-transform: rotateZ(15.491deg) scaleX(1.000) scaleY(1.000); 30 | } 31 | 16% { 32 | -webkit-transform: rotateZ(-19.543deg) scaleX(1.056) scaleY(1.056); 33 | } 34 | 18% { 35 | -webkit-transform: rotateZ(-20.575deg) scaleX(1.034) scaleY(1.034); 36 | } 37 | 20% { 38 | -webkit-transform: rotateZ(-0.334deg) scaleX(0.990) scaleY(0.990); 39 | } 40 | 22% { 41 | -webkit-transform: rotateZ(10.912deg) scaleX(0.979) scaleY(0.979); 42 | } 43 | 24% { 44 | -webkit-transform: rotateZ(7.453deg) scaleX(0.993) scaleY(0.993); 45 | } 46 | 26% { 47 | -webkit-transform: rotateZ(-1.248deg) scaleX(1.004) scaleY(1.004); 48 | } 49 | 28% { 50 | -webkit-transform: rotateZ(-5.813deg) scaleX(1.007) scaleY(1.007); 51 | } 52 | 30% { 53 | -webkit-transform: rotateZ(-3.002deg) scaleX(1.002) scaleY(1.002); 54 | } 55 | 32% { 56 | -webkit-transform: rotateZ(1.256deg) scaleX(0.998) scaleY(0.998); 57 | } 58 | 34% { 59 | -webkit-transform: rotateZ(2.884deg); 60 | } 61 | 36% { 62 | -webkit-transform: rotateZ(1.121deg); 63 | } 64 | 38% { 65 | -webkit-transform: rotateZ(-1.229deg) scaleX(1.001) scaleY(1.001); 66 | } 67 | 40% { 68 | -webkit-transform: rotateZ(-1.367deg); 69 | } 70 | 42% { 71 | -webkit-transform: rotateZ(-0.066deg); 72 | } 73 | 44% { 74 | -webkit-transform: rotateZ(0.694deg); 75 | } 76 | 46% { 77 | -webkit-transform: rotateZ(0.504deg); 78 | } 79 | 48% { 80 | -webkit-transform: rotateZ(-0.060deg); 81 | } 82 | 50% { 83 | -webkit-transform: rotateZ(-0.375deg); 84 | } 85 | 52% { 86 | -webkit-transform: rotateZ(-0.207deg); 87 | } 88 | 54% { 89 | -webkit-transform: rotateZ(0.075deg); 90 | } 91 | 56% { 92 | -webkit-transform: rotateZ(0.189deg); 93 | } 94 | 58% { 95 | -webkit-transform: rotateZ(0.077deg); 96 | } 97 | 60% { 98 | -webkit-transform: rotateZ(-0.077deg); 99 | } 100 | 66% { 101 | -webkit-transform: rotateZ(0.045deg); 102 | } 103 | 100% { 104 | -webkit-transform: rotateZ(0.000deg) scaleX(1.000) scaleY(1.000); 105 | opacity: 1.000; 106 | } 107 | } 108 | @keyframes twirlIn { 109 | 0% { 110 | transform: rotateZ(180.000deg) scaleX(0.100) scaleY(0.100); 111 | opacity: 0.000; 112 | } 113 | 2% { 114 | transform: rotateZ(138.190deg) scaleX(0.682) scaleY(0.682); 115 | opacity: 0.248; 116 | } 117 | 4% { 118 | transform: rotateZ(-24.958deg) scaleX(1.369) scaleY(1.369); 119 | opacity: 0.496; 120 | } 121 | 6% { 122 | transform: rotateZ(-90.306deg) scaleX(1.360) scaleY(1.360); 123 | opacity: 0.743; 124 | } 125 | 8% { 126 | transform: rotateZ(-42.944deg) scaleX(1.022) scaleY(1.022); 127 | opacity: 0.991; 128 | } 129 | 10% { 130 | transform: rotateZ(21.971deg) scaleX(0.858) scaleY(0.858); 131 | } 132 | 12% { 133 | transform: rotateZ(43.805deg) scaleX(0.898) scaleY(0.898); 134 | } 135 | 14% { 136 | transform: rotateZ(15.491deg) scaleX(1.000) scaleY(1.000); 137 | } 138 | 16% { 139 | transform: rotateZ(-19.543deg) scaleX(1.056) scaleY(1.056); 140 | } 141 | 18% { 142 | transform: rotateZ(-20.575deg) scaleX(1.034) scaleY(1.034); 143 | } 144 | 20% { 145 | transform: rotateZ(-0.334deg) scaleX(0.990) scaleY(0.990); 146 | } 147 | 22% { 148 | transform: rotateZ(10.912deg) scaleX(0.979) scaleY(0.979); 149 | } 150 | 24% { 151 | transform: rotateZ(7.453deg) scaleX(0.993) scaleY(0.993); 152 | } 153 | 26% { 154 | transform: rotateZ(-1.248deg) scaleX(1.004) scaleY(1.004); 155 | } 156 | 28% { 157 | transform: rotateZ(-5.813deg) scaleX(1.007) scaleY(1.007); 158 | } 159 | 30% { 160 | transform: rotateZ(-3.002deg) scaleX(1.002) scaleY(1.002); 161 | } 162 | 32% { 163 | transform: rotateZ(1.256deg) scaleX(0.998) scaleY(0.998); 164 | } 165 | 34% { 166 | transform: rotateZ(2.884deg); 167 | } 168 | 36% { 169 | transform: rotateZ(1.121deg); 170 | } 171 | 38% { 172 | transform: rotateZ(-1.229deg) scaleX(1.001) scaleY(1.001); 173 | } 174 | 40% { 175 | transform: rotateZ(-1.367deg); 176 | } 177 | 42% { 178 | transform: rotateZ(-0.066deg); 179 | } 180 | 44% { 181 | transform: rotateZ(0.694deg); 182 | } 183 | 46% { 184 | transform: rotateZ(0.504deg); 185 | } 186 | 48% { 187 | transform: rotateZ(-0.060deg); 188 | } 189 | 50% { 190 | transform: rotateZ(-0.375deg); 191 | } 192 | 52% { 193 | transform: rotateZ(-0.207deg); 194 | } 195 | 54% { 196 | transform: rotateZ(0.075deg); 197 | } 198 | 56% { 199 | transform: rotateZ(0.189deg); 200 | } 201 | 58% { 202 | transform: rotateZ(0.077deg); 203 | } 204 | 60% { 205 | transform: rotateZ(-0.077deg); 206 | } 207 | 66% { 208 | transform: rotateZ(0.045deg); 209 | } 210 | 100% { 211 | transform: rotateZ(0.000deg) scaleX(1.000) scaleY(1.000); 212 | opacity: 1.000; 213 | } 214 | } 215 | 216 | // Generated by easegen 217 | // Recommended Length: 3.7167409999999883 218 | .twirlIn { 219 | -webkit-animation: twirlIn 3.717s linear 0s 1 normal both; 220 | -webkit-transform-origin: 50% 50%; 221 | animation: twirlIn 3.717s linear 0s 1 normal both; 222 | transform-origin: 50% 50%; 223 | } 224 | -------------------------------------------------------------------------------- /dist/reboundgen.scss: -------------------------------------------------------------------------------- 1 | // ReboundGen 2 | 3 | @import "animations"; -------------------------------------------------------------------------------- /examples/index.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ReboundGen 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 53 | 56 | 57 | 58 |
59 |
60 |
61 |

ReboundGen

62 |

Editable CSS3 animations calculated using Science

63 |

64 | ReboundGen calculates springy CSS3 Keyframe animations based on a few simple parameters you define. It uses Facebook's Rebound.js for the math and outputs SCSS style sheets for each animation. So, you can import just the ones you need. A variety of nice animations can be accomplished using a small set of parameters. 65 |

66 | 67 |

68 | Smooth animations, just a class away. 69 |

70 | 71 |

72 | Use any of the provided animations, or build your own by modifying the data/data.json file. 73 |

74 | 75 |

76 | Check it out on github 77 |

78 | 79 |

80 | For Documentation, see here. 81 |

82 |
83 |
84 |

85 | 86 |

87 |

Examples:

88 | {{#each animations}} 89 |
90 | .{{name}} 91 |
92 |
93 | {{/each}} 94 |
95 | 96 |

97 | 98 |
99 | 100 | 101 | 102 | 103 | 111 | 112 | 128 | 129 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ReboundGen 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 53 | 56 | 57 | 58 |
59 |
60 |
61 |

ReboundGen

62 |

Editable CSS3 animations calculated using Science

63 |

64 | ReboundGen calculates springy CSS3 Keyframe animations based on a few simple parameters you define. It uses Facebook's Rebound.js for the math and outputs SCSS style sheets for each animation. So, you can import just the ones you need. A variety of nice animations can be accomplished using a small set of parameters. 65 |

66 | 67 |

68 | Smooth animations, just a class away. 69 |

70 | 71 |

72 | Use any of the provided animations, or build your own by modifying the data/data.json file. 73 |

74 | 75 |

76 | Check it out on github 77 |

78 | 79 |

80 | For Documentation, see here. 81 |

82 |
83 |
84 |

85 | 86 |

87 |

Examples:

88 |
89 | .bounceInRight 90 |
91 |
92 |
93 | .bounceInLeft 94 |
95 |
96 |
97 | .bounceInDown 98 |
99 |
100 |
101 | .bounceInDrop 102 |
103 |
104 |
105 | .glideInRight 106 |
107 |
108 |
109 | .glideInLeft 110 |
111 |
112 |
113 | .glideInUp 114 |
115 |
116 |
117 | .glideInDown 118 |
119 |
120 |
121 | .bounceInScale 122 |
123 |
124 |
125 | .bounceInScale2 126 |
127 |
128 |
129 | .springScaleOut 130 |
131 |
132 |
133 | .hoverJiggle 134 |
135 |
136 |
137 | .hoverJiggle2 138 |
139 |
140 |
141 | .twirlIn 142 |
143 |
144 |
145 | .rubberband 146 |
147 |
148 |
149 | .jellyfall 150 |
151 |
152 |
153 | .jellyfall2 154 |
155 |
156 |
157 | .slideInRight 158 |
159 |
160 |
161 | .slideInLeft 162 |
163 |
164 |
165 | .flipInLeft 166 |
167 |
168 |
169 | .flipInRight 170 |
171 |
172 |
173 | .flipInBottom 174 |
175 |
176 |
177 | .flipInTop 178 |
179 |
180 |
181 | .kitchenSink 182 |
183 |
184 |
185 | .flyInBottom 186 |
187 |
188 |
189 | .flyInLeft 190 |
191 |
192 |
193 | .flyInRight 194 |
195 |
196 |
197 | 198 |

199 | 200 |
201 | 202 | 203 | 204 | 205 | 213 | 214 | 230 | 231 | -------------------------------------------------------------------------------- /examples/styles.scss: -------------------------------------------------------------------------------- 1 | // Include main animations file 2 | @import "../dist/animations"; 3 | 4 | 5 | $base-border-radius: 5px; 6 | $base-font-color: #000000; 7 | 8 | article.type-system-sans { 9 | $sans-serif: 'PT Sans', sans-serif; 10 | $sans-serif-2: 'Titillium Web', sans-serif; 11 | 12 | text-align: left; 13 | 14 | .type { 15 | border-bottom: 1px solid; 16 | display: inline-block; 17 | font-family: $sans-serif-2; 18 | font-size: .7em; 19 | font-weight: 900; 20 | letter-spacing: 1px; 21 | margin-bottom: 2em; 22 | padding: .1em 0; 23 | text-align: left; 24 | text-transform: uppercase; 25 | } 26 | 27 | h1 { 28 | font-family: $sans-serif-2; 29 | font-size: 2em; 30 | font-weight: 600; 31 | margin-bottom: .6em; 32 | 33 | 34 | } 35 | 36 | .hero h1 { 37 | font-family: $sans-serif-2; 38 | font-size: 4em; 39 | font-weight: 600; 40 | margin-bottom: .4em; 41 | margin-top: .4em; 42 | 43 | } 44 | 45 | h2 { 46 | font-family: $sans-serif; 47 | font-size: 1.2em; 48 | font-weight: 400; 49 | line-height: 1.4em; 50 | margin-bottom: 1.2em; 51 | 52 | 53 | } 54 | 55 | code { 56 | white-space: nowrap; 57 | font-family: monaco; 58 | background: #F7F7F7; 59 | border: 1px solid #E0E0E0; 60 | border-radius: $base-border-radius * 1.5; 61 | padding: .1em .4em; 62 | font-size: .65em; 63 | font-style: normal; 64 | } 65 | 66 | h3 { 67 | font-family: $sans-serif-2; 68 | font-size: 1em; 69 | font-weight: 700; 70 | text-transform: uppercase; 71 | line-height: 1.4em; 72 | margin-bottom: .5em; 73 | } 74 | 75 | p.date { 76 | color: transparentize($base-font-color, .6); 77 | font-family: $sans-serif; 78 | font-size: .8em; 79 | margin-bottom: .5em; 80 | } 81 | 82 | p { 83 | font-family: $sans-serif; 84 | font-weight: 300; 85 | letter-spacing: 1; 86 | margin-bottom: 1.5em; 87 | 88 | span { 89 | font-family: $sans-serif; 90 | font-weight: 600; 91 | font-size: .8em; 92 | text-transform: uppercase; 93 | } 94 | } 95 | 96 | hr { 97 | width: 3em; 98 | } 99 | 100 | a.read-more { 101 | display: inline-block; 102 | font-family: $sans-serif; 103 | font-weight: 700; 104 | font-size: .8em; 105 | text-transform: uppercase; 106 | margin-left: .2em; 107 | position: relative; 108 | 109 | span { 110 | position: absolute; 111 | font-size: 1.7em; 112 | top: -2px; 113 | right: -10px; 114 | } 115 | } 116 | 117 | p.author { 118 | font-family: $sans-serif; 119 | font-style: italic; 120 | } 121 | } 122 | 123 | .staggered { 124 | :nth-child(2) { 125 | animation-delay: 0.5s; 126 | -webkit-animation-delay: 0.5s; 127 | -ms-animation-delay: 0.5s; 128 | -o-animation-delay: 0.5s; 129 | -moz-animation-delay: 0.5s; 130 | } 131 | :nth-child(3) { 132 | animation-delay: 1s; 133 | -webkit-animation-delay: 1s; 134 | -ms-animation-delay: 1s; 135 | -o-animation-delay: 1s; 136 | -moz-animation-delay: 1s; 137 | } 138 | :nth-child(3) { 139 | animation-delay: 1.5s; 140 | -webkit-animation-delay: 1.5s; 141 | -ms-animation-delay: 1.5s; 142 | -o-animation-delay: 1.5s; 143 | -moz-animation-delay: 1.5s; 144 | } 145 | :nth-child(4) { 146 | animation-delay: 2.0s; 147 | -webkit-animation-delay: 2.0s; 148 | -ms-animation-delay: 2.0s; 149 | -o-animation-delay: 2.0s; 150 | -moz-animation-delay: 2.0s; 151 | } 152 | :nth-child(5) { 153 | animation-delay: 2.5s; 154 | -webkit-animation-delay: 2.5s; 155 | -ms-animation-delay: 2.5s; 156 | -o-animation-delay: 2.5s; 157 | -moz-animation-delay: 2.5s; 158 | } 159 | :nth-child(6) { 160 | animation-delay: 3.0s; 161 | -webkit-animation-delay: 3.0s; 162 | -ms-animation-delay: 3.0s; 163 | -o-animation-delay: 3.0s; 164 | -moz-animation-delay: 3.0s; 165 | } 166 | :nth-child(7) { 167 | animation-delay: 3.5s; 168 | -webkit-animation-delay: 3.5s; 169 | -ms-animation-delay: 3.5s; 170 | -o-animation-delay: 3.5s; 171 | -moz-animation-delay: 3.5s; 172 | } 173 | } 174 | 175 | 176 | div.hero-container { 177 | background-color: #eeeeee; 178 | padding-top: 10px; 179 | padding-bottom: 10px; 180 | margin-bottom: 10px; 181 | } 182 | 183 | div.hero { 184 | min-width: 320px; 185 | max-width: 600px; 186 | margin-left: auto; 187 | margin-right: auto; 188 | padding-left: 10px; 189 | padding-right: 10px; 190 | } 191 | 192 | div.animations-container { 193 | margin-left: 20px; 194 | margin-right: 20px; 195 | 196 | margin-left: auto; 197 | margin-right: auto; 198 | max-width: 860px; 199 | } 200 | 201 | div.instructions-container { 202 | margin-left: 20px; 203 | margin-right: 20px; 204 | 205 | margin-left: auto; 206 | margin-right: auto; 207 | margin-top: 50px; 208 | max-width: 860px; 209 | } 210 | 211 | 212 | div.example-container { 213 | position: relative; 214 | float: left; 215 | width: 31.5%; 216 | -webkit-perspective: 100px; 217 | -ms-perspective: 100px; 218 | -moz-perspective: 100px; 219 | -o-perspective: 100px; 220 | perspective: 100px; 221 | border: 1px solid #cccccc; 222 | margin-right: 10px; 223 | margin-bottom: 10px; 224 | padding-bottom: 30px; 225 | } 226 | 227 | div.animation-example { 228 | margin-left: auto; 229 | width: 60px; 230 | height: 50px; 231 | margin-right: auto; 232 | margin-top: 20px; 233 | border-radius: 10px; 234 | } 235 | 236 | div.animations-container div.example-container:nth-child(5n+0) 237 | { 238 | div.animation-example 239 | { 240 | background-color: #1abc9c; 241 | } 242 | } 243 | div.animations-container div.example-container:nth-child(5n+1) 244 | { 245 | div.animation-example 246 | { 247 | background-color: #2980b9; 248 | } 249 | } 250 | div.animations-container div.example-container:nth-child(5n+2) 251 | { 252 | div.animation-example 253 | { 254 | background-color: #e74c3c; 255 | } 256 | } 257 | div.animations-container div.example-container:nth-child(5n+3) 258 | { 259 | div.animation-example 260 | { 261 | background-color: #e67e22; 262 | } 263 | } 264 | div.animations-container div.example-container:nth-child(5n+4) 265 | { 266 | div.animation-example 267 | { 268 | background-color: #27ae60; 269 | } 270 | } 271 | div.animations-container div.example-container:nth-child(5n+5) 272 | { 273 | div.animation-example 274 | { 275 | background-color: #8e44ad; 276 | } 277 | } 278 | 279 | 280 | 281 | -------------------------------------------------------------------------------- /helpers.js: -------------------------------------------------------------------------------- 1 | module.exports["debug"] = function(context, option) { 2 | console.log("Current Context"); 3 | console.log("===================="); 4 | console.log(context); 5 | 6 | 7 | if (optionalValue) { 8 | console.log("Value"); 9 | console.log("===================="); 10 | console.log(option); 11 | } 12 | 13 | return "ARRCHGH"; 14 | } -------------------------------------------------------------------------------- /lib/reboundgen.js: -------------------------------------------------------------------------------- 1 | /* 2 | * reboundgen 3 | * https://github.com/dwallin/reboundgen 4 | * 5 | * Copyright (c) 2014 Dave Wallin 6 | * Licensed under the BSD license. 7 | */ 8 | 9 | 'use strict'; 10 | 11 | // Data. 12 | var vendorPrefixes = [ "-webkit-", ""]; 13 | 14 | var propertyInfo = { 15 | opacity: { units: "", threshold: 0.01 }, 16 | left: { units: "px", threshold: 0.1 }, 17 | right: { units: "px", threshold: 0.1 }, 18 | top: { units: "px", threshold: 0.1 }, 19 | bottom: { units: "px", threshold: 0.1 }, 20 | translateX: { units: "px", transform: true, threshold: 0.25 }, 21 | translateY: { units: "px", transform: true, threshold: 0.25 }, 22 | translateZ: { units: "px", transform: true, threshold: 0.25 }, 23 | scaleX: { units: "", transform: true, threshold: 0.0015 }, 24 | scaleY: { units: "", transform: true, threshold: 0.0015 }, 25 | scaleZ: { units: "", transform: true, threshold: 0.0015 }, 26 | rotate: { units: "deg", transform: true, threshold: 0.1 }, 27 | rotateX: { units: "deg", transform: true, threshold: 0.1 }, 28 | rotateY: { units: "deg", transform: true, threshold: 0.1 }, 29 | rotateZ: { units: "deg", transform: true, threshold: 0.1 }, 30 | skewX: { units: "deg", transform: true, threshold: 0.1 }, 31 | skewY: { units: "deg", transform: true, threshold: 0.1 } 32 | }; 33 | 34 | function extend(target) { 35 | var sources = [].slice.call(arguments, 1); 36 | sources.forEach(function (source) { 37 | for (var prop in source) { 38 | target[prop] = source[prop]; 39 | } 40 | }); 41 | return target; 42 | } 43 | 44 | exports.generateFromFile = function(filename) { 45 | if(typeof(filename) !== "string") 46 | { 47 | return false; 48 | } 49 | 50 | console.log("Reading " + filename); 51 | var jf = require('jsonfile'); 52 | 53 | var optionsFile = jf.readFileSync(filename); 54 | exports.generate(optionsFile); 55 | 56 | return true; 57 | }; 58 | 59 | exports.generateSingle = function(options) { 60 | var rebound = require("./rebound"); 61 | 62 | // Only transform properties are supported here. 63 | // And then only translateX-Z, scaleX-Z, rotateX-Z, rotate, skewX, skewY 64 | // FIXME: add support for left, top, bottom, right, opacity. 65 | 66 | var defaultOptions = { 67 | name: "anim1", 68 | steps: 50, 69 | tension: 30, 70 | friction: 5, 71 | initialVelocity: 0, 72 | hardBounce: false, 73 | bounceDamp: 0.7, 74 | originX: 0.5, 75 | originY: 0.5, 76 | perspective: 1000, 77 | properties: { 78 | translateX: 500, 79 | }, 80 | outputFolder: "tmp/" 81 | }; 82 | 83 | options = extend( {}, defaultOptions, options); 84 | 85 | var results = { }; 86 | var properties = options.properties; 87 | 88 | var longestSpring = 0; 89 | var k; 90 | 91 | for (k in properties) { 92 | // create and run springs for each property 93 | 94 | 95 | var localOptions; 96 | localOptions = extend( { start: 0, end: 0 }, options); 97 | 98 | if (typeof(properties[k]) === "object") { 99 | localOptions = extend( localOptions, properties[k]); 100 | } else if (typeof(properties[k]) === "number") { 101 | localOptions.end = properties[k]; 102 | } 103 | 104 | if(localOptions.bounceDamp > 0.99) 105 | { 106 | localOptions.bounceDamp = 0.99; 107 | } 108 | 109 | if(localOptions.bounceDamp < 0.0) 110 | { 111 | localOptions.bounceDamp = 0.0; 112 | } 113 | 114 | var looper = new rebound.SimulationLooper(); 115 | var springSystem = new rebound.SpringSystem(looper); 116 | var spring = springSystem.createSpring(localOptions.tension, localOptions.friction); 117 | spring.localOptions = localOptions; 118 | 119 | var springValues = []; 120 | 121 | spring.addListener({ 122 | onBeforeIntegrate: function(spring) { 123 | 124 | }, 125 | onSpringUpdate: function(spring) { 126 | var val = spring.getCurrentValue(); 127 | if (spring.localOptions.hardBounce && !spring.isAtRest()) { 128 | if ((spring.localOptions.start < spring.localOptions.end && spring.getCurrentValue() > spring._endValue) || 129 | (spring.localOptions.start > spring.localOptions.end && spring.getCurrentValue() < spring._endValue)) 130 | { 131 | var bounceVel; 132 | bounceVel = -options.bounceDamp * spring.getVelocity(); 133 | //spring.setCurrentValue(spring._endValue, true); 134 | //spring.setVelocity(bounceVel); 135 | // spring._startValue = spring._endValue+ bounceVel; 136 | spring._currentState.position = spring._endValue; 137 | spring._currentState.velocity = bounceVel; 138 | val = spring._endValue; 139 | } 140 | } 141 | 142 | springValues.push(val); 143 | } 144 | }); 145 | 146 | spring.setValueAndVelocity(localOptions.start, localOptions.initialVelocity); 147 | spring.setEndValue(localOptions.end); 148 | 149 | looper.run(); 150 | 151 | 152 | if (looper.simTime > longestSpring) { 153 | longestSpring = looper.simTime; 154 | } 155 | 156 | var resultObj = { 157 | length: looper.simTime, 158 | timestep: looper.timestep, 159 | values: springValues 160 | }; 161 | 162 | results[k] = resultObj; 163 | } 164 | 165 | var keyframes = {}; 166 | var lastKeyframe = { }; 167 | 168 | for (var i = 0; i <= 100; i += (100 / options.steps)) { 169 | var keyframe = {}; 170 | var currentTime = i * longestSpring / 100; 171 | 172 | for (k in properties) { 173 | var val; 174 | var startVal = 0; 175 | var endVal = 0; 176 | var ndx = Math.round(currentTime / results[k].timestep); 177 | if (typeof(properties[k]) === "object") { 178 | if (typeof(properties[k].start) === "number") 179 | { 180 | startVal = properties[k].start; 181 | } 182 | 183 | if (typeof(properties[k].end) === "number") 184 | { 185 | endVal = properties[k].end; 186 | } 187 | 188 | } else if (typeof(properties[k]) === "number") { 189 | endVal = properties[k]; 190 | } 191 | 192 | if (ndx < results[k].values.length) { 193 | var springVal; 194 | springVal = results[k].values[ndx]; 195 | //val = rebound.MathUtil 196 | // .mapValueInRange(springVal, 0, 1, startVal, endVal); 197 | val = springVal; 198 | } else { 199 | val = endVal; 200 | } 201 | 202 | // 'compression'.. Don't bother doing a keyframe if value hasn't changed much. 203 | if(i == 100 || typeof lastKeyframe[k] !== "number" || 204 | Math.abs(lastKeyframe[k] - val) > propertyInfo[k].threshold ) 205 | { 206 | keyframe[k] = val; 207 | } 208 | } 209 | 210 | if(typeof options.fadeIn == "number") 211 | { 212 | var opacityVal = 0; 213 | k = "opacity"; 214 | 215 | if(currentTime < options.fadeIn) 216 | { 217 | opacityVal = currentTime / options.fadeIn; 218 | } else { 219 | opacityVal = 1.0; 220 | } 221 | 222 | if(i == 100 || typeof lastKeyframe[k] !== "number" || 223 | Math.abs(lastKeyframe[k] - opacityVal) > propertyInfo[k].threshold ) 224 | { 225 | keyframe[k] = opacityVal; 226 | } 227 | } 228 | 229 | if(typeof options.fadeOut == "number") 230 | { 231 | var opacityVal = 0; 232 | k = "opacity"; 233 | 234 | 235 | if(currentTime > longestSpring - options.fadeOut) 236 | { 237 | opacityVal = 1.0 - (currentTime - (longestSpring - options.fadeOut) / options.fadeOut); 238 | 239 | if(opacityVal < 0.0 ) 240 | opacityVal = 0.0; 241 | 242 | if(i == 100 || typeof lastKeyframe[k] !== "number" || 243 | Math.abs(lastKeyframe[k] - opacityVal) > propertyInfo[k].threshold ) 244 | { 245 | keyframe[k] = opacityVal; 246 | } 247 | } 248 | } 249 | 250 | keyframes[i.toFixed(0)] = keyframe; 251 | 252 | // keep track of current state. 253 | lastKeyframe = extend(lastKeyframe, keyframe); 254 | 255 | } 256 | 257 | // Template it out. 258 | 259 | var output = ""; 260 | var p; 261 | 262 | // Render all the keyframes down to text for our stylesheet 263 | for (p in vendorPrefixes) { 264 | var prefix = vendorPrefixes[p]; 265 | output += "@" + prefix + "keyframes " + options.name + " {\n"; 266 | 267 | for (k in keyframes) { 268 | var keyframeOutput = ""; 269 | var keyframe = keyframes[k]; 270 | var prop; 271 | keyframeOutput += k + "% {\n"; 272 | 273 | var transformOutput = ""; 274 | var numTransforms = 0; 275 | // Do all transform based properties. 276 | transformOutput += " " + prefix + "transform:"; 277 | for (prop in keyframe) { 278 | 279 | if(typeof propertyInfo[prop] === "object") 280 | { 281 | if(propertyInfo[prop].transform) 282 | { 283 | transformOutput += " " + prop + "(" + keyframe[prop].toFixed(3) + propertyInfo[prop].units + ")"; 284 | numTransforms += 1; 285 | } 286 | } else { 287 | console.log("ERROR, property " + prop + " not defined."); 288 | } 289 | } 290 | transformOutput += ";\n"; 291 | 292 | if(numTransforms > 0) 293 | { 294 | keyframeOutput += transformOutput; 295 | } 296 | 297 | // Do non-transform properties. 298 | var propOutput = "" 299 | var numProperties = 0; 300 | for (prop in keyframe) { 301 | if(typeof propertyInfo[prop] === "object") 302 | { 303 | if(!propertyInfo[prop].transform) 304 | { 305 | propOutput += " " + prop + ": " + keyframe[prop].toFixed(3) + propertyInfo[prop].units + ";\n"; 306 | numProperties += 1; 307 | } 308 | } else { 309 | console.log("ERROR, property " + prop + " not defined."); 310 | } 311 | } 312 | 313 | if(numProperties > 0) 314 | keyframeOutput += propOutput; 315 | 316 | // End keyframe 317 | keyframeOutput += "}\n"; 318 | 319 | if(numProperties > 0 || numTransforms > 0) 320 | { 321 | output += keyframeOutput; 322 | } 323 | } 324 | 325 | output += "}\n"; 326 | } 327 | 328 | output += "\n// Generated by easegen"; 329 | output += "\n// Recommended Length: " + (longestSpring / 1000) + "\n"; 330 | 331 | output += "." + options.name + " {\n "; 332 | 333 | for (p in vendorPrefixes) { 334 | var prefix = vendorPrefixes[p]; 335 | output += " " + prefix + "animation: " + options.name + " " + (longestSpring / 1000).toFixed(3) + "s linear 0s 1 normal both;\n"; 336 | output += " " + prefix + "transform-origin: " + (options.originX*100) + "% " + (options.originY*100) + "%;\n"; 337 | 338 | } 339 | 340 | output += "}\n"; 341 | 342 | //console.log(output); 343 | 344 | 345 | var fs = require('fs'); 346 | fs.writeFile(options.outputFolder + "_" + options.name + ".scss", output, function(err) { 347 | if (err) { 348 | throw err; 349 | } else { 350 | console.log("Generated " + options.name); 351 | } 352 | }); 353 | 354 | 355 | return true; 356 | }; 357 | 358 | 359 | exports.generate = function(options) { 360 | if (typeof options == "object" && Array.isArray(options.animations)) { 361 | var allList = ""; 362 | 363 | for (var i = 0; i < options.animations.length; i++) { 364 | options.animations[i].outputFolder = options.outputFolder; 365 | exports.generateSingle(options.animations[i]); 366 | 367 | allList += '@import "' + options.animations[i].name + '";\n' 368 | } 369 | 370 | // write master scss file. 371 | var fs = require('fs'); 372 | 373 | fs.writeFile(options.outputFolder + "_animations.scss", allList, function(err) { 374 | if (err) { 375 | throw err; 376 | } else { 377 | console.log("Generated _animations.scss"); 378 | } 379 | }); 380 | 381 | } else { 382 | exports.generateSingle(options); 383 | } 384 | 385 | return true; 386 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reboundgen", 3 | "description": "Keyframe animation generator that uses Rebound.js", 4 | "version": "0.0.1", 5 | "homepage": "https://github.com/dwallin/reboundgen", 6 | "author": { 7 | "name": "Dave Wallin", 8 | "email": "dwallin@archer-group.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/dwallin/reboundgen.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/dwallin/reboundgen/issues" 16 | }, 17 | "licenses": [ 18 | { 19 | "type": "BSD", 20 | "url": "https://github.com/dwallin/reboundgen/blob/master/LICENSE-BSD" 21 | } 22 | ], 23 | "main": "lib/reboundgen", 24 | "engines": { 25 | "node": ">= 0.8.0" 26 | }, 27 | "scripts": { 28 | "test": "grunt nodeunit" 29 | }, 30 | "devDependencies": { 31 | "grunt": "~0.4.5", 32 | "grunt-compile-handlebars": "^0.7.8", 33 | "grunt-contrib-cssmin": "^0.10.0", 34 | "grunt-contrib-jshint": "~0.6.4", 35 | "grunt-contrib-nodeunit": "~0.2.0", 36 | "grunt-contrib-sass": "^0.8.1", 37 | "grunt-contrib-watch": "~0.5.3" 38 | }, 39 | "keywords": [], 40 | "dependencies": { 41 | "jsonfile": "^2.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /test/reboundgen_test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var reboundgen = require('../lib/reboundgen.js'); 4 | 5 | /* 6 | ======== A Handy Little Nodeunit Reference ======== 7 | https://github.com/caolan/nodeunit 8 | 9 | Test methods: 10 | test.expect(numAssertions) 11 | test.done() 12 | Test assertions: 13 | test.ok(value, [message]) 14 | test.equal(actual, expected, [message]) 15 | test.notEqual(actual, expected, [message]) 16 | test.deepEqual(actual, expected, [message]) 17 | test.notDeepEqual(actual, expected, [message]) 18 | test.strictEqual(actual, expected, [message]) 19 | test.notStrictEqual(actual, expected, [message]) 20 | test.throws(block, [error], [message]) 21 | test.doesNotThrow(block, [error], [message]) 22 | test.ifError(value) 23 | */ 24 | 25 | exports['generate'] = { 26 | setUp: function(done) { 27 | // setup here 28 | done(); 29 | }, 30 | 'no args': function(test) { 31 | test.expect(1); 32 | // tests here 33 | test.ok(reboundgen.generate(), 'Completed successfully'); 34 | test.done(); 35 | }, 36 | }; 37 | 38 | 39 | exports['generateFromFile'] = function(test) { 40 | test.expect(1); 41 | // tests here 42 | test.ok(reboundgen.generateFromFile("data/data.json"), 'Completed successfully'); 43 | test.done(); 44 | }; 45 | --------------------------------------------------------------------------------