Building CSS animation(s) from 'options.keyframes' OBJ
// Building CSS animation(s) from 'options.keyframes' OBJ (cf. ./jquery.boxFx.presets.js)
// Convert JS obj to cross-browsers CSS3 keyframes anim
// Inject keyframes class in <head> stylesheet, give back css animation(s) name(s) to apply on element
HTML
<div style="width:50px;height:50px;margin:50px;background:grey;">OK</div>
JavaScript
///////////////////////////////////////////////////////////////////////////////////////////////////////////
// HERE THE MAGICAL ;)
///////////////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
var keyframesExample = [{
duration : '1500ms',
timingFunction : 'ease',
delay : '0',
iterationCount : 'infinite',
direction : 'alternate',
fillMode : 'forwards',
steps: [{
step : '0%',
transform : 'translate(0,0)'
}, {
step : '33%',
transform : 'translate(40px,-30px)',
background : 'red'
}, {
step : '100%',
transform : 'translate(80px,0)'
}]
}, {
duration : '2s',
timingFunction : 'linear',
delay : '0',
iterationCount : '2',
direction : 'normal',
fillMode : 'backwards',
steps: [{
step : '0%,100%'
}, {
step : '50%',
width : '150px'
}]
}];
$('div').crossCss({borderRadius:'10px', border:'1px solid rgba(0,0,0,0.5)'});
$('div').crossCss($.buildKeyframeClass(keyframesExample));
});
///////////////////////////////////////////////////////////////////////////////////////////////////////////
// CODE IS AT THE BOTTOM !!! - @Molokoloco 2011
///////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build:...