Keyframes.Spritesheet is a plugin for Keyframes that easily generates css3 keyframes for elements using animated spritesheets.
importSpritesheetfrom'@keyframes/spritesheet';Keyframes.plugin(Spritesheet);varkeyframes=Keyframes.spriteSheet({name: 'gem',// Name of the spritesheetrows: 6,// Number of rowscols: 7,// Number of columnswidth: 210,// Width of the spritesheet in pixelsheight: 180,// Height of the spritesheet in pixelsoffsetX: 0,// [Optional] When you have multiple spritesheets in one -offsetY: 0,// - image use these to define their offset. count: 39// [Optional] Define the number of sprites in total});constitem=newKeyframes(document.getElementById('item'));item.playSpriteSheet(name,time,loop,keyframes);name- name of the spritesheet.time- time for the animation to complete.loop- [optional] number of times to repeat the animation (-1 for infinite)keyframes- [optional] pass keyframes to get them defined
constitem=newKeyframes(document.getElementById('item'));item.playSpriteSheet('gem','3s',-1,keyframes);"Gems" Image created by Lokiare. Image is subject to the creative commons license: http://creativecommons.org/licenses/by/3.0/