├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── _config.yml
├── dist
    ├── jquery.keyframes.js
    └── jquery.keyframes.min.js
├── example
    └── index.html
├── package-lock.json
├── package.json
└── src
    └── jquery.keyframes.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": [
3 |         ["@babel/preset-env", {
4 |             "targets": {
5 |                 "browsers": ["last 2 versions"]
6 |             }
7 |         }]
8 |     ]
9 | }


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "airbnb",
 3 |     "env": {
 4 |         "browser": true,
 5 |         "node": false
 6 |     },
 7 |     "rules": {
 8 |         "indent": ["warn", 4],
 9 |         "no-restricted-syntax": 0,
10 |         "guard-for-in": 0,
11 |         "func-names": 0
12 |     }
13 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.com
 2 | *.class
 3 | *.dll
 4 | *.exe
 5 | *.o
 6 | *.so
 7 | *.7z
 8 | *.dmg
 9 | *.gz
10 | *.iso
11 | *.jar
12 | *.rar
13 | *.tar
14 | *.zip
15 | *.log
16 | *.sql
17 | *.sqlite
18 | .DS_Store
19 | .DS_Store?
20 | ._*
21 | .Spotlight-V100
22 | .Trashes
23 | ehthumbs.db
24 | Thumbs.db
25 | node_modules
26 | prepros.cfg
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 jQuery.Keyframes (https://github.com/Keyframes/jQuery.Keyframes)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | jQuery.Keyframes
  2 | ===========
  3 | 
  4 | [![npm version](https://img.shields.io/npm/v/jquerykeyframes.svg?style=flat-square)](https://www.npmjs.org/package/jquerykeyframes)
  5 | 
  6 | This library is a wrapper around [Keyframes.js](https://github.com/Keyframes/Keyframes), a vanilla js library that allows dynamic generation of CSS keyframes with callback events and other niceness.
  7 | 
  8 | Overview
  9 | --------
 10 | CSS3 introduced fancy features like transformations, translations, rotations and scaling.
 11 | jQuery has a very nice built in *$(selector).animate()* function which allows for easy setup of these animations.
 12 | However, jQuery's animate() does not support multiple keyframes. jQuery.Keyframes helps you accomplish just that.
 13 | 
 14 | Requirements
 15 | ------------
 16 | 
 17 | ```html
 18 | <script src='http://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
 19 | ```
 20 | 
 21 | Installation
 22 | ------------
 23 | Include script in your document using the following line:
 24 | 
 25 | ```html
 26 | <script src='/path/to/jquery.keyframes[.min].js'></script>
 27 | ```
 28 | 
 29 | Be sure to define and play animations only after the page has loaded using `window.onload`.
 30 | 
 31 | Usage
 32 | -------------
 33 | 
 34 | **Detecting CSS animation support**
 35 | 
 36 | ```javascript
 37 | var supportedFlag = $.keyframe.isSupported();
 38 | ```
 39 | 
 40 | **Adding a new animation sequence (keyframe)**
 41 | 
 42 | ```javascript
 43 | $.keyframe.define([{
 44 |     name: 'trapdoor-sequence',
 45 |     '0%': {'height': '70px'},
 46 |     '30%': {'height': '10px'},
 47 |     '60%': {'height': '30px'},
 48 |     '100%': {'height': '10px'}
 49 | }]);
 50 | ```
 51 | 
 52 | **Adding a single frame style**
 53 | 
 54 | ```javascript
 55 | $.keyframe.define({
 56 |     name: 'ball-roll',
 57 |     from: {
 58 |         'transform': 'rotate(0deg)'
 59 |     },
 60 |     to: {
 61 |         'transform': 'rotate(360deg)'
 62 |     }
 63 | });
 64 | ```
 65 | 
 66 | **Adding multiple frame styles**
 67 | 
 68 | ```javascript
 69 | $.keyframe.define([{
 70 | 	name: 'roll-clockwise',
 71 | 	'0%': {
 72 | 	    'margin-left' : '0px',
 73 | 	    'background-color' : 'red',
 74 | 	    'transform' : 'rotate(0deg)'
 75 | 	},
 76 | 	'100%': {
 77 | 	    'margin-left' : '600px',
 78 | 	    'transform' : 'rotate(360deg)'
 79 | 	}
 80 |     },{
 81 | 	name: 'roll-anti-clockwise',
 82 | 	'0%': {
 83 | 	    'margin-left' : '0px',
 84 | 	    'background-color' : 'red',
 85 | 	    'transform' : 'rotate(0deg)'
 86 | 	},
 87 | 	'100%': {
 88 | 	    'margin-left' : '600px',
 89 | 	    'transform' : 'rotate(-360deg)'
 90 | 	}
 91 |     }
 92 | ]);
 93 | ```
 94 | 
 95 | **Adding styles and properties in array fashion**
 96 | 
 97 | *Gives resemblance to CSS styling definitions*
 98 | 
 99 | ```javascript
100 | var shake_start = {'transform': 'translate(0px)'};
101 | var shake_odd1 = {'transform': 'translate(-10px, -10px)'};
102 | var shake_even1 = {'transform': 'translate(10px, 10px)'};
103 | var shake_odd2 = {'transform': 'translate(10px, -10px)'};
104 | var shake_even2 = {'transform': 'translate(-10px, 10px)'};
105 | 
106 | $.keyframe.define([{
107 | 	name: 'crazy',
108 | 	'0%': shake_start,
109 | 	'10%': shake_odd2,
110 | 	'20%': shake_even1,
111 | 	'30%': shake_odd2,
112 | 	'40%': shake_even2,
113 | 	'50%': shake_odd2,
114 | 	'60%': shake_even1,
115 | 	'75.3%': shake_odd1,
116 | 	'80.45%': shake_even2,
117 | 	'91.6%': shake_odd1
118 |     }
119 | ]);
120 | ```
121 | 
122 | *Please note, you can add as many properties to the array as you want to*
123 | 
124 | **Responsive animations**
125 | ```javascript
126 | $.keyframe.define([{
127 |     name: 'roll-clockwise',
128 |     media: 'screen and (max-width: 700px)',
129 |     from: {
130 |         'margin-left' : '0px'
131 |     },
132 |     to: {
133 |         'margin-left' : '600px'
134 |     }
135 |     }
136 | ]);
137 | ```
138 | 
139 | **Playing an animation**
140 | 
141 | The css3 animation methods available are better documented here: http://www.w3schools.com/css/css3_animations.asp
142 | 
143 | ```javascript
144 | $(selector).playKeyframe({
145 |     name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element
146 |     duration: '1s', // [optional, default: 0, in ms] how long you want it to last in milliseconds
147 |     timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
148 |     delay: '0s', //[optional, default: 0s]  how long you want to wait before the animation starts
149 |     iterationCount: 'infinite', //[optional, default:1]  how many times you want the animation to repeat
150 |     direction: 'normal', //[optional, default: 'normal']  which direction you want the frames to flow
151 |     fillMode: 'forwards', //[optional, default: 'forward']  how to apply the styles outside the animation time, default value is forwards
152 |     complete: function(){} //[optional] Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
153 | });
154 | ```
155 | 
156 | **Playing an animation (shorthand)**
157 | 
158 | ```javascript
159 | $(selector).playKeyframe(
160 |     'trapdoor-sequence 1s linear 0s infinite normal forwards',
161 |     complete
162 | );
163 | ```
164 | 
165 | **Playing multiple animations**
166 | 
167 | ```javascript
168 | $(selector).playKeyframe([
169 |     'trapdoor-sequence 1s linear 0s infinite',
170 |     {
171 |       name: 'ball-roll',
172 |       duration: "3s",
173 |       timingFunction: 'ease',
174 |       iterationCount: 1
175 |     }
176 | ], complete);
177 | ```
178 | 
179 | **Reset the animation**
180 | 
181 | ```javascript
182 | $(selector).resetKeyframe(callback);
183 | ```
184 | 
185 | **Freeze keyframe animation and kill callbacks**
186 | 
187 | ```javascript
188 | $(selector).pauseKeyframe();
189 | ```
190 | 
191 | **Resume keyframe animation**
192 | 
193 | ```javascript
194 | $(selector).resumeKeyframe();
195 | ```
196 | 
197 | Who is using jQuery.Keyframes?
198 | ------------------------------
199 | 
200 | * Hipster Gallery: http://labs.bebensiganteng.com/html5/hipstergallery/#thumbnails/0
201 | * Ronneby Wordpress Theme: https://themeforest.net/item/ronneby-highperformance-wordpress-theme/11776839?s_rank=1
202 | * Brooklyn Wordpress Theme: https://themeforest.net/item/brooklyn-responsive-multipurpose-wordpress-theme/6221179
203 | * Contrive Wordpress Theme: https://themeforest.net/item/contrive-building-construction-html5-template/14535825
204 | * DFD-Native Wordpress Theme: https://themeforest.net/item/native-powerful-startup-development-tool/19200310
205 | * Sunday Wordpress Theme: http://themes.dfd.name/sunday/promo/
206 | 
207 | Plugins!
208 | --------
209 | See other plugins that allow for spritesheets & more complex movement paths: https://github.com/Keyframes
210 | 
211 | - [Keyframes.Pathfinder](https://github.com/Keyframes/Keyframes.Pathfinder): A plugin for jQuery.Keyframes that generates complex movement paths
212 | - [Keyframes.Spritesheet](https://github.com/Keyframes/Keyframes.Spritesheet): Keyframes.Spritesheet easily generates css3 keyframes for elements using animated spritesheets.
213 | 
214 | Changelog
215 | ---------
216 | **1.0.0**
217 | * Moved to use [keyframes.js](https://github.com/Keyframes/Keyframes) as a base
218 | **0.1.0**
219 | * Remove all vendor prefix functionality (if you need this stick with 0.0.9)
220 | * Remove debug output
221 | * Source code now in ES6
222 | * Remove advanced example
223 | * Add jQuery 3.x to example
224 | * Add linting
225 | **0.0.9**
226 | * Add debug output
227 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/dist/jquery.keyframes.js:
--------------------------------------------------------------------------------
  1 | (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
  2 | "use strict";
  3 | 
  4 | var _core = _interopRequireDefault(require("@keyframes/core"));
  5 | 
  6 | function _interopRequireDefault(obj) {
  7 |   return obj && obj.__esModule ? obj : {
  8 |     "default": obj
  9 |   };
 10 | }
 11 | 
 12 | (function ($) {
 13 |   var doForEach = function doForEach($el, cb) {
 14 |     $el.each(function (_, elem) {
 15 |       if (elem.Keyframes) {
 16 |         cb(elem.Keyframes);
 17 |       } else {
 18 |         elem.Keyframes = new _core["default"](elem);
 19 |         cb(elem.Keyframes);
 20 |       }
 21 |     });
 22 |   };
 23 | 
 24 |   $.keyframe = {
 25 |     isSupported: _core["default"].isSupported,
 26 |     generate: _core["default"].generate,
 27 |     generateCSS: _core["default"].generateCSS,
 28 |     define: _core["default"].define
 29 |   };
 30 | 
 31 |   $.fn.resetKeyframe = function (cb) {
 32 |     var $this = this;
 33 |     doForEach($this, function (kf) {
 34 |       return kf.reset().then(cb);
 35 |     });
 36 |   };
 37 | 
 38 |   $.fn.pauseKeyframe = function () {
 39 |     var $this = this;
 40 |     doForEach($this, function (kf) {
 41 |       return kf.pause();
 42 |     });
 43 |   };
 44 | 
 45 |   $.fn.resumeKeyframe = function () {
 46 |     var $this = this;
 47 |     doForEach($this, function (kf) {
 48 |       return kf.resume();
 49 |     });
 50 |   };
 51 | 
 52 |   $.fn.playKeyframe = function (frameOptions, callbacks) {
 53 |     var $this = this;
 54 |     var cb = callbacks;
 55 | 
 56 |     if (frameOptions.complete) {
 57 |       callbacks = frameOptions.complete;
 58 |     }
 59 | 
 60 |     if (typeof callbacks === 'function') {
 61 |       cb = {
 62 |         onIteration: callbacks,
 63 |         onEnd: callbacks
 64 |       };
 65 |     }
 66 | 
 67 |     doForEach($this, function (kf) {
 68 |       return kf.play(frameOptions, cb);
 69 |     });
 70 |   };
 71 | })(jQuery);
 72 | 
 73 | },{"@keyframes/core":2}],2:[function(require,module,exports){
 74 | "use strict";
 75 | 
 76 | var __assign = void 0 && (void 0).__assign || function () {
 77 |   __assign = Object.assign || function (t) {
 78 |     for (var s, i = 1, n = arguments.length; i < n; i++) {
 79 |       s = arguments[i];
 80 | 
 81 |       for (var p in s) {
 82 |         if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
 83 |       }
 84 |     }
 85 | 
 86 |     return t;
 87 |   };
 88 | 
 89 |   return __assign.apply(this, arguments);
 90 | };
 91 | 
 92 | var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
 93 |   function adopt(value) {
 94 |     return value instanceof P ? value : new P(function (resolve) {
 95 |       resolve(value);
 96 |     });
 97 |   }
 98 | 
 99 |   return new (P || (P = Promise))(function (resolve, reject) {
100 |     function fulfilled(value) {
101 |       try {
102 |         step(generator.next(value));
103 |       } catch (e) {
104 |         reject(e);
105 |       }
106 |     }
107 | 
108 |     function rejected(value) {
109 |       try {
110 |         step(generator["throw"](value));
111 |       } catch (e) {
112 |         reject(e);
113 |       }
114 |     }
115 | 
116 |     function step(result) {
117 |       result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
118 |     }
119 | 
120 |     step((generator = generator.apply(thisArg, _arguments || [])).next());
121 |   });
122 | };
123 | 
124 | var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
125 |   var _ = {
126 |     label: 0,
127 |     sent: function sent() {
128 |       if (t[0] & 1) throw t[1];
129 |       return t[1];
130 |     },
131 |     trys: [],
132 |     ops: []
133 |   },
134 |       f,
135 |       y,
136 |       t,
137 |       g;
138 |   return g = {
139 |     next: verb(0),
140 |     "throw": verb(1),
141 |     "return": verb(2)
142 |   }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
143 |     return this;
144 |   }), g;
145 | 
146 |   function verb(n) {
147 |     return function (v) {
148 |       return step([n, v]);
149 |     };
150 |   }
151 | 
152 |   function step(op) {
153 |     if (f) throw new TypeError("Generator is already executing.");
154 | 
155 |     while (_) {
156 |       try {
157 |         if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
158 |         if (y = 0, t) op = [op[0] & 2, t.value];
159 | 
160 |         switch (op[0]) {
161 |           case 0:
162 |           case 1:
163 |             t = op;
164 |             break;
165 | 
166 |           case 4:
167 |             _.label++;
168 |             return {
169 |               value: op[1],
170 |               done: false
171 |             };
172 | 
173 |           case 5:
174 |             _.label++;
175 |             y = op[1];
176 |             op = [0];
177 |             continue;
178 | 
179 |           case 7:
180 |             op = _.ops.pop();
181 | 
182 |             _.trys.pop();
183 | 
184 |             continue;
185 | 
186 |           default:
187 |             if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
188 |               _ = 0;
189 |               continue;
190 |             }
191 | 
192 |             if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
193 |               _.label = op[1];
194 |               break;
195 |             }
196 | 
197 |             if (op[0] === 6 && _.label < t[1]) {
198 |               _.label = t[1];
199 |               t = op;
200 |               break;
201 |             }
202 | 
203 |             if (t && _.label < t[2]) {
204 |               _.label = t[2];
205 | 
206 |               _.ops.push(op);
207 | 
208 |               break;
209 |             }
210 | 
211 |             if (t[2]) _.ops.pop();
212 | 
213 |             _.trys.pop();
214 | 
215 |             continue;
216 |         }
217 | 
218 |         op = body.call(thisArg, _);
219 |       } catch (e) {
220 |         op = [6, e];
221 |         y = 0;
222 |       } finally {
223 |         f = t = 0;
224 |       }
225 |     }
226 | 
227 |     if (op[0] & 5) throw op[1];
228 |     return {
229 |       value: op[0] ? op[1] : void 0,
230 |       done: true
231 |     };
232 |   }
233 | };
234 | 
235 | var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
236 |   return mod && mod.__esModule ? mod : {
237 |     "default": mod
238 |   };
239 | };
240 | 
241 | Object.defineProperty(exports, "__esModule", {
242 |   value: true
243 | });
244 | 
245 | var add_px_to_style_1 = __importDefault(require("add-px-to-style"));
246 | 
247 | var hyphenate_style_name_1 = __importDefault(require("hyphenate-style-name"));
248 | 
249 | var wait = function wait() {
250 |   return new Promise(function (accept) {
251 |     requestAnimationFrame(function () {
252 |       accept();
253 |     });
254 |   });
255 | };
256 | 
257 | var isBrowser = typeof window !== 'undefined';
258 | var keyframesSheet;
259 | 
260 | if (isBrowser) {
261 |   var styleElem = document.createElement('style');
262 |   styleElem.setAttribute('id', 'keyframesjs-stylesheet');
263 |   document.head.appendChild(styleElem);
264 |   keyframesSheet = styleElem.sheet;
265 | }
266 | 
267 | var voidFunction = function voidFunction() {};
268 | 
269 | var objToCss = function objToCss(obj) {
270 |   if (!Object.keys(obj).length) {
271 |     return '';
272 |   }
273 | 
274 |   var result = '';
275 | 
276 |   for (var key in obj) {
277 |     result += hyphenate_style_name_1["default"](key) + ":" + add_px_to_style_1["default"](key, obj[key]) + ";";
278 |   }
279 | 
280 |   return result;
281 | };
282 | 
283 | var Keyframes = function () {
284 |   function Keyframes(elem) {
285 |     this.queueStore = [];
286 |     this.callbacks = {
287 |       onStart: voidFunction,
288 |       onBeforeStart: voidFunction,
289 |       onIteration: voidFunction,
290 |       onEnd: voidFunction
291 |     };
292 |     this.animationendListener = voidFunction;
293 |     this.animationiterationListener = voidFunction;
294 |     this.mountedElement = elem;
295 |   }
296 | 
297 |   Keyframes.isSupported = function () {
298 |     return document.body.style.animationName !== undefined;
299 |   };
300 | 
301 |   Keyframes.prototype.reset = function () {
302 |     return __awaiter(this, void 0, void 0, function () {
303 |       return __generator(this, function (_a) {
304 |         switch (_a.label) {
305 |           case 0:
306 |             this.removeEvents();
307 |             this.mountedElement.style.animationPlayState = 'running';
308 |             this.mountedElement.style.animation = 'none';
309 |             return [4, wait()];
310 | 
311 |           case 1:
312 |             _a.sent();
313 | 
314 |             return [2, this];
315 |         }
316 |       });
317 |     });
318 |   };
319 | 
320 |   Keyframes.prototype.pause = function () {
321 |     this.mountedElement.style.animationPlayState = 'paused';
322 |     return this;
323 |   };
324 | 
325 |   Keyframes.prototype.resume = function () {
326 |     this.mountedElement.style.animationPlayState = 'running';
327 |     return this;
328 |   };
329 | 
330 |   Keyframes.prototype.play = function (animationOptions, callbacks) {
331 |     var _this = this;
332 | 
333 |     if (this.mountedElement.style.animationName === this.getAnimationName(animationOptions)) {
334 |       requestAnimationFrame(function () {
335 |         return __awaiter(_this, void 0, void 0, function () {
336 |           return __generator(this, function (_a) {
337 |             switch (_a.label) {
338 |               case 0:
339 |                 return [4, this.reset()];
340 | 
341 |               case 1:
342 |                 _a.sent();
343 | 
344 |                 this.play(animationOptions, callbacks);
345 |                 return [2];
346 |             }
347 |           });
348 |         });
349 |       });
350 |       return this;
351 |     }
352 | 
353 |     var _a = callbacks || {},
354 |         _b = _a.onBeforeStart,
355 |         onBeforeStart = _b === void 0 ? null : _b,
356 |         _c = _a.onStart,
357 |         onStart = _c === void 0 ? null : _c,
358 |         _d = _a.onIteration,
359 |         onIteration = _d === void 0 ? null : _d,
360 |         _e = _a.onEnd,
361 |         onEnd = _e === void 0 ? null : _e;
362 | 
363 |     var animationcss = Keyframes.playCSS(animationOptions);
364 | 
365 |     var addEvent = function addEvent(type, eventCallback) {
366 |       var listenerName = type + "Listener";
367 | 
368 |       _this.mountedElement.removeEventListener(type, _this[listenerName]);
369 | 
370 |       _this[listenerName] = eventCallback;
371 | 
372 |       _this.mountedElement.addEventListener(type, _this[listenerName]);
373 |     };
374 | 
375 |     if (onBeforeStart) {
376 |       onBeforeStart();
377 |     }
378 | 
379 |     this.mountedElement.style.animationPlayState = 'running';
380 |     this.mountedElement.style.animation = animationcss;
381 | 
382 |     if (onIteration) {
383 |       addEvent('animationiteration', onIteration);
384 |     }
385 | 
386 |     if (onEnd) {
387 |       addEvent('animationend', onEnd);
388 |     }
389 | 
390 |     if (onStart) {
391 |       requestAnimationFrame(onStart);
392 |     }
393 | 
394 |     return this;
395 |   };
396 | 
397 |   Keyframes.prototype.removeEvents = function () {
398 |     this.mountedElement.removeEventListener('animationiteration', this.animationiterationListener);
399 |     this.mountedElement.removeEventListener('animationend', this.animationendListener);
400 |     return this;
401 |   };
402 | 
403 |   Keyframes.prototype.playNext = function () {
404 |     var _this = this;
405 | 
406 |     var animationOption = this.queueStore.pop();
407 | 
408 |     if (animationOption) {
409 |       this.play(animationOption, {
410 |         onEnd: function onEnd() {
411 |           return _this.playNext();
412 |         },
413 |         onIteration: this.callbacks.onIteration
414 |       });
415 |     } else if (this.callbacks.onEnd) {
416 |       this.callbacks.onEnd();
417 |     }
418 |   };
419 | 
420 |   Keyframes.prototype.updateCallbacks = function (callbacks) {
421 |     if (callbacks) {
422 |       this.callbacks = __assign(__assign({}, this.callbacks), callbacks);
423 |     }
424 |   };
425 | 
426 |   Keyframes.prototype.queue = function (animationOptions, callbacks) {
427 |     var currentQueueLength = this.queueStore.length;
428 |     this.updateCallbacks(callbacks);
429 | 
430 |     if (animationOptions.constructor === Array) {
431 |       this.queueStore = animationOptions.reverse().concat(this.queueStore);
432 |     } else {
433 |       this.queueStore.unshift(animationOptions);
434 |     }
435 | 
436 |     if (!currentQueueLength) {
437 |       if (this.callbacks.onBeforeStart) {
438 |         this.callbacks.onBeforeStart();
439 |       }
440 | 
441 |       this.playNext();
442 | 
443 |       if (this.callbacks.onStart) {
444 |         requestAnimationFrame(this.callbacks.onStart);
445 |       }
446 |     }
447 | 
448 |     return this;
449 |   };
450 | 
451 |   Keyframes.prototype.resetQueue = function () {
452 |     return __awaiter(this, void 0, void 0, function () {
453 |       return __generator(this, function (_a) {
454 |         switch (_a.label) {
455 |           case 0:
456 |             return [4, wait()];
457 | 
458 |           case 1:
459 |             _a.sent();
460 | 
461 |             this.removeEvents();
462 |             this.queueStore = [];
463 |             return [4, this.reset()];
464 | 
465 |           case 2:
466 |             _a.sent();
467 | 
468 |             return [2, this];
469 |         }
470 |       });
471 |     });
472 |   };
473 | 
474 |   Keyframes.prototype.chain = function (animationOptions, callbacks) {
475 |     return __awaiter(this, void 0, void 0, function () {
476 |       return __generator(this, function (_a) {
477 |         switch (_a.label) {
478 |           case 0:
479 |             return [4, this.resetQueue()];
480 | 
481 |           case 1:
482 |             _a.sent();
483 | 
484 |             this.queue(animationOptions, callbacks);
485 |             return [2, this];
486 |         }
487 |       });
488 |     });
489 |   };
490 | 
491 |   Keyframes.prototype.getAnimationName = function (animationObject) {
492 |     switch (animationObject.constructor) {
493 |       case Array:
494 |         {
495 |           return animationObject.map(this.getAnimationName).join(', ');
496 |         }
497 | 
498 |       case String:
499 |         {
500 |           return animationObject.split(' ')[0];
501 |         }
502 | 
503 |       default:
504 |         {
505 |           return animationObject.name;
506 |         }
507 |     }
508 |   };
509 | 
510 |   Keyframes.playCSS = function (animationOptions) {
511 |     var animObjToStr = function animObjToStr(obj) {
512 |       var newObj = __assign({
513 |         duration: '0s',
514 |         timingFunction: 'ease',
515 |         delay: '0s',
516 |         iterationCount: 1,
517 |         direction: 'normal',
518 |         fillMode: 'forwards'
519 |       }, obj);
520 | 
521 |       return [newObj.name, newObj.duration, newObj.timingFunction, newObj.delay, newObj.iterationCount, newObj.direction, newObj.fillMode].join(' ');
522 |     };
523 | 
524 |     if (animationOptions.constructor === Array) {
525 |       var animationOptionArray = animationOptions;
526 |       var animationOptionsStrings = [];
527 | 
528 |       for (var i = 0; i < animationOptionArray.length; i += 1) {
529 |         animationOptionsStrings.push(animationOptionArray[i].constructor === String ? animationOptionArray[i] : animObjToStr(animationOptionArray[i]));
530 |       }
531 | 
532 |       return animationOptionsStrings.join(', ');
533 |     }
534 | 
535 |     if (animationOptions.constructor === String) {
536 |       return animationOptions;
537 |     }
538 | 
539 |     return animObjToStr(animationOptions);
540 |   };
541 | 
542 |   Keyframes.generateCSS = function (frameData) {
543 |     var css = "@keyframes " + frameData.name + " {";
544 | 
545 |     for (var key in frameData) {
546 |       if (key !== 'name' && key !== 'media' && key !== 'complete') {
547 |         var cssRuleObject = objToCss(frameData[key]);
548 |         css += key + " {" + cssRuleObject + "}";
549 |       }
550 |     }
551 | 
552 |     css += '}';
553 | 
554 |     if (frameData.media) {
555 |       css = "@media " + frameData.media + "{" + css + "}";
556 |     }
557 | 
558 |     return css;
559 |   };
560 | 
561 |   Keyframes.generate = function (frameData) {
562 |     var css = this.generateCSS(frameData);
563 |     var oldFrameIndex = Keyframes.rules.indexOf(frameData.name);
564 | 
565 |     if (oldFrameIndex > -1) {
566 |       Keyframes.sheet.deleteRule(oldFrameIndex);
567 |       Keyframes.rules.splice(oldFrameIndex, 1);
568 |     }
569 | 
570 |     var ruleIndex = (Keyframes.sheet.cssRules || Keyframes.sheet.rules).length;
571 |     Keyframes.sheet.insertRule(css, ruleIndex);
572 |     Keyframes.rules[ruleIndex] = frameData.name;
573 |   };
574 | 
575 |   Keyframes.define = function (frameOptions) {
576 |     if (frameOptions.length) {
577 |       for (var i = 0; i < frameOptions.length; i += 1) {
578 |         this.generate(frameOptions[i]);
579 |       }
580 |     } else {
581 |       this.generate(frameOptions);
582 |     }
583 |   };
584 | 
585 |   Keyframes.defineCSS = function (frameOptions) {
586 |     if (frameOptions.length) {
587 |       var css = '';
588 | 
589 |       for (var i = 0; i < frameOptions.length; i += 1) {
590 |         css += this.generateCSS(frameOptions[i]);
591 |       }
592 | 
593 |       return css;
594 |     }
595 | 
596 |     return this.generateCSS(frameOptions);
597 |   };
598 | 
599 |   Keyframes.plugin = function (pluginFunc) {
600 |     if (pluginFunc.constructor === Array) {
601 |       for (var i = 0; i < pluginFunc.length; i += 1) {
602 |         pluginFunc[i](this);
603 |       }
604 |     } else {
605 |       pluginFunc(this);
606 |     }
607 |   };
608 | 
609 |   Keyframes.sheet = keyframesSheet;
610 |   Keyframes.rules = [];
611 |   return Keyframes;
612 | }();
613 | 
614 | if (isBrowser) {
615 |   window.Keyframes = Keyframes;
616 | }
617 | 
618 | exports["default"] = Keyframes;
619 | 
620 | },{"add-px-to-style":3,"hyphenate-style-name":4}],3:[function(require,module,exports){
621 | "use strict";
622 | 
623 | /* The following list is defined in React's core */
624 | var IS_UNITLESS = {
625 |   animationIterationCount: true,
626 |   boxFlex: true,
627 |   boxFlexGroup: true,
628 |   boxOrdinalGroup: true,
629 |   columnCount: true,
630 |   flex: true,
631 |   flexGrow: true,
632 |   flexPositive: true,
633 |   flexShrink: true,
634 |   flexNegative: true,
635 |   flexOrder: true,
636 |   gridRow: true,
637 |   gridColumn: true,
638 |   fontWeight: true,
639 |   lineClamp: true,
640 |   lineHeight: true,
641 |   opacity: true,
642 |   order: true,
643 |   orphans: true,
644 |   tabSize: true,
645 |   widows: true,
646 |   zIndex: true,
647 |   zoom: true,
648 |   // SVG-related properties
649 |   fillOpacity: true,
650 |   stopOpacity: true,
651 |   strokeDashoffset: true,
652 |   strokeOpacity: true,
653 |   strokeWidth: true
654 | };
655 | 
656 | module.exports = function (name, value) {
657 |   if (typeof value === 'number' && !IS_UNITLESS[name]) {
658 |     return value + 'px';
659 |   } else {
660 |     return value;
661 |   }
662 | };
663 | 
664 | },{}],4:[function(require,module,exports){
665 | 'use strict';
666 | /* eslint-disable no-var, prefer-template */
667 | 
668 | var uppercasePattern = /[A-Z]/g;
669 | var msPattern = /^ms-/;
670 | var cache = {};
671 | 
672 | function toHyphenLower(match) {
673 |   return '-' + match.toLowerCase();
674 | }
675 | 
676 | function hyphenateStyleName(name) {
677 |   if (cache.hasOwnProperty(name)) {
678 |     return cache[name];
679 |   }
680 | 
681 |   var hName = name.replace(uppercasePattern, toHyphenLower);
682 |   return cache[name] = msPattern.test(hName) ? '-' + hName : hName;
683 | }
684 | 
685 | module.exports = hyphenateStyleName;
686 | 
687 | },{}]},{},[1]);
688 | 


--------------------------------------------------------------------------------
/dist/jquery.keyframes.min.js:
--------------------------------------------------------------------------------
1 | !function o(a,u,s){function l(t,e){if(!u[t]){if(!a[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(c)return c(t,!0);var r=new Error("Cannot find module '"+t+"'");throw r.code="MODULE_NOT_FOUND",r}var i=u[t]={exports:{}};a[t][0].call(i.exports,function(e){return l(a[t][1][e]||e)},i,i.exports,o,a,u,s)}return u[t].exports}for(var c="function"==typeof require&&require,e=0;e<s.length;e++)l(s[e]);return l}({1:[function(e,t,n){"use strict";var r,i,o=(r=e("@keyframes/core"))&&r.__esModule?r:{default:r};function a(e,n){e.each(function(e,t){t.Keyframes||(t.Keyframes=new o.default(t)),n(t.Keyframes)})}(i=jQuery).keyframe={isSupported:o.default.isSupported,generate:o.default.generate,generateCSS:o.default.generateCSS,define:o.default.define},i.fn.resetKeyframe=function(t){a(this,function(e){return e.reset().then(t)})},i.fn.pauseKeyframe=function(){a(this,function(e){return e.pause()})},i.fn.resumeKeyframe=function(){a(this,function(e){return e.resume()})},i.fn.playKeyframe=function(t,e){var n=e;t.complete&&(e=t.complete),"function"==typeof e&&(n={onIteration:e,onEnd:e}),a(this,function(e){return e.play(t,n)})}},{"@keyframes/core":2}],2:[function(e,t,n){"use strict";var o=function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},d=function(e,a,u,s){return new(u=u||Promise)(function(t,n){function r(e){try{o(s.next(e))}catch(e){n(e)}}function i(e){try{o(s.throw(e))}catch(e){n(e)}}function o(e){e.done?t(e.value):function(t){return t instanceof u?t:new u(function(e){e(t)})}(e.value).then(r,i)}o((s=s.apply(e,a||[])).next())})},p=function(n,r){var i,o,a,e,u={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return e={next:t(0),throw:t(1),return:t(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function(t){if(i)throw new TypeError("Generator is already executing.");for(;u;)try{if(i=1,o&&(a=2&t[0]?o.return:t[0]?o.throw||((a=o.return)&&a.call(o),0):o.next)&&!(a=a.call(o,t[1])).done)return a;switch(o=0,a&&(t=[2&t[0],a.value]),t[0]){case 0:case 1:a=t;break;case 4:return u.label++,{value:t[1],done:!1};case 5:u.label++,o=t[1],t=[0];continue;case 7:t=u.ops.pop(),u.trys.pop();continue;default:if(!(a=0<(a=u.trys).length&&a[a.length-1])&&(6===t[0]||2===t[0])){u=0;continue}if(3===t[0]&&(!a||t[1]>a[0]&&t[1]<a[3])){u.label=t[1];break}if(6===t[0]&&u.label<a[1]){u.label=a[1],a=t;break}if(a&&u.label<a[2]){u.label=a[2],u.ops.push(t);break}a[2]&&u.ops.pop(),u.trys.pop();continue}t=r.call(n,u)}catch(e){t=[6,e],o=0}finally{i=a=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([t,e])}}},r=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0});function i(){return new Promise(function(e){requestAnimationFrame(function(){e()})})}var a,u=r(e("add-px-to-style")),s=r(e("hyphenate-style-name")),l="undefined"!=typeof window;if(l){var c=document.createElement("style");c.setAttribute("id","keyframesjs-stylesheet"),document.head.appendChild(c),a=c.sheet}function f(){}function h(e){if(!Object.keys(e).length)return"";var t="";for(var n in e)t+=s.default(n)+":"+u.default(n,e[n])+";";return t}var m=(y.isSupported=function(){return void 0!==document.body.style.animationName},y.prototype.reset=function(){return d(this,void 0,void 0,function(){return p(this,function(e){switch(e.label){case 0:return this.removeEvents(),this.mountedElement.style.animationPlayState="running",this.mountedElement.style.animation="none",[4,i()];case 1:return e.sent(),[2,this]}})})},y.prototype.pause=function(){return this.mountedElement.style.animationPlayState="paused",this},y.prototype.resume=function(){return this.mountedElement.style.animationPlayState="running",this},y.prototype.play=function(t,n){var r=this;if(this.mountedElement.style.animationName===this.getAnimationName(t))return requestAnimationFrame(function(){return d(r,void 0,void 0,function(){return p(this,function(e){switch(e.label){case 0:return[4,this.reset()];case 1:return e.sent(),this.play(t,n),[2]}})})}),this;function e(e,t){var n=e+"Listener";r.mountedElement.removeEventListener(e,r[n]),r[n]=t,r.mountedElement.addEventListener(e,r[n])}var i=n||{},o=i.onBeforeStart,a=void 0===o?null:o,u=i.onStart,s=void 0===u?null:u,l=i.onIteration,c=void 0===l?null:l,f=i.onEnd,h=void 0===f?null:f,m=y.playCSS(t);return a&&a(),this.mountedElement.style.animationPlayState="running",this.mountedElement.style.animation=m,c&&e("animationiteration",c),h&&e("animationend",h),s&&requestAnimationFrame(s),this},y.prototype.removeEvents=function(){return this.mountedElement.removeEventListener("animationiteration",this.animationiterationListener),this.mountedElement.removeEventListener("animationend",this.animationendListener),this},y.prototype.playNext=function(){var e=this,t=this.queueStore.pop();t?this.play(t,{onEnd:function(){return e.playNext()},onIteration:this.callbacks.onIteration}):this.callbacks.onEnd&&this.callbacks.onEnd()},y.prototype.updateCallbacks=function(e){e&&(this.callbacks=o(o({},this.callbacks),e))},y.prototype.queue=function(e,t){var n=this.queueStore.length;return this.updateCallbacks(t),e.constructor===Array?this.queueStore=e.reverse().concat(this.queueStore):this.queueStore.unshift(e),n||(this.callbacks.onBeforeStart&&this.callbacks.onBeforeStart(),this.playNext(),this.callbacks.onStart&&requestAnimationFrame(this.callbacks.onStart)),this},y.prototype.resetQueue=function(){return d(this,void 0,void 0,function(){return p(this,function(e){switch(e.label){case 0:return[4,i()];case 1:return e.sent(),this.removeEvents(),this.queueStore=[],[4,this.reset()];case 2:return e.sent(),[2,this]}})})},y.prototype.chain=function(t,n){return d(this,void 0,void 0,function(){return p(this,function(e){switch(e.label){case 0:return[4,this.resetQueue()];case 1:return e.sent(),this.queue(t,n),[2,this]}})})},y.prototype.getAnimationName=function(e){switch(e.constructor){case Array:return e.map(this.getAnimationName).join(", ");case String:return e.split(" ")[0];default:return e.name}},y.playCSS=function(e){function t(e){var t=o({duration:"0s",timingFunction:"ease",delay:"0s",iterationCount:1,direction:"normal",fillMode:"forwards"},e);return[t.name,t.duration,t.timingFunction,t.delay,t.iterationCount,t.direction,t.fillMode].join(" ")}if(e.constructor!==Array)return e.constructor===String?e:t(e);for(var n=e,r=[],i=0;i<n.length;i+=1)r.push(n[i].constructor===String?n[i]:t(n[i]));return r.join(", ")},y.generateCSS=function(e){var t="@keyframes "+e.name+" {";for(var n in e)"name"!==n&&"media"!==n&&"complete"!==n&&(t+=n+" {"+h(e[n])+"}");return t+="}",e.media&&(t="@media "+e.media+"{"+t+"}"),t},y.generate=function(e){var t=this.generateCSS(e),n=y.rules.indexOf(e.name);-1<n&&(y.sheet.deleteRule(n),y.rules.splice(n,1));var r=(y.sheet.cssRules||y.sheet.rules).length;y.sheet.insertRule(t,r),y.rules[r]=e.name},y.define=function(e){if(e.length)for(var t=0;t<e.length;t+=1)this.generate(e[t]);else this.generate(e)},y.defineCSS=function(e){if(e.length){for(var t="",n=0;n<e.length;n+=1)t+=this.generateCSS(e[n]);return t}return this.generateCSS(e)},y.plugin=function(e){if(e.constructor===Array)for(var t=0;t<e.length;t+=1)e[t](this);else e(this)},y.sheet=a,y.rules=[],y);function y(e){this.queueStore=[],this.callbacks={onStart:f,onBeforeStart:f,onIteration:f,onEnd:f},this.animationendListener=f,this.animationiterationListener=f,this.mountedElement=e}l&&(window.Keyframes=m),n.default=m},{"add-px-to-style":3,"hyphenate-style-name":4}],3:[function(e,t,n){"use strict";var r={animationIterationCount:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,stopOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0};t.exports=function(e,t){return"number"!=typeof t||r[e]?t:t+"px"}},{}],4:[function(e,t,n){"use strict";var r=/[A-Z]/g,i=/^ms-/,o={};function a(e){return"-"+e.toLowerCase()}t.exports=function(e){if(o.hasOwnProperty(e))return o[e];var t=e.replace(r,a);return o[e]=i.test(t)?"-"+t:t}},{}]},{},[1]);
2 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <title>jQuery-Keyframes Example</title>
  6 |   <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
  7 |   <script type="text/javascript" src="../dist/jquery.keyframes.js"></script>
  8 | 
  9 |   <script type='text/javascript'>
 10 |   $(document).ready(function() {
 11 | 
 12 |     // Setup the initial transform style.
 13 |     $('.ball').css('transform', 'rotate(90deg)');
 14 | 
 15 |     // Adding a new animation sequences (keyframe)
 16 |     $.keyframe.define([{
 17 |       name: 'ball-move',
 18 |       '0%': {
 19 |         'margin-left': '0px'
 20 |       },
 21 |       '50%': {
 22 |         'margin-left': '600px'
 23 |       },
 24 |       '100%': {
 25 |         'margin-left': '0px'
 26 |       }
 27 |     }, {
 28 |       name: 'ball-spin',
 29 |       from: {
 30 |         'transform': 'rotate(90deg)'
 31 |       },
 32 |       to: {
 33 |         'transform': 'rotate(450deg)'
 34 |       }
 35 |     }]);
 36 |   });
 37 | 
 38 | 
 39 |   function play(animation) {
 40 |     $('.ball').resetKeyframe(function() {
 41 |       switch (animation) {
 42 |         case 'normal':
 43 | 
 44 |           // move with easing
 45 |           $('.ball').playKeyframe({
 46 |             name: 'ball-move',
 47 |             duration: "3s",
 48 |             timingFunction: 'ease',
 49 |             iterationCount: 'infinite',
 50 |             direction: 'normal',
 51 |             fillMode: 'forwards',
 52 |             complete: increment
 53 |           });
 54 | 
 55 |           break;
 56 |         case 'spin':
 57 | 
 58 |           // run spin keyframes using the shorthand method.
 59 |           $('.ball').playKeyframe('ball-spin 500ms linear 0s 3 normal forwards', increment);
 60 | 
 61 |           break;
 62 |         case 'linear':
 63 | 
 64 |           // move with linear timing
 65 |           $('.ball').playKeyframe({
 66 |             name: 'ball-move',
 67 |             duration: "3s",
 68 |             timingFunction: 'linear',
 69 |             iterationCount: 'infinite',
 70 |             complete: increment
 71 |           });
 72 | 
 73 |           break;
 74 |         case 'delay':
 75 | 
 76 |           // set a 2 second delay before starting
 77 |           $('.ball').playKeyframe({
 78 |             name: 'ball-move',
 79 |             duration: "3s",
 80 |             timingFunction: 'linear',
 81 |             delay: "3s",
 82 |             iterationCount: 'infinite',
 83 |             complete: increment
 84 |           });
 85 | 
 86 |           break;
 87 |         case 'once':
 88 | 
 89 |           // only play the animation once
 90 |           $('.ball').playKeyframe({
 91 |             name: 'ball-move',
 92 |             duration: "3s",
 93 |             timingFunction: 'ease',
 94 |             complete: increment
 95 |           });
 96 | 
 97 |           break;
 98 |         case 'multi':
 99 |           // play multiple animations
100 |           $('.ball').playKeyframe([
101 |             'ball-spin 500ms linear 0s 6',
102 |             {
103 |               name: 'ball-move',
104 |               duration: "3s",
105 |               timingFunction: 'ease',
106 |               iterationCount: 1
107 |             }
108 |           ],
109 |           increment);
110 |           break;
111 |         default:
112 |           $('#cb').html(0);
113 |       }
114 |     })
115 | 
116 |   }
117 | 
118 |   function pause() {
119 |     // freeze keyframe animation and kill callback
120 |     $('.ball').pauseKeyframe();
121 |   }
122 | 
123 |   function resume() {
124 |     // resume keyframe animation
125 |     $('.ball').resumeKeyframe();
126 |   }
127 | 
128 |   // example callback function
129 | 
130 |   function increment() {
131 |     $('#cb').html(parseInt($('#cb').html()) + 1);
132 |   }
133 |   </script>
134 | 
135 |   <style>
136 |   body{
137 |   	text-align: center;
138 |   }
139 |   .ball-container {
140 |     width:600px;
141 |     margin-left:auto;
142 |     margin-right:auto;
143 |     text-align:center;
144 |     margin-top:20px;
145 |   }
146 |   .ball {
147 |     width:100px;
148 |     height:90px;
149 |     padding-top:10px;
150 |     background-color:yellow;
151 |     text-align:center;
152 |     font-family:tahoma;
153 |     font-size:56px;
154 |     font-weight:bold;
155 |     border-radius: 50px;
156 |     box-shadow: 0px 0px 10px 0px #000;
157 |   }
158 |   </style>
159 | </head>
160 | 
161 | <body>
162 |   <div class="ball-container">
163 |     <div class="ball">: )</div>
164 |     <br />
165 |     <input type="button" onclick="play('normal')" value="Ease Move" />
166 |     <input type="button" onclick="play('linear')" value="Linear Move" />
167 |     <input type="button" onclick="play('delay')" value="2 Second Delay" />
168 |     <input type="button" onclick="play('once')" value="Move Once" />
169 |     <input type="button" onclick="play('spin')" value="Spin" />
170 |     <input type="button" onclick="play('multi')" value="Multiple Animations" />
171 |     <br />
172 |     <input type="button" onclick="pause()" value="Pause" />
173 |     <input type="button" onclick="resume()" value="Resume" />
174 |     <input type="button" onclick="play()" value="Reset" />
175 |     <br />
176 |     <br />Callback count: <b id="cb">0</b>
177 |     <br />
178 |   </div>
179 | </body>
180 | 
181 | </html>
182 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquerykeyframes",
 3 |   "version": "1.0.8",
 4 |   "description": "jQuery-Keyframes allows dynamic generation of CSS3 keyframes with callback events and other niceness.",
 5 |   "main": "dist/jquery.keyframes.min.js",
 6 |   "scripts": {
 7 |     "prepare": "npm run build",
 8 |     "build": "npm run es6 && npm run browserify && npm run minify && npm run cleanup",
 9 |     "es6": "babel src/jquery.keyframes.js -o dist/jquery.keyframes.es6.js --no-comments",
10 |     "browserify": "browserify dist/jquery.keyframes.es6.js -o dist/jquery.keyframes.js -t [ babelify --global --presets [ @babel/preset-env ] ]",
11 |     "cleanup": "rm dist/jquery.keyframes.es6.js",
12 |     "minify": "uglifyjs --compress --mangle -- dist/jquery.keyframes.js > dist/jquery.keyframes.min.js",
13 |     "watch": "nodemon --watch example/example.html --watch src --exec 'npm run build'"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/Keyframes/jQuery.Keyframes.git"
18 |   },
19 |   "keywords": [
20 |     "animation",
21 |     "keyframes",
22 |     "jquery",
23 |     "css3"
24 |   ],
25 |   "author": "krazyjakee",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/Keyframes/jQuery.Keyframes/issues"
29 |   },
30 |   "homepage": "https://github.com/Keyframes/jQuery.Keyframes",
31 |   "dependencies": {
32 |     "@keyframes/core": "^2.0.2",
33 |     "jquery": "^3.4.1"
34 |   },
35 |   "devDependencies": {
36 |     "@babel/cli": "^7.7.0",
37 |     "@babel/core": "^7.7.2",
38 |     "@babel/preset-env": "^7.7.1",
39 |     "babelify": "^10.0.0",
40 |     "browserify": "^16.5.0",
41 |     "eslint": "^6.6.0",
42 |     "eslint-config-airbnb": "^18.0.1",
43 |     "eslint-plugin-import": "^2.18.2",
44 |     "eslint-plugin-jsx-a11y": "^6.2.3",
45 |     "eslint-plugin-react": "^7.16.0",
46 |     "nodemon": "^1.19.4",
47 |     "uglify-js": "^3.6.9"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/jquery.keyframes.js:
--------------------------------------------------------------------------------
 1 | /* global $ */
 2 | import Keyframes from '@keyframes/core';
 3 | 
 4 | (($) => {
 5 |     const doForEach = ($el, cb) => {
 6 |         $el.each((_, elem) => {
 7 |             if (elem.Keyframes) {
 8 |                 cb(elem.Keyframes);
 9 |             } else {
10 |                 elem.Keyframes = new Keyframes(elem);
11 |                 cb(elem.Keyframes);
12 |             }
13 |         });
14 |     };
15 | 
16 |     $.keyframe = {
17 |         isSupported: Keyframes.isSupported,
18 |         generate: Keyframes.generate,
19 |         generateCSS: Keyframes.generateCSS,
20 |         define: Keyframes.define,
21 |     };
22 | 
23 |     $.fn.resetKeyframe = function (cb) {
24 |         const $this = this;
25 |         doForEach($this, kf => kf.reset().then(cb));
26 |     };
27 | 
28 |     $.fn.pauseKeyframe = function () {
29 |         const $this = this;
30 |         doForEach($this, kf => kf.pause());
31 |     };
32 | 
33 |     $.fn.resumeKeyframe = function () {
34 |         const $this = this;
35 |         doForEach($this, kf => kf.resume());
36 |     };
37 | 
38 |     $.fn.playKeyframe = function (frameOptions, callbacks) {
39 |         const $this = this;
40 |         let cb = callbacks;
41 |         if (frameOptions.complete) {
42 |             callbacks = frameOptions.complete;
43 |         }
44 |         if (typeof callbacks === 'function') {
45 |             cb = {
46 |                 onIteration: callbacks,
47 |                 onEnd: callbacks,
48 |             };
49 |         }
50 |         doForEach($this, kf => kf.play(frameOptions, cb));
51 |     };
52 | })(jQuery);
53 | 


--------------------------------------------------------------------------------