Quelle technique pour une animation?

caema
Les bases HTML/CSS

Bonjour à toutes et tous,

Je suis actuellement en train de bosser sur un nouveau portfolio, et j'ai décidé d'en profiter pour intégrer quelques "animations".

J'ai un dessin vectoriel d'un appareil photo polaroid, et une photo polaroid.
Je souhaite réaliser quelque chose d'assez simple: à l'état 0, il y a juste l'appareil photo polaroid, et au dernier état, l'appareil photo polaroid et la photo qui en est donc sortie.
Le but est donc de créer une animation de la photo, qui sort de l'appareil.

J'ai des doutes quand à la technique la plus judicieuse à utiliser: un gif? du svg? les animations CSS3?
En ce qui concerne le svg et les animations CSS3, j'ai peu de connaissances, mais si besoin, je ne vois pas d'inconvénient à apprendre ;-)

Voilà, d'avance merci pour les infos que vous pourrez m'apporter

4 réponses

caema
Auteur
Réponse acceptée

Pas de maintenabilité spécifique ici, c'est juste pour illustrer mon future portfolio.
Bon, va falloir que je me mette au SVG alors.. Parce que j'ai regardé vite fait le tuto de Graph sur le SVG, et ça ne m'aide pas vraiment à voir plus clair dans la manière de réaliser cette animation spécifique.

Si vous avez des sources sur le sujet, je suis preneuse donc ;-)

Merci!

Anthoo
Réponse acceptée

L'animation a l'air plutôt simple, si j'ai bien compris c'est juste une translation verticale de la photo. Dans un premier temps, je ferais le vecto sous logiciel type Illustrator, puis je l'exporterais en SVG. Ensuite il n'y a plus qu'à trouver l'élément path qui représente la photographie et lui appliquer l'animation SMIL.

Pour les sources, je conseille de lire toute la documentation fournie par Sara Soueidan, je pense que c'est une des personnes les plus calées sur le sujet, et déjà auteur d'une tonne d'articles (guide complet sur les animations SVG : http://css-tricks.com/guide-svg-animations-smil/).

caema
Auteur
Réponse acceptée

Merci pour le partage, je m'y mets dès à présent.
Bonne après midi à vous tous!

Anthoo

Perso j'aurais tendance à utiliser du SVG ici, qui sera plus souple à éditer qu'un gif et plus riche en possibilités qu'avec du CSS3. Après, les 3 conviennent à ce que tu veux faire, donc la seule chose à laquelle il faut penser, c'est est-ce que cette animation nécessitera une maintenabilité particulière ? Si oui, alors je dirais SVG, sinon, peu importe.