{"id":7482,"date":"2018-08-08T10:30:21","date_gmt":"2018-08-08T08:30:21","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=7482"},"modified":"2023-01-31T17:25:36","modified_gmt":"2023-01-31T16:25:36","slug":"animations-css","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/animations-css\/","title":{"rendered":"10 animations CSS pour dynamiser un site web"},"content":{"rendered":"<p>Les <strong>animations CSS<\/strong> permettent d&#8217;ajouter facilement du mouvement et une<a href=\"https:\/\/graphiste.com\/blog\/web-design-utiliser-animations\" target=\"_blank\" rel=\"noopener noreferrer\"> touche de dynamisme \u00e0 un site<\/a>.<\/p>\n<p>Pour vous d\u00e9marquer sur internet, il peut \u00eatre int\u00e9ressant d&#8217;ajouter des animations discr\u00e8tes pour rendre la navigation des internautes plus agr\u00e9able.<\/p>\n<p>En voici 10 \u00e0 essayer sans mod\u00e9ration dans vos projets de webdesign&nbsp;!<\/p>\n<blockquote><p>Besoin d&#8217;un web design pour animer le site de votre entreprise&nbsp;? Faites appel \u00e0 un webdesigner freelance disponible imm\u00e9diatement&nbsp;! D\u00e9posez votre annonce gratuitement sur <a href=\"https:\/\/graphiste.com\/#open-fast\" target=\"_blank\" rel=\"noopener noreferrer\">Graphiste.com<\/a>.<\/p><\/blockquote>\n<h2>Bulles<\/h2>\n<p>Des petites bulles qui traversent l&#8217;\u00e9cran de bas en haut&nbsp;: en voil\u00e0 une belle animation.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"LzdgOv\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/LzdgOv\"> Animated &#8211; SVG Bubbles<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Scrolling de souris<\/h2>\n<p>Invitez l&#8217;utilisateur \u00e0 scroller la page gr\u00e2ce \u00e0 cette animation toute simple repr\u00e9sentant une souris et sa molette.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"gGdJYo\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/gGdJYo\"> Animated &#8211; SVG Scrolling Mouse Icon<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Vol d&#8217;oiseaux<\/h2>\n<p>Envie d&#8217;\u00e9gayer une page avec des oiseaux qui traversent l&#8217;\u00e9cran&nbsp;? Cette animation CSS fera votre bonheur.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"RLebOY\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/RLebOY\"> Animated &#8211; SVG Birds<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Cercles de chargement<\/h2>\n<p>Ces cercles en mouvement qui forment presque une spirale seront parfaits pour marquer un temps de chargement &#8211; et compl\u00e8teront \u00e0 merveille <a href=\"https:\/\/graphiste.com\/blog\/loader-css\" target=\"_blank\" rel=\"noopener noreferrer\">notre s\u00e9lection de 10 loaders CSS<\/a>.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"bomWGK\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/bomWGK\"> Animated &#8211; SVG Loader<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Chute de neige<\/h2>\n<p>Pour donner une atmosph\u00e8re hivernale \u00e0 un site, quoi de mieux que quelques flocons de neige&nbsp;?<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"JrLJeb\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/JrLJeb\"> Animated &#8211; SVG Snow<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Pulsation<\/h2>\n<p>Pour dynamiser un texte, cet effet de pulsation est id\u00e9al (cliquez sur &#8220;Rerun&#8221; pour le voir).<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"pWLOQb\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/pWLOQb\"> Animated &#8211; SVG Pulse<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Surlignage dynamique<\/h2>\n<p>Cette animation permet de surligner un mot ou une phrase de mani\u00e8re \u00e9l\u00e9gante au passage de la souris. Dans le m\u00eame registre, jetez un \u0153il \u00e0 cette s\u00e9lection de <a href=\"https:\/\/graphiste.com\/blog\/30-animations-de-texte-pour-surprendre-vos-visiteurs\" target=\"_blank\" rel=\"noopener noreferrer\">30 animations de texte surprenantes<\/a>.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"XeEYyy\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/XeEYyy\"> Animated &#8211; Text Hover Effect<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Bouton avec rotation<\/h2>\n<p>Ce bouton (destin\u00e9 \u00e0 ouvrir un menu) est dot\u00e9 d&#8217;un bel effet de rotation (survolez-le avec la souris pour le d\u00e9clencher). De nombreuses autres animations CSS existent pour <a href=\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\" target=\"_blank\" rel=\"noopener noreferrer\">dynamiser vos boutons<\/a>.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"XeEYJV\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/XeEYJV\"> Animated &#8211; SVG Menu Button<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Fl\u00e8che en mouvement<\/h2>\n<p>La fl\u00e8che repr\u00e9sent\u00e9e sur ce bouton glisse sur la droite au passage du curseur, lui donnant un dynamisme certain.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"EwdmmP\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/EwdmmP\"> Animated &#8211; Button<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>Soulignage esth\u00e9tique<\/h2>\n<p>Cette derni\u00e8re <a href=\"https:\/\/graphiste.com\/blog\/tendance-animation-2022\">animation<\/a> CSS permet tout simplement de souligner du texte, mais avec fluidit\u00e9 et esth\u00e9tique, la ligne se formant en son milieu.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"VMEWrq\" data-user=\"matchboxhero\">See the Pen <a href=\"https:\/\/codepen.io\/matchboxhero\/pen\/VMEWrq\"> Animated &#8211; Menu Underline<\/a> by Steven Roberts (<a href=\"https:\/\/codepen.io\/matchboxhero\">@matchboxhero<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<blockquote><p>Lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/transitions-page-css\" target=\"_blank\" rel=\"noopener noreferrer\">Inspiration&nbsp;: 15 transitions CSS pour les pages de votre site<\/a><\/p><\/blockquote>\n<h2>Notre astuce pour cr\u00e9er des animations CSS originales<\/h2>\n<p>Vous avez, gr\u00e2ce \u00e0 ces exemples, d\u00e9j\u00e0 de bonnes bases pour ajouter des animations \u00e0 votre site.<\/p>\n<p>Si vous souhaitez ajouter des animations 100% personnalis\u00e9es aux couleurs de votre site, confiez un projet \u00e0 un <a href=\"https:\/\/graphiste.com\/categories\/webdesign\/users\">webdesigner freelance<\/a> sur Graphiste.com&nbsp;!<\/p>\n<p>D\u00e9posez un projet gratuitement sur la plateforme pour recevoir des propositions de webdesigners professionnels&nbsp;!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les animations CSS permettent d&#8217;ajouter facilement du mouvement et une touche de dynamisme \u00e0 un site. Pour vous d\u00e9marquer sur internet, il peut \u00eatre int\u00e9ressant d&#8217;ajouter des animations discr\u00e8tes pour rendre la navigation des internautes plus agr\u00e9able. En voici 10 \u00e0 essayer sans mod\u00e9ration dans vos projets de webdesign&nbsp;! Besoin d&#8217;un web design pour animer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":48907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-7482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>10 animations CSS pour dynamiser un site web - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Les animations CSS permettent d&#039;ajouter facilement du mouvement et une touche de dynamisme \u00e0 un site. Pour vous d\u00e9marquer sur internet, il peut \u00eatre\" \/>\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\/animations-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 animations CSS pour dynamiser un site web - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Les animations CSS permettent d&#039;ajouter facilement du mouvement et une touche de dynamisme \u00e0 un site. Pour vous d\u00e9marquer sur internet, il peut \u00eatre\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/animations-css\/\" \/>\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=\"2018-08-08T08:30:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-31T16:25:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png\" \/>\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\/png\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"10 animations CSS pour dynamiser un site web\",\"datePublished\":\"2018-08-08T08:30:21+00:00\",\"dateModified\":\"2023-01-31T16:25:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/\"},\"wordCount\":550,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png\",\"articleSection\":[\"HTML &amp; CSS\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/animations-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/\",\"url\":\"https:\/\/graphiste.com\/blog\/animations-css\/\",\"name\":\"10 animations CSS pour dynamiser un site web - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png\",\"datePublished\":\"2018-08-08T08:30:21+00:00\",\"dateModified\":\"2023-01-31T16:25:36+00:00\",\"description\":\"Les animations CSS permettent d'ajouter facilement du mouvement et une touche de dynamisme \u00e0 un site. Pour vous d\u00e9marquer sur internet, il peut \u00eatre\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/animations-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png\",\"width\":850,\"height\":423,\"caption\":\"Animations CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css\/#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\":\"HTML &amp; CSS\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/html-css\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"10 animations CSS pour dynamiser un site web\"}]},{\"@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":"10 animations CSS pour dynamiser un site web - Graphiste Blog","description":"Les animations CSS permettent d'ajouter facilement du mouvement et une touche de dynamisme \u00e0 un site. Pour vous d\u00e9marquer sur internet, il peut \u00eatre","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\/animations-css\/","og_locale":"fr_FR","og_type":"article","og_title":"10 animations CSS pour dynamiser un site web - Graphiste Blog","og_description":"Les animations CSS permettent d'ajouter facilement du mouvement et une touche de dynamisme \u00e0 un site. Pour vous d\u00e9marquer sur internet, il peut \u00eatre","og_url":"https:\/\/graphiste.com\/blog\/animations-css\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-08-08T08:30:21+00:00","article_modified_time":"2023-01-31T16:25:36+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png","type":"image\/png"}],"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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/animations-css\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/animations-css\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"10 animations CSS pour dynamiser un site web","datePublished":"2018-08-08T08:30:21+00:00","dateModified":"2023-01-31T16:25:36+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/animations-css\/"},"wordCount":550,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png","articleSection":["HTML &amp; CSS"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/animations-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/animations-css\/","url":"https:\/\/graphiste.com\/blog\/animations-css\/","name":"10 animations CSS pour dynamiser un site web - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png","datePublished":"2018-08-08T08:30:21+00:00","dateModified":"2023-01-31T16:25:36+00:00","description":"Les animations CSS permettent d'ajouter facilement du mouvement et une touche de dynamisme \u00e0 un site. Pour vous d\u00e9marquer sur internet, il peut \u00eatre","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/animations-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/animations-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/animations-css\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/animations-css.png","width":850,"height":423,"caption":"Animations CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/animations-css\/#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":"HTML &amp; CSS","item":"https:\/\/graphiste.com\/blog\/webdesign\/html-css\/"},{"@type":"ListItem","position":4,"name":"10 animations CSS pour dynamiser un site web"}]},{"@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\/7482","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=7482"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/7482\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/48907"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=7482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=7482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=7482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}