From b09f54c879317b39a266fb55099af85fbdbeb4ae Mon Sep 17 00:00:00 2001 From: Miroslav Kyurchev Date: Tue, 23 Apr 2013 18:17:10 +0300 Subject: [PATCH] Add support for official CSS3 properties Now works in latest versions of all major browsers --- js/cssanimation.js | 312 ++++++++++++++++++++++------------------- js/cssanimation.min.js | 10 +- js/src/cssanimation.js | 311 +++++++++++++++++++++------------------- 3 files changed, 336 insertions(+), 297 deletions(-) diff --git a/js/cssanimation.js b/js/cssanimation.js index 39af2db..fa0d860 100644 --- a/js/cssanimation.js +++ b/js/cssanimation.js @@ -9,29 +9,32 @@ */ var CSSAnimation = { - version: '0.2' + version: '0.2' }; // Locate a WebKitCSSKeyframesRule // Modified version of code found @ http://stackoverflow.com/questions/2961544/cssrules-is-empty CSSAnimation.find = function(a) { - var ss = document.styleSheets; - for (var i = ss.length - 1; i >= 0; i--) { - try { - var s = ss[i], - rs = s.cssRules ? s.cssRules : - s.rules ? s.rules : - []; - - for (var j = rs.length - 1; j >= 0; j--) { - if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a){ - return rs[j]; - } - } - } - catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ } - } - return null; + var ss = document.styleSheets; + for (var i = ss.length - 1; i >= 0; i--) { + try { + var s = ss[i], + rs = s.cssRules ? s.cssRules : + s.rules ? s.rules : + []; + + for (var j = rs.length - 1; j >= 0; j--) { + if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || + rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE || + rs[j].type === window.CSSRule.KEYFRAMES_RULE) && + rs[j].name == a){ + return rs[j]; + } + } + } + catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ } + } + return null; }; // Trigger a CSS3 Animation on a given element @@ -39,138 +42,155 @@ CSSAnimation.find = function(a) { * Trigger a CSS3 Animation on a given element * @param {DOMElement} elem The DOM Element to apply the animation to * @param {String} animationName The name given to the @-webkit-keyframes animation - * @param {Integer} duration The length of time of the animation (in milliseconds) + * @param {Integer} duration The length of time of the animation (in milliseconds) * @param {Object} opts An optional set of options used to override the defaults */ CSSAnimation.trigger = function(elem, animationName, duration, opts) { - var keyframes = {}, loggedKeyframes = {}, animation = null, element = elem, start = 0, cycle = 0, options = { - base: 5, - easing: 'linear', - iterationCount: 1 - }, - prefixes = ['Webkit', 'Moz']; - - // Enable option setting - for(var k in opts) - options[k] = opts[k]; - - // Prevent animation triggers if the animation is already playing - if(element.isPlaying) - return; - - // Can we find the animaition called animationName? - animation = CSSAnimation.find(animationName); - - if(!animation) - return false; - - // Work out the timings of keyframes - keyframes = {}; - - for(var i=0; i < animation.cssRules.length; i++) - { - var kf = animation.cssRules[i], - name = kf.keyText, - percentage = 0; - - // Work out the percentage - name == 'from' ? percentage = 0 : - name == 'to' ? percentage = 1 : - percentage = name.replace('%', '') / 100; - - // Store keyframe for easy recall - keyframes[(percentage*100)+'%'] = kf; - } - - // Start the animation - start = new Date().getTime(); - - // Variables used by the runloop - var current = percentage = roundedKey = keyframe = null, - raiseEvent = function(keyText, elapsedTime) { - var event = document.createEvent("Event"); - event.initEvent("cssAnimationKeyframe", true, true); - event.animationName = animationName; - event.keyText = keyText; - event.elapsedTime = elapsedTime; - element.dispatchEvent(event); - }, - - i=0, - found=false, - - applyCSSAnimation = function(anim) { - found = false; - for(i=0; i=0;g--)try{for(var d=i[g],e=d.cssRules?d.cssRules:d.rules?d.rules:[],c=e.length-1;c>=0;c--)if((e[c].type===window.CSSRule.WEBKIT_KEYFRAMES_RULE||e[c].type===window.CSSRule.MOZ_KEYFRAMES_RULE)&&e[c].name==a)return e[c]}catch(l){}return null}; -CSSAnimation.trigger=function(a,i,g,d){var e={},c={},l=null,o=0,q=0,j={base:5,easing:"linear",iterationCount:1},k=["Webkit","Moz"],h;for(h in d)j[h]=d[h];if(!a.isPlaying){l=CSSAnimation.find(i);if(!l)return false;e={};for(var b=0;b=0;h--)try{for(var d=j[h],e=d.cssRules?d.cssRules:d.rules?d.rules:[],c=e.length-1;c>=0;c--)if((e[c].type===window.CSSRule.WEBKIT_KEYFRAMES_RULE||e[c].type===window.CSSRule.MOZ_KEYFRAMES_RULE||e[c].type===window.CSSRule.KEYFRAMES_RULE)&&e[c].name==a)return e[c]}catch(l){}return null}; +CSSAnimation.trigger=function(a,j,h,d){var e={},c={},l=null,o=0,q=0,k={base:5,easing:"linear",iterationCount:1},r=["Webkit","Moz"],i;for(i in d)k[i]=d[i];if(!a.isPlaying){l=CSSAnimation.find(j);if(!l)return false;e={};for(var f=0;f= 0; i--) { - try { - var s = ss[i], - rs = s.cssRules ? s.cssRules : - s.rules ? s.rules : - []; - - for (var j = rs.length - 1; j >= 0; j--) { - if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a){ - return rs[j]; - } - } - } - catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ } - } - return null; + var ss = document.styleSheets; + for (var i = ss.length - 1; i >= 0; i--) { + try { + var s = ss[i], + rs = s.cssRules ? s.cssRules : + s.rules ? s.rules : + []; + + for (var j = rs.length - 1; j >= 0; j--) { + if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || + rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE || + rs[j].type === window.CSSRule.KEYFRAMES_RULE) && + rs[j].name == a){ + return rs[j]; + } + } + } + catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ } + } + return null; }; // Trigger a CSS3 Animation on a given element @@ -39,135 +42,151 @@ CSSAnimation.find = function(a) { * Trigger a CSS3 Animation on a given element * @param {DOMElement} elem The DOM Element to apply the animation to * @param {String} animationName The name given to the @-webkit-keyframes animation - * @param {Integer} duration The length of time of the animation (in milliseconds) + * @param {Integer} duration The length of time of the animation (in milliseconds) * @param {Object} opts An optional set of options used to override the defaults */ CSSAnimation.trigger = function(elem, animationName, duration, opts) { - var keyframes = {}, loggedKeyframes = {}, animation = null, element = elem, start = 0, cycle = 0, options = { - base: 5, - easing: 'linear', - iterationCount: 1 - }, - prefixes = ['Webkit', 'Moz']; - - // Enable option setting - for(var k in opts) - options[k] = opts[k]; - - // Prevent animation triggers if the animation is already playing - if(element.isPlaying) - return; - - // Can we find the animaition called animationName? - animation = CSSAnimation.find(animationName); - - if(!animation) - return false; - - // Work out the timings of keyframes - keyframes = {}; - - for(var i=0; i < animation.cssRules.length; i++) - { - var kf = animation.cssRules[i], - name = kf.keyText, - percentage = 0; - - // Work out the percentage - name == 'from' ? percentage = 0 : - name == 'to' ? percentage = 1 : - percentage = name.replace('%', '') / 100; - - // Store keyframe for easy recall - keyframes[(percentage*100)+'%'] = kf; - } - - // Start the animation - start = new Date().getTime(); - - // Variables used by the runloop - var current = percentage = roundedKey = keyframe = null, - raiseEvent = function(keyText, elapsedTime) { - var event = document.createEvent("Event"); - event.initEvent("cssAnimationKeyframe", true, true); - event.animationName = animationName; - event.keyText = keyText; - event.elapsedTime = elapsedTime; - element.dispatchEvent(event); - }, - - i=0, - found=false, - - applyCSSAnimation = function(anim) { - found = false; - for(i=0; i