Question

I am building a slideshow, and I’d like to include smooth (subpixel) image transitions involving sliding and resizing, like for example a Ken Burns effect.

I see that people use various techniques. I’d be interested to know which ones are considered the best approach today, and if any of these are just urban myths that actually bring no improvement:

• css transitions
• JavaScript requireanimationframe
• image embedded in a canvas element
• other?

Note: I undertand that some of these techniques are not supported in older browsers. My question is for thwe most recent versions (IE9, Firefox 5, etc.).

Answer 1

I think CSS transitions could be a good answer to the major parts of the effects you want.

CSS transitions are designed for changing smoothly between two states of an element.

For ken burns effect It could be accomplish by doing transitions of width on two pictures that are on absolute position for example.

Using Javascript to animate can be a bit laborious and if you want to manipulate dom on each frame it can be heavy for performance.

I also think canvas is not the best solutions because canvas element is not dynamically scalable without problem (performance particulary).