Create animated logo

For your web project decided to make a series of animated logos. Just like does google for different events.

The task is essentially elementary (logos for 4 seasons):
a simple picture that displays the site logo and simple cyclic animation (such as wind, snowdrifts and snow, moving grass and the Bouncing bird, daisies and flying butterfly; falling yellow leaves)

Never face with animation. Here spent half the day reading various articles on animation in the web, did not understand which approach is easier to use: sprite animation javascript, canvas or svg.

Maybe I confuse warm with soft. But I don't even know in what direction to dig.
I would be very grateful for the links, recommendations on the subject or some other way to share the experience.

PS.: animated gifs and flash are not suitable.
October 8th 19 at 00:11
9 answers
October 8th 19 at 00:13
"a simple circular animation" still the GIF would have been better =) I do Not understand why such a simple problem to spend a lot of time.
October 8th 19 at 00:15
Why GIF is not suitable? GIF is just a universal cross-browser solution. Personally, I prefer to draw a GIF animation in Adobe Photoshop
October 8th 19 at 00:17
Recommend sprites. habrahabr.ru/post/130193/
Yeah, I've.
With the animation of the sprites a bit sorted out. Now I wonder how to create something like that tavmjong.free.fr/INKSCAPE/DRAWINGS/clock2.svg - Edwin59 commented on October 8th 19 at 00:20
Why so difficult, it's just the logo :) - Dagmar_Laki commented on October 8th 19 at 00:23
October 8th 19 at 00:19
Easier way to do this is to create in flash, if you have the skills and convert to HTML5 using labs.adobe.com/technologies/wallaby/. Accordingly here is the article — habrahabr.ru/post/115124/
October 8th 19 at 00:21
Just recently dismantled CSS3 animation — turns out it is fun to learn and write a simple animation in a couple of hours reading documentation and examples. The only negative — IE<9, and Opera while in flight.
October 8th 19 at 00:23
GIF is to come. If you need trucolor — then the composition of PNG + JS-animation. If IE8 do not care — then Canvas.
October 8th 19 at 00:25
All depends on having a transparent background and cycles. If the background is not transparent, it is better to move in the direction of gif. If you need some (e.g., event) cyclical or background transparent, use a png sprite and jQuery.spritely.
October 8th 19 at 00:27
Response anyone who offers GIF:
Because I want to continue to do more complex animations. And this task is just that to learn.
October 8th 19 at 00:29

Find more questions by tags CanvasAnimationJavaScriptLogos