morph image using vaadin

Hello,

I am looking for a solution to the following problem:

I have a slider from 1 to 10. Depending on the selection a smiley either turns happy (10) or sad (1). Displaying the picture based on the number seems to be rather simple but is there a way to morph the image. Something like a transition effect?

Maybe I am overseeing a simple solution but I am new to Vaadin.

Thank you for your help.
Chris
 

Well, with JavaScript and HTML5 Canvas you can do rather fancy animations, so that would be the most expressive solution.

I suppose you could use CSS trickery to get such animation without need to start doing client-side coding. Googling a bit finds at least this question, which seems to be identical to yours.