Polyfill Transition

by ScottRippey

HTML

<div class="transition">
    Transitionable
</div>

CSS

.transition {
    color: blue;

    transition: all 1000ms;
    content: "transition: all 1000ms";
    background-image: url("polyfill-transition://all 1000ms");
    -ms-filter: "alpha(50);transition(all 1000ms)";
}
.toggle {
    color: red;
}

JavaScript

setInterval(toggle, 1000);
toggle();
function toggle() {
    var t = $$('.transition');
    t.toggleClass('toggle');
    
    var o = {
        'content': t.getStyle('content')
        ,'background-image': t.getStyle('background-image')
        ,'filter': t.getStyle('filter')
        ,'-ms-filter': t.getStyle('-ms-filter')
    };
    
    t.set('text', JSON.encode(o));
    
}