├── CHANGELOG.md
├── README.md
├── build
├── build
├── build.xml
└── google-compiler-20100917.jar
├── compass
├── config.rb
└── scss
│ └── style.scss
├── css
├── img
│ └── html5.png
└── style.css
├── demo.html
└── js
├── cssanimation.jquery.js
├── cssanimation.jquery.min.js
├── cssanimation.js
├── cssanimation.min.js
└── src
├── cssanimation.jquery.js
├── cssanimation.js
└── requestanimationframe.js
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # 0.2 (2011/06/14)
2 | - Added `iterationCount` property to allow for repeating animations.
3 | - Added support for Firefox (FF5 will support CSS Animations).
4 | - Fixed a bug in `CSSAnimation.find` where trying to interrogate a stylesheet from another domain could throw a security error.
5 |
6 | # 0.1 (2011/05/20)
7 | - Initial release
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS3 Animation Keyframe Events
2 | CSS3 Animations are great but the current implementation doesn't trigger Javascript Events for each Keyframe [(see here for more information)](http://blog.joelambert.co.uk/2011/05/17/keyframe-events-for-css3-animations/).
3 |
4 | The CSSAnimation object provides the events the browser vendors left out! This allows you to bind event handlers to `cssAnimationKeyframe` events and perform any additional code that needs to happen at each keyframe.
5 |
6 | *Note: This won't work as well on Mobile Webkit until `webkitRequestAnimationFrame()` is implemented!*
7 |
8 | ## Tested Under
9 | - Safari 5
10 | - Chrome 12
11 | - Firefox 5
12 |
13 | ## May/should also work for
14 | - iOS (see above caveat about Mobile WebKit)
15 |
16 | # Requirements
17 | A browser capable of rendering CSS3 Animations.
18 |
19 | # Usage
20 | Create the CSS animation keyframes in CSS as you would normally, for example with Safari/Chrome:
21 |
22 | @-webkit-keyframes boxrotate {
23 | 0% {
24 | -webkit-transform: translate3d(0, 0, 0);
25 | background: #da371e;
26 | }
27 |
28 | 25% {
29 | -webkit-transform: translate3d(0px, 200px, 0) rotate(90deg);
30 | background: #da3ab9;
31 | }
32 |
33 | 50% {
34 | -webkit-transform: translate3d(200px, 200px, 0) rotate(180deg);
35 | background: #34b6da;
36 | }
37 |
38 | 75% {
39 | -webkit-transform: translate3d(200px, 0, 0) rotate(270deg);
40 | background: #88da50;
41 | }
42 |
43 | 100% {
44 | -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
45 | background: #da371e;
46 | }
47 | }
48 |
49 | Next trigger the animation on a specified DOM element:
50 |
51 | var elem = document.getElementById('animateme');
52 |
53 | // Trigger the animation named 'boxrotate' with duration 3000ms
54 | CSSAnimation.trigger(elem, 'boxrotate', 3000);
55 |
56 | There is also a jQuery plugin provided for convenience (`cssanimation.jquery.js`):
57 |
58 | $('#animateme').cssanimation('boxrotate', 3000);
59 |
60 | You can then listen for `cssAnimationKeyframe` events the same way you'd listen for any other. Here's an example using jQuery:
61 |
62 | $('#animateme').bind('cssAnimationKeyframe', function(event){
63 | var text = "";
64 |
65 | switch(event.originalEvent.keyText) {
66 | case '0%':
67 | text = "down ↓"; break;
68 | case '25%':
69 | text = "right →"; break;
70 | case '50%':
71 | text = "up ↑"; break;
72 | case '75%':
73 | text = "left ←"; break;
74 | case '100%':
75 | text = "click me"; break;
76 | };
77 |
78 | $('#text').html(text);
79 | });
80 |
81 | # Limitations
82 |
83 | Currently events will only be fired for keyframes at 5% increments (e.g. 0%, 5%, 10% etc). So if you have a keyframe at 23%, you won't be notified. This is similar in design to how [jQuery Runloop](http://farukat.es/journal/2011/02/514-new-creation-jquery-runloop-plugin) works.
84 |
85 | You can change this if you want but you may begin to miss events! If you really want to change this you can by passing in an option to either the native function or jQuery plugin:
86 |
87 | // Native
88 | CSSAnimation.trigger(elem, 'boxrotate', 3000, {
89 | base: 1 // Raise events for keyframes at 1% increments
90 | });
91 |
92 | // jQuery
93 | elem.cssanimation('boxrotate', 3000, {
94 | base: 1 // Raise events for keyframes at 1% increments
95 | });
96 |
97 | # How does it work?
98 |
99 | Using the `requestAnimFrame()` shim by [Paul Irish](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) we can get very accurate callbacks (@60fps), this means that:
100 |
101 | > The browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. For example, JS-based animations synchronized with CSS transitions.
102 |
103 | This enables us to work out when a keyframe ought to have occured and raise a suitable event.
104 |
105 | # Contributing
106 |
107 | Contribution is welcomed but to make it easier to accept a pull request here are some guidelines:
108 |
109 | - Please make all changes into the source files found under `js/src`. You can then use the build tool (PHP script found at `./build/build`) to create the concatenated and minified files.
110 |
111 | - Please [camelCase](http://en.wikipedia.org/wiki/CamelCase) your variables, especially if they are used in the options object.
112 |
113 | # License
114 |
115 | CSSAnimation Keyframe Events is Copyright © 2011 [Joe Lambert](http://www.joelambert.co.uk) and is licensed under the terms of the [MIT License](http://www.opensource.org/licenses/mit-license.php).
--------------------------------------------------------------------------------
/build/build:
--------------------------------------------------------------------------------
1 | #!/usr/bin/php
2 | docroot ? $xml->docroot : "./";
13 |
14 | $version = $xml->version ? $xml->version : "1.0";
15 |
16 | // Process each output file
17 | foreach($xml->output->file as $output)
18 | {
19 | $concat = "";
20 | $attr = $output->attributes();
21 |
22 | $outputname = $attr['name'] ? $attr['name']."" : "javascript";
23 |
24 | // Concat javascript files
25 | foreach($output->source as $file)
26 | $concat .= file_get_contents(dirname(__FILE__)."/$docroot/$file").";\n\n";
27 |
28 | // Process any replacements
29 | $concat = str_replace('@VERSION', $version, $concat);
30 |
31 | // Save to disk
32 | $max_path = dirname(__FILE__)."/$docroot/$outputname.js";
33 | file_put_contents($max_path, $concat);
34 |
35 | // Compile and minify with Google Closure Compiler
36 | $min_path = dirname(__FILE__)."/$docroot/$outputname.min.js";
37 |
38 | system("java -jar ".escapeshellarg(dirname(__FILE__)."/google-compiler-20100917.jar")." --js ".escapeshellarg($max_path)." --warning_level QUIET --js_output_file ".escapeshellarg($min_path));
39 | }
40 | ?>
--------------------------------------------------------------------------------
/build/build.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | 0.2
4 | ../js/
5 |
6 |
7 | src/cssanimation.js
8 | src/requestanimationframe.js
9 |
10 |
11 | src/cssanimation.jquery.js
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/build/google-compiler-20100917.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joelambert/CSSAnimationKeyframeEvents/cb72cdee63a5ec193353522520b69896b3f72aea/build/google-compiler-20100917.jar
--------------------------------------------------------------------------------
/compass/config.rb:
--------------------------------------------------------------------------------
1 | # Require any additional compass plugins here.
2 |
3 | # Set this to the root of your project when deployed:
4 | http_path = "/"
5 | css_dir = "../css"
6 | sass_dir = "scss"
7 | images_dir = "../css/img"
8 | javascripts_dir = "javascripts"
9 |
10 | # You can select your preferred output style here (can be overridden via the command line):
11 | # output_style = :expanded or :nested or :compact or :compressed
12 |
13 | # To enable relative paths to assets via compass helper functions. Uncomment:
14 | # relative_assets = true
15 |
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | # line_comments = false
18 |
19 |
20 | # If you prefer the indented syntax, you might want to regenerate this
21 | # project again passing --syntax sass, or you can uncomment this:
22 | # preferred_syntax = :sass
23 | # and then run:
24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
25 |
--------------------------------------------------------------------------------
/compass/scss/style.scss:
--------------------------------------------------------------------------------
1 | /* Welcome to Compass.
2 | * In this file you should write your main styles. (or centralize your imports)
3 | * Import this file using the following HTML or equivalent:
4 | * CSS3 Animation Keyframe Events
6 |
9 |
64 | Keyframe Events for CSS3 Animations
65 | CSS3 Animations are great but the current implementation doesn't trigger Javascript Events for each Keyframe (see here for more information ) .
66 | The CSSAnimation object provides the events the browser vendors left out! This allows you to bind event handlers to cssAnimationKeyframe events and perform any additional code that needs to happen at each keyframe.
67 | Note: This won't work as well on Mobile Webkit until webkitRequestAnimationFrame() is implemented!
68 |
69 |
73 |
74 |
--------------------------------------------------------------------------------
/js/cssanimation.jquery.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | /**
3 | * jQuery wrapper function around CSSAnimation.trigger()
4 | * @param {String} animationName The name given to the @-webkit-keyframes animation
5 | * @param {Integer} duration The length of time of the animation (in milliseconds)
6 | * @param {Object} opts An optional set of options used to override the defaults
7 | */
8 | $.fn.cssanimation = function(animation, duration, opts) {
9 | return this.each(function(index, elem){
10 | CSSAnimation.trigger(elem, animation, duration, opts);
11 | });
12 | };
13 | })();;
14 |
15 |
--------------------------------------------------------------------------------
/js/cssanimation.jquery.min.js:
--------------------------------------------------------------------------------
1 | (function(){$.fn.cssanimation=function(a,b,c){return this.each(function(e,d){CSSAnimation.trigger(d,a,b,c)})}})();
2 |
--------------------------------------------------------------------------------
/js/cssanimation.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @preserve CSSAnimation v0.2
3 | * Provides 'cssAnimationKeyframe' events for keyframe animations.
4 | * http://www.joelambert.co.uk/cssa
5 | *
6 | * Copyright 2011, Joe Lambert. All rights reserved
7 | * Free to use under the MIT license.
8 | * http://www.opensource.org/licenses/mit-license.php
9 | */
10 |
11 | var CSSAnimation = {
12 | version: '0.2'
13 | };
14 |
15 | // Locate a WebKitCSSKeyframesRule
16 | // Modified version of code found @ http://stackoverflow.com/questions/2961544/cssrules-is-empty
17 | CSSAnimation.find = function(a) {
18 | var ss = document.styleSheets;
19 | for (var i = ss.length - 1; i >= 0; i--) {
20 | try {
21 | var s = ss[i],
22 | rs = s.cssRules ? s.cssRules :
23 | s.rules ? s.rules :
24 | [];
25 |
26 | for (var j = rs.length - 1; j >= 0; j--) {
27 | if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a){
28 | return rs[j];
29 | }
30 | }
31 | }
32 | catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ }
33 | }
34 | return null;
35 | };
36 |
37 | // Trigger a CSS3 Animation on a given element
38 | /**
39 | * Trigger a CSS3 Animation on a given element
40 | * @param {DOMElement} elem The DOM Element to apply the animation to
41 | * @param {String} animationName The name given to the @-webkit-keyframes animation
42 | * @param {Integer} duration The length of time of the animation (in milliseconds)
43 | * @param {Object} opts An optional set of options used to override the defaults
44 | */
45 |
46 | CSSAnimation.trigger = function(elem, animationName, duration, opts) {
47 | var keyframes = {}, loggedKeyframes = {}, animation = null, element = elem, start = 0, cycle = 0, options = {
48 | base: 5,
49 | easing: 'linear',
50 | iterationCount: 1
51 | },
52 | prefixes = ['Webkit', 'Moz'];
53 |
54 | // Enable option setting
55 | for(var k in opts)
56 | options[k] = opts[k];
57 |
58 | // Prevent animation triggers if the animation is already playing
59 | if(element.isPlaying)
60 | return;
61 |
62 | // Can we find the animaition called animationName?
63 | animation = CSSAnimation.find(animationName);
64 |
65 | if(!animation)
66 | return false;
67 |
68 | // Work out the timings of keyframes
69 | keyframes = {};
70 |
71 | for(var i=0; i < animation.cssRules.length; i++)
72 | {
73 | var kf = animation.cssRules[i],
74 | name = kf.keyText,
75 | percentage = 0;
76 |
77 | // Work out the percentage
78 | name == 'from' ? percentage = 0 :
79 | name == 'to' ? percentage = 1 :
80 | percentage = name.replace('%', '') / 100;
81 |
82 | // Store keyframe for easy recall
83 | keyframes[(percentage*100)+'%'] = kf;
84 | }
85 |
86 | // Start the animation
87 | start = new Date().getTime();
88 |
89 | // Variables used by the runloop
90 | var current = percentage = roundedKey = keyframe = null,
91 | raiseEvent = function(keyText, elapsedTime) {
92 | var event = document.createEvent("Event");
93 | event.initEvent("cssAnimationKeyframe", true, true);
94 | event.animationName = animationName;
95 | event.keyText = keyText;
96 | event.elapsedTime = elapsedTime;
97 | element.dispatchEvent(event);
98 | },
99 |
100 | i=0,
101 | found=false,
102 |
103 | applyCSSAnimation = function(anim) {
104 | found = false;
105 | 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};
11 | 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; i--) {
20 | try {
21 | var s = ss[i],
22 | rs = s.cssRules ? s.cssRules :
23 | s.rules ? s.rules :
24 | [];
25 |
26 | for (var j = rs.length - 1; j >= 0; j--) {
27 | if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a){
28 | return rs[j];
29 | }
30 | }
31 | }
32 | catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ }
33 | }
34 | return null;
35 | };
36 |
37 | // Trigger a CSS3 Animation on a given element
38 | /**
39 | * Trigger a CSS3 Animation on a given element
40 | * @param {DOMElement} elem The DOM Element to apply the animation to
41 | * @param {String} animationName The name given to the @-webkit-keyframes animation
42 | * @param {Integer} duration The length of time of the animation (in milliseconds)
43 | * @param {Object} opts An optional set of options used to override the defaults
44 | */
45 |
46 | CSSAnimation.trigger = function(elem, animationName, duration, opts) {
47 | var keyframes = {}, loggedKeyframes = {}, animation = null, element = elem, start = 0, cycle = 0, options = {
48 | base: 5,
49 | easing: 'linear',
50 | iterationCount: 1
51 | },
52 | prefixes = ['Webkit', 'Moz'];
53 |
54 | // Enable option setting
55 | for(var k in opts)
56 | options[k] = opts[k];
57 |
58 | // Prevent animation triggers if the animation is already playing
59 | if(element.isPlaying)
60 | return;
61 |
62 | // Can we find the animaition called animationName?
63 | animation = CSSAnimation.find(animationName);
64 |
65 | if(!animation)
66 | return false;
67 |
68 | // Work out the timings of keyframes
69 | keyframes = {};
70 |
71 | for(var i=0; i < animation.cssRules.length; i++)
72 | {
73 | var kf = animation.cssRules[i],
74 | name = kf.keyText,
75 | percentage = 0;
76 |
77 | // Work out the percentage
78 | name == 'from' ? percentage = 0 :
79 | name == 'to' ? percentage = 1 :
80 | percentage = name.replace('%', '') / 100;
81 |
82 | // Store keyframe for easy recall
83 | keyframes[(percentage*100)+'%'] = kf;
84 | }
85 |
86 | // Start the animation
87 | start = new Date().getTime();
88 |
89 | // Variables used by the runloop
90 | var current = percentage = roundedKey = keyframe = null,
91 | raiseEvent = function(keyText, elapsedTime) {
92 | var event = document.createEvent("Event");
93 | event.initEvent("cssAnimationKeyframe", true, true);
94 | event.animationName = animationName;
95 | event.keyText = keyText;
96 | event.elapsedTime = elapsedTime;
97 | element.dispatchEvent(event);
98 | },
99 |
100 | i=0,
101 | found=false,
102 |
103 | applyCSSAnimation = function(anim) {
104 | found = false;
105 | for(i=0; i