Inspiration pour intégrateurs #19 : Les animations CSS3

Le monde des animations sur le web aura perdu beaucoup lors de la mort progressive du flash. Heureusement pour lui, HTML5 Canvas, les SVG et les animations CSS3 sont là pour lui permettre de renaitre de ses cendres ! Plus légères, profitant du GPU de votre ordinateur (si votre navigateur est suffisamment recent), elles permettent toutes les fantasies pour la création d'écrans de chargement (une autre chose que l'on avait perdue avec la disparition de flash, et qui reviens en force avec les applications Web).

Animations CSS3

Pour cet article de notre rendez-vous, je vous propose de vous pencher plus en avant sur le type d'animations du web moderne le plus simple à appréhender pour un intégrateur, les animations CSS3.

Je profite de cet article pour un petit sondage : que pensez-vous de ce mode de présentation, avec le pen directement intégré dans l'article ? Vous plaît-il ou bien préfériez-vous l'ancienne version, avec des miniatures pointant sur les pens ? Merci pour votre réponse dans les commentaires !

See the Pen Solar System by Bryan Jones (@bartuc) on CodePen.

 

See the Pen CSS 3d dots animation thing by Lucas Bebber (@lbebber) on CodePen.

 

See the Pen enHlL by YAN (@yanxv) on CodePen.

 

See the Pen IcGuw by Jelmer Smid (@jelmersmid) on CodePen.

 

See the Pen Block Animation Demo by snorpey (@snorpey) on CodePen.

 

See the Pen Battlefield 3 Loading Indicator by Gareth Weaver (@garethdweaver) on CodePen.

 

See the Pen Another CSS Animation by Nate Wiley (@natewiley) on CodePen.

 

See the Pen LunchBreak Sassing by Hugo Darby-Brown (@hugo) on CodePen.

 

See the Pen loader from http://letters-inc.jp/ by LegoMushroom (@sol0mka) on CodePen.

 

See the Pen DRAUGHT BEER by Hugo Groutel (@HugoGroutel) on CodePen.