Which is best css transition vs request keyframe?

[Dropinks]

Hi,

I am creating one simple plugin for web animation.

What i did?
Like jquery animate, i created simple plugin
$(element).anim({width: 100, duration: 1000, easing: “cubic-beizer(value)”})

In above line, easing effect is mentioned, for that i will add transition property to that element. transition: 1000ms all cubic-beizer(value); using javascript.

But in most of the plugin like jquery, velocity, GSAP they used requestanimation keyframe and for easing effect such us easeIn, easeOut they used javascript function.

My doubt is:
Which is better in performance, interaction??? whether Requestanimationframe or using css transition???

Please rectify my doubt.

[coothead]

Hi there Dropinks,

I, personally, don’t use javascript for CSS transitions or animations.

If I did, then I most certainly would not choose a javascript framework
for the task because I would consider that to be a needless overkill.

coothead

[PaulOB]

@Dropinks

requestanimation keyframe

I don’t know anything about requestanimationframe so am posting the only links I could find:

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

requestAnimationFrame Scheduling For Nerds

http://stackoverflow.com/questions/7999680/why-doesnt-jquery-use-requestanimationframe

The answers on SO seem to suggest that native css transitions are still best.

[Dropinks]

For better performance and quality? Which one can use to create plugin?
Requestkeyframe or css transition?

If css transition? by linking anim.css with all easing effect such as easeIn, easeOut and so on.
If Requestkeyframe? need to add easing effect using function as shown below.
easeInCubic:function(x,t,b,c,d){
returnc*(t/=d)tt+b;
}

suggest me… which one i choose???