Css3 Transition Polyfill

CSS3 Transition Polyfill

It is possible to detect supported CSS properties, provided you're aware in advance of what browser vendor prefixes you need to sniff for. I've written a gist for the mechanism:

https://gist.github.com/1096784

cssSandpaper is a JS library that aims to parse CSS and dynamically implement polyfills for various CSS3 effects:

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

There is also a jQuery library that operates in reverse order, and silently implements transitions where possible when you call $.animate():

https://github.com/louisremi/jquery.transition.js

CSS3 Animation polyfill

I don't think that there is a direct polyfill for animations, that you don't introduce the animation commands by javascript.

For that you can go to jquery animate(), or you can try this one, more new:
http://www.polymer-project.org/platform/web-animations.html

If you need something for transition fallbacks, you can try:
https://github.com/addyosmani/css3-transition-fallbacks

CSS3 animation-fill-mode polyfill

If it were me I'd try an opt for the simpler alternative - if possible. I'd downgrade my implementation so that I'm only using what is commonly accepted. Later on, when the feature is more widely supported I then think about implementing it. I rarely consider using a feature that has This is an experimental technology broadcast on documentation pages - but then maybe I should be classed as boring :)

In your example, you could achieve the same result as animation-fill-mode:forwards by defining the end state of your element initially, and using a chained animation (if a delay before the action is needed):

@keyframes waitandhide {
  from { opacity:0; }
  to { opacity:0; }
}
@keyframes show {
  from { opacity:0; }
  to { opacity:1; }
}
div {
  opacity:1;
  animation: waitandhide 2s 0s, show 2s 2s;
}
<div>just a test</div>​

http://jsfiddle.net/RMJ8s/1/

Now it is possible that slower browsers might flash up your initial element states before hiding them away again. But in my experience I've only seen this on very old machines and for pages that have a huge amount of css to render.

Obviously the above does bloat your css a bit more (as you have to duplicate styles), and it would be more complicated when dealing with complex animations. However:

1. It should work for pretty much any animation situation.
2. It would avoid the need for JavaScript (save for the $().fadeIn fallback).
3. It will work on all browsers that support css animation.
4. You don't run the risk of JS and CSS being/becoming unsynchronised.

With regard to using short-forms it would be best not to if you want to go for as wide reaching browser compatibility as possible. However, as shown in my examples above I have opted for using short-forms because they hold more clarity and I can understand not wanting to write (or read) the long-winded versions all the time. For this reason I would recommend using less to generate your css:

http://lesscss.org/

http://radiatingstar.com/css-keyframes-animations-with-less

How do I normalize the CSS3 transition end events across browsers?

There's a technique used in Modernizr, improved:

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            return transitions[i];
        }
    }

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}

Then you can just call this function whenever you need the transition end event:

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

Opera mini css3 transform, gradient, transition polyfill?

About transition/transform in Opera Mini:

Opera Mini use OBML. The OBML server farm renders the requested web page then takes a snapshot of it before converting it into OBML and sending it to the browser. So page in Opera Mini can't be animated by css or javascript or gif.

About gradients in Opera Mini:

Opera Mini use servers based on Presto browser engine to render the page. Presto version 2.10 can render CSS3 gradients. Now Opera Mini 7.5 on Android (last version) use Presto 2.8 and Opera Mini 8 for Blackberry and Java-browsers use 2.9 version. So 2.10 is not so far (perhaps one year).

Also you can use css inline base64 images via:

some_selecor { 
  background-image: url(data:image/png;base64,base64_image_code_here);
}

in Opera Mini and you can set your gradient as encode background-image.

IMHO:

Opera Mini use server farm render to save battery level on your phone and to save your traffic (size of request in OBML is only 10% of HTTP requests size of the same page). So render all CSS3 features it not the main target of this browser.

Is there polyfill for css transform property in IE8

There are a few you can use, the ones suggested from modenizer are:

css sandpaper and transformie.

I'd argue though, that adding pollyfills to older browser like ie8 damages the performance of an already past it browser and lowers the user experience. Also, if you are adding pollyfills to mobile browsers you are adding to the loading times which in a 3g connection might put users off.

---

Related Topics