Are CSS3 keyframe animations smoother than property transitions?

Question

I've got a mobile web app that uses Zepto to create transitions between pages. Animation is super smooth on desktop, but pretty choppy on my iPhone 4. Are animations more performant than transitions? What's the difference between animations and transitions, aside from granularity of control?

Answer 1

This is not a transition vs. animation question - this is a transform vs. property change question.

Content can be moved around a screen in multiple different ways: the most common two are position property (left, top, margin-left, scroll-position etc.) changes and transforms. On iOS, now in version 5, position property changes are done in pixel increments on the CPU - there is no sub-pixel tweening, so the movement, particularly on older non-retina displays is jerky.

In contrast, transforms - notably 3D transforms are done on the GPU, so you get very smooth movement and sub-pixel tweening.

(Note that some desktop browsers do GPU accelerated position property changes - like IE9 - so there is no difference visually between the two approaches)

Answer 2

I'm no expert, but I assume it's the way the browser handles animations.

It probably takes a more sophisticated and expanded way to handle the multistate animations offer, rather than the simple 2 states transitions have.