[Résolu] Animation en CSS3 ?

Salades et loukoums chers Alsanautes,

j'ai une question qui tue : est-il possible de faire ça facilement : http://www.nicolas-hoffmann.net/bordel/animation.swf

Sans flash bien sûr. Idéalement, à coups d'animations CSS3 uniquement.
Idéalement… sur un ou plusieurs SVG (retina optimization FTW)

L'effet de "pop" sur le hello, ça je peux le faire avec une transition sur un scale, mais le premier effet, je vois pas de solution élégante et simple à froid.

Faut que ça marche sur des browsers correct : IE9/FF/Chrome/Safari/Safari Mobile. Si ça doit déconner sur mobile, je peux fallbacker en Gif animé ou même laisser en fixe.

Une idée ? Je sèche.

D'avance merci
Modifié par Nico3333fr (13 Jul 2014 - 15:13)

avec des pseudos utilisés comme des masques , tu peut faire ce genre de choses : http://codepen.io/gc-nomade/pen/xgpGb , après pour la compatibilité des animations, il n'y a que javascript qui va compenser.

Pour des bordures rectilignes, tu peut jouer avec des fond multiples : http://codepen.io/gc-nomade/pen/IGliC
Modifié par gc-nomade (06 May 2014 - 13:29)

Hello,

Y- a moyen à mon avis avec du SVG d'animer une ligne, jette un oeil à :
- http://lazylinepainter.info/
- http://jakearchibald.com/2013/animated-line-drawing-svg/

salut,
je ne sais pas si les animations SVG sont bien interprétées partout. Tu pourrais aussi passer par <canvas> si tu veux un truc un peu plus complexe que ce qu'a proposé gc-nomade.

Pour reprendre l'idée du SVG, le pen avec les bordures que j'ai mis en lien est inspiré de celui-ci : http://codepen.io/seanmccaffery/pen/xBpbG en SVG , pas forcement aussi complexe que l'on pourrait l'imaginer et surtout plus propre qu'une version CSS.

Pour la bulle , j'en ai refait un peu moins dans la rapidité que le premier en partant du petit triangle : http://codepen.io/gc-nomade/pen/bhxAL .
SVG est probablement la meilleure piste à suivre.
Cdt

gc-nomade a écrit :
SVG est probablement la meilleure piste à suivre.

Je suis d'accord.

Et à propos : chapeau bas pour ta réactivité à créer un code personnalisé en fonction des demandes. il faut être motivé ! Je trouve tes bulles css assez bien réussies.
Modifié par Olivier C (23 May 2014 - 08:10)

Oui, chapeau bas pour les suggestions et les pistes, ça assure

Je vais investiguer tout cela voir si ça colle bien à mon cas.

Merci beaucoup à tous et je vous tiens au courant d'ici qq jours.

Voila, le site en question est ici, merci encore pour votre aide : http://www.parentidesign.com/fr/