{"id":15398,"date":"2019-12-13T10:30:10","date_gmt":"2019-12-13T09:30:10","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=15398"},"modified":"2025-08-19T17:15:34","modified_gmt":"2025-08-19T15:15:34","slug":"web-design-guide-complet-animation","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/","title":{"rendered":"Web Design\u00a0: Le guide complet sur l&#8217;animation"},"content":{"rendered":"<p>Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019<a href=\"https:\/\/graphiste.com\/blog\/tendance-animation-2021\">animation<\/a> a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0 capter notre attention. Bien s\u00fbr, elle est toujours pr\u00e9sente dans les dessins anim\u00e9s, les films en<a href=\"https:\/\/graphiste.com\/blog\/meilleurs-outils-3d\" target=\"_blank\" rel=\"noopener noreferrer\"> 3D<\/a> ainsi que dans les jeux vid\u00e9os.<\/p>\n<p>Mais <a href=\"https:\/\/graphiste.com\/blog\/outils-faire-du-motion-design\">\u00e0 l\u2019heure du motion design<\/a> et d\u2019une attention qui devient de plus en plus difficile \u00e0 capturer chez les usagers, il est bon de faire un retour sur l\u2019histoire de cette pratique et de jeter un \u0153il \u00e0 ses diff\u00e9rentes utilisations aujourd\u2019hui pour la mettre <strong>au service de vos besoins.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>Une discipline mill\u00e9naire<\/h2>\n<p>Les plus anciennes tentatives de recr\u00e9er le mouvement en dessin remonte aux peintures rupestres pal\u00e9olithiques o\u00f9 les animaux sont souvent reproduits avec plusieurs jambes en positions superpos\u00e9es. Il a \u00e9t\u00e9 suppos\u00e9 que ces images simulaient le mouvement \u00e0 la lumi\u00e8re tremblante des flammes d\u2019une torche illuminant par saccades certaines parties du mur tour \u00e0 tour.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-15405\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/chauvet-1.jpg\" alt=\"\" width=\"445\" height=\"335\" \/><\/p>\n<p>Des fouilles arch\u00e9ologiques ont par ailleurs exhum\u00e9 de petits disques trou\u00e9s en leur centre, dont les dessins sur leurs faces ont \u00e9t\u00e9 admis comme les premiers thaumatropes, cr\u00e9ant l\u2019illusion de motion quand ils sont en rotation.<\/p>\n<p>Enfin, entre le dernier mill\u00e9naire avant notre \u00e8re et 900 en Asie sont \u00e9galement apparus les ombres chinoises, qui n\u2019ont atteint l\u2019Europe qu\u2019au 17\u00e8me si\u00e8cle. Des exemples parmi tant d\u2019autres qui prouvent que la recherche du mouvement remonte \u00e0 des temps imm\u00e9moriaux.<\/p>\n<p>&nbsp;<\/p>\n<h2>L\u2019\u00e8re de la projection<\/h2>\n<p>Apr\u00e8s l\u2019invention au cours du 19\u00e8me si\u00e8cle du thaumatrope et d\u2019objets tels que le Ph\u00e9nakisticope, du flip book (ou folioscope) ou du Praxinoscope invent\u00e9 par le Fran\u00e7ais Charles-\u00c9mile Reynaud, c\u2019est ce dernier qui va le premier projeter son \u00ab\u00a0Th\u00e9\u00e2tre optique\u00a0\u00bb avec notamment la sayn\u00e8te Pauvre Pierrot que vous avez peut-\u00eatre eu la chance de visionner.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-15404\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/Phenakisticope-e1576226775975.jpg\" alt=\"\" width=\"650\" height=\"592\" \/><\/p>\n<p>Ce sont d\u2019autres fran\u00e7ais, les fr\u00e8res lumi\u00e8res, qui inventeront le Cin\u00e9matographe en 1895. C\u2019est quelques ann\u00e9es plus tard que les \u00ab\u00a0dessins\u00a0anim\u00e9s\u00a0\u00bb au sens le plus litt\u00e9ral du terme, apparaissent. Ces tr\u00e8s courts films \u00e9taient en noir et blanc aux alentours de 1898 mais en couleur aux alentours de 1900.<\/p>\n<p>C\u2019est \u00c9mile Cohl, un fran\u00e7ais (encore un\u00a0! )\u00a0 qui sera le premier \u00e0 utiliser des techniques d\u2019animation traditionnelles telles qu\u2019on les conna\u00eet aujourd\u2019hui avec Fantasmagorie, en 1908. Chaque image du film a \u00e9t\u00e9 dessin\u00e9e sur papier puis transpos\u00e9s sur un n\u00e9gatif de film, ce qui donne \u00e0 l\u2019image une impression de tableau noir \u00e0 la craie.<\/p>\n<p>En 1919, F\u00e9lix le chat est invent\u00e9 par Otto Messmer de Pat Sullivan Studios. Ce sera le premier cartoon a \u00eatre commercialis\u00e9. En 1924-1928 le son fait son apparition, Et au d\u00e9but des ann\u00e9es 30 Mickey entre sur le devant de la sc\u00e8ne pour avoir la renomm\u00e9e qu\u2019on lui conna\u00eet aujourd\u2019hui.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;:\u00a0<a href=\"https:\/\/graphiste.com\/blog\/ui-ux-principes-jouer-motion-design\">UI\/UX\u00a0: 8 principes pour jouer sur le Motion Design<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Quelles sont les techniques d\u2019animation utilis\u00e9es aujourd\u2019hui\u00a0?<\/h2>\n<h4>Vid\u00e9os explicatives<\/h4>\n<p>Souvent r\u00e9alis\u00e9es en motion design, ces courtes <a href=\"https:\/\/graphiste.com\/blog\/montage-video-erreurs-a-eviter\" target=\"_blank\" rel=\"noopener noreferrer\">vid\u00e9os<\/a> peuvent s\u2019appliquer pour tous types de situations\u00a0: pr\u00e9sentations d\u2019un produit, formation professionnelle, p\u00e9dagogie, vulgarisation scientifique\u2026<\/p>\n<blockquote><p>Elles donnent souvent dans un langage accessible et compr\u00e9hensible l\u2019explication de notions plus ou moins compliqu\u00e9es dans une ambiance accueillante et chaleureuse.<\/p><\/blockquote>\n<p><strong> Seul hic de cette pratique\u00a0:<\/strong> originale un temps, elle a tellement \u00e9t\u00e9 sollicit\u00e9e qu\u2019elle en para\u00eet aujourd\u2019hui quelque peu banale.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/optimiser-video-facebook\">Comment optimiser vos vid\u00e9os pour Facebook&nbsp;?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h4>Chargement des pages<\/h4>\n<p>Connaissez-vous beaucoup de gens qui aiment attendre\u00a0? Moi non plus.<\/p>\n<p>Une animation sur votre <a href=\"https:\/\/graphiste.com\/blog\/7-landing-page-performante\" target=\"_blank\" rel=\"noopener noreferrer\">page de chargement<\/a> peut vous aider \u00e0 faire patienter les impatients tout en les divertissant pour calmer leur frustration.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-15403\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/giphy.gif\" alt=\"animation gif loading chargement page website\" width=\"960\" height=\"540\" \/><\/p>\n<p>Une occasion de plus de montrer la personnalit\u00e9 de votre entreprise et de retenir vos visiteurs en les faisant sourire, r\u00eavasser ou pourquoi pas les \u00e9mouvoir\u00a0?<\/p>\n<p>&nbsp;<\/p>\n<h4>Transitions<\/h4>\n<p>Rien n\u2019est plus \u00e9nervant qu\u2019une fen\u00eatre qui vous saute \u00e0 la figure sans pr\u00e9venir.<\/p>\n<p>Les <a href=\"https:\/\/graphiste.com\/blog\/web-design-utiliser-animations\" target=\"_blank\" rel=\"noopener noreferrer\">animations de transition<\/a> <em>(glissement, r\u00e9tr\u00e9cissement, d\u00e9grad\u00e9s\u2026)<\/em> vous aideront \u00e0 pallier \u00e0 cet \u00e9cueil tout en favorisant l\u2019immersion de votre utilisateur.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-8938\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/micro-interaction-web.gif\" alt=\"\" width=\"640\" height=\"397\" \/><\/p>\n<p>N\u2019avez-vous pas envie de continuer \u00e0 scroller sur un site o\u00f9 les \u00e9l\u00e9ments apparaissent au fur et \u00e0 mesure de mani\u00e8re gracieuse et \u00e9l\u00e9gante\u00a0? Retranscrivez cette exp\u00e9rience pour vos visiteurs.<\/p>\n<p>&nbsp;<\/p>\n<h4>Micro-interactions<\/h4>\n<p>Parfois, de petites choses toutes b\u00eates permettent d\u2019am\u00e9liorer l\u2019exp\u00e9rience utilisateur tout en vous faisant gagner de l\u2019argent.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-13998\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/burger-close-menu-micro-interaction-animated-tranmautritam.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/p>\n<p>Prenez le syst\u00e8me de pourboire de<strong> l\u2019application Deliveroo\u00a0<\/strong>: \u00e0 chaque euro ajout\u00e9, un petit emotic\u00f4ne sourit de plus en plus et rayonne litt\u00e9ralement de joie. \u00c7a peut para\u00eetre accessoire, mais je laisse toujours un pourboire gr\u00e2ce \u00e0 ce petit d\u00e9tail.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\">Comment cr\u00e9er une micro-interaction efficace&nbsp;?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h4>Vid\u00e9os sur les r\u00e9seaux sociaux (publicitaires\u2026 ou pas\u00a0!)<\/h4>\n<p>Mais vous n\u2019avez pas toujours besoin d\u2019un objectif pour r\u00e9aliser une animation. Apr\u00e8s tout, n\u2019\u00e9taient-elles pas \u00e0 l\u2019origine destin\u00e9es \u00e0 nous divertir\u00a0?<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-13590\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/Capture-d\u2019\u00e9cran-2019-10-02-\u00e0-11.33.07-e1570008834971.png\" alt=\"inspiration de banni\u00e8re format video creative\" width=\"650\" height=\"192\" \/><\/p>\n<p>Cr\u00e9er une courte vid\u00e9o pour les r\u00e9seaux sociaux peut booster vos interactions, g\u00e9n\u00e9rer des partages et donc am\u00e9liorer <strong>votre image de marque.<\/strong><\/p>\n<p>Vous pourrez exp\u00e9rimenter cela pendant les f\u00eates \u00e0 venir, surtout qu\u2019un simple post sur les r\u00e9seaux passerait s\u00fbrement inaper\u00e7u dans la masse de messages qu\u2019il y a \u00e0 venir.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/idees-creatives-posts-reseaux-sociaux\">10 id\u00e9es cr\u00e9atives pour vos prochains posts sur les r\u00e9seaux sociaux<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h4>Logos anim\u00e9s<\/h4>\n<p>Si les puristes vous diront qu\u2019il ne faut jamais changer son logo, les experts en branding attestent que <a href=\"https:\/\/graphiste.com\/blog\/moderniser-logo\" target=\"_blank\" rel=\"noopener noreferrer\">les animations<\/a> font exception.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-15133\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/11\/logo-design-trends-animated-cartoony-logos-example-3.gif\" alt=\"\" width=\"405\" height=\"304\" \/><\/p>\n<p>Plus efficaces que les logos fixes, les logos anim\u00e9s sont \u00e0 essayer si vous en avez l\u2019occasion. Inspire-vous avec notre s\u00e9lection d&#8217;<a href=\"https:\/\/graphiste.com\/blog\/animations-css\">animation en CSS<\/a> pour votre site web.<\/p>\n<p>&nbsp;<\/p>\n<p>Besoin d\u2019animations pour votre entreprise\u00a0? Faites appel <a href=\"https:\/\/graphiste.com\/\">\u00e0 un graphiste sur graphiste.com\u00a0<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019animation a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0 capter notre attention. Bien s\u00fbr, elle est toujours pr\u00e9sente dans les dessins anim\u00e9s, les films en 3D ainsi que dans les jeux vid\u00e9os. Mais \u00e0 l\u2019heure du motion design et d\u2019une attention [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15408,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-15398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Design\u00a0: Le guide complet sur l&#039;animation - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019animation a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design\u00a0: Le guide complet sur l&#039;animation - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019animation a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-13T09:30:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-19T15:15:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Laura Michaud\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Michaud\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Web Design\u00a0: Le guide complet sur l&#8217;animation\",\"datePublished\":\"2019-12-13T09:30:10+00:00\",\"dateModified\":\"2025-08-19T15:15:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/\"},\"wordCount\":1027,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/\",\"url\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/\",\"name\":\"Web Design\u00a0: Le guide complet sur l'animation - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg\",\"datePublished\":\"2019-12-13T09:30:10+00:00\",\"dateModified\":\"2025-08-19T15:15:34+00:00\",\"description\":\"Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019animation a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Design\u00a0: Le guide complet sur l&#8217;animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\",\"name\":\"Laura Michaud\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"caption\":\"Laura Michaud\"},\"description\":\"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/michaudlaura\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/laura\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Design\u00a0: Le guide complet sur l'animation - Graphiste Blog","description":"Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019animation a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/","og_locale":"fr_FR","og_type":"article","og_title":"Web Design\u00a0: Le guide complet sur l'animation - Graphiste Blog","og_description":"Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019animation a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0","og_url":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2019-12-13T09:30:10+00:00","article_modified_time":"2025-08-19T15:15:34+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg","type":"image\/jpeg"}],"author":"Laura Michaud","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Laura Michaud","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Web Design\u00a0: Le guide complet sur l&#8217;animation","datePublished":"2019-12-13T09:30:10+00:00","dateModified":"2025-08-19T15:15:34+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/"},"wordCount":1027,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg","articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/","url":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/","name":"Web Design\u00a0: Le guide complet sur l'animation - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg","datePublished":"2019-12-13T09:30:10+00:00","dateModified":"2025-08-19T15:15:34+00:00","description":"Alors que ses balbutiements remontent au pal\u00e9olithique, l\u2019animation a aujourd\u2019hui investi notre quotidien \u00e0 l\u2019\u00e8re du digital et des \u00e9crans qui cherchent \u00e0","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/12\/une-graphiste-guide-complet-animation-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Web Design\u00a0: Le guide complet sur l&#8217;animation"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2","name":"Laura Michaud","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","caption":"Laura Michaud"},"description":"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.","sameAs":["https:\/\/www.linkedin.com\/in\/michaudlaura\/"],"url":"https:\/\/graphiste.com\/blog\/author\/laura\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/15398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=15398"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/15398\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/15408"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=15398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=15398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=15398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}