{"id":11292,"date":"2019-05-31T10:30:05","date_gmt":"2019-05-31T08:30:05","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=11292"},"modified":"2025-08-20T17:17:18","modified_gmt":"2025-08-20T15:17:18","slug":"animations-css-bordures","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/","title":{"rendered":"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments"},"content":{"rendered":"<p>Les animations CSS sont id\u00e9ales pour <a href=\"https:\/\/graphiste.com\/blog\/animations-css\" target=\"_blank\" rel=\"noopener noreferrer\">dynamiser votre site web<\/a> et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits&nbsp;: sur <a href=\"https:\/\/graphiste.com\/blog\/30-animations-de-texte-pour-surprendre-vos-visiteurs\" target=\"_blank\" rel=\"noopener noreferrer\">votre texte<\/a>, vos <a href=\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\" target=\"_blank\" rel=\"noopener noreferrer\">call-to-action<\/a>, les <a href=\"https:\/\/graphiste.com\/blog\/transitions-page-css\" target=\"_blank\" rel=\"noopener noreferrer\">transitions entre vos pages<\/a>, le <a href=\"https:\/\/graphiste.com\/blog\/loader-css\" target=\"_blank\" rel=\"noopener noreferrer\">loader<\/a>, etc.<\/p>\n<p>Dans cet article, vous allez d\u00e9couvrir 12 superbes <a href=\"https:\/\/graphiste.com\/blog\/tendance-animation-2021\">animations<\/a> de bordure que vous pourrez appliquer \u00e0 vos boutons, mais aussi \u00e0 vos images ou conteneurs.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/uiswarup\/pen\/RBByzW\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e aux quatre coins<\/a><\/h2>\n<p>Un trait lumineux qui appara\u00eet aux quatre coins de votre \u00e9l\u00e9ment, voil\u00e0 de quoi attirer l&#8217;oeil de vos visiteurs. Cette animation CSS trouvera sa place sur un call-to-action, mais attention \u00e0 l&#8217;utiliser avec parcimonie.<\/p>\n<p>Une animation qui tourne en continu peut vite devenir aga\u00e7ante et perturber la lecture du texte alentour.<\/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=\"RBByzW\" data-user=\"uiswarup\">See the Pen <a href=\"https:\/\/codepen.io\/uiswarup\/pen\/RBByzW\"> border-animation-css<\/a> by Swarup Kumar Kuila (<a href=\"https:\/\/codepen.io\/uiswarup\">@uiswarup<\/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><a href=\"https:\/\/codepen.io\/flatking\/pen\/oBxKPx\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e avec apparition de call-to-action<\/a><\/h2>\n<p>Cette animation CSS laisse appara\u00eetre un call-to-action avec une fine bordure. La transformation du trait sous le titre est ing\u00e9nieuse et peut venir renforcer votre image professionnelle.<\/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=\"oBxKPx\" data-user=\"flatking\">See the Pen <a href=\"https:\/\/codepen.io\/flatking\/pen\/oBxKPx\"> Draw borders from center!<\/a> by Ben Sheppard (<a href=\"https:\/\/codepen.io\/flatking\">@flatking<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/daviddarnes\/pen\/oEEqdp\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e avec \u00e9dition du texte<\/a><\/h2>\n<p>D&#8217;accord, cette animation est quelque peu originale mais elle saura divertir vos utilisateurs. Vous verrez qu&#8217;en \u00e9ditant le texte la bordure int\u00e9rieure s&#8217;adapte.<\/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=\"oEEqdp\" data-user=\"daviddarnes\">See the Pen <a href=\"https:\/\/codepen.io\/daviddarnes\/pen\/oEEqdp\"> Reddit border inset challenge<\/a> by David Darnes (<a href=\"https:\/\/codepen.io\/daviddarnes\">@daviddarnes<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/exah\/pen\/Lqyem\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e en gradient<\/a><\/h2>\n<p>Le gradient est tendance, alors pourquoi ne pas l&#8217;int\u00e9grer \u00e0 vos animations CSS&nbsp;? Celle-ci est particuli\u00e8rement int\u00e9ressante puisque vous pouvez choisir entre une bordure fixe ou anim\u00e9e. Dans ce dernier cas, \u00e9vitez une vitesse trop rapide qui donnerai le tournis \u00e0 vos visiteurs.<\/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=\"mdEBZw\" data-user=\"exah\">See the Pen <a href=\"https:\/\/codepen.io\/exah\/pen\/mdEBZw\"> Border-gradient mixin<\/a> by John Grishin (<a href=\"https:\/\/codepen.io\/exah\">@exah<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/coreybullman\/pen\/yJoZVQ\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e avec changement de couleur<\/a><\/h2>\n<p>Simple mais efficace, voil\u00e0 comment r\u00e9sumer cette animation CSS. Le choix des couleurs est adapt\u00e9 au message que veux faire passer le bouton, c&#8217;est donc un bon exemple \u00e0 suivre&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=\"yJoeVQ\" data-user=\"coreybullman\">See the Pen <a href=\"https:\/\/codepen.io\/coreybullman\/pen\/yJoeVQ\"> SVG Ellipse Border Animation<\/a> by Corey Bullman (<a href=\"https:\/\/codepen.io\/coreybullman\">@coreybullman<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/joeashworth\/pen\/PXvRzb\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e avec arrondi<\/a><\/h2>\n<p>Ici ce n&#8217;est pas que la bordure qui s&#8217;anime, c&#8217;est \u00e9galement son ombre. Regardez plus bas pour voir la feuille s&#8217;arrondir.<\/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=\"PXvRzb\" data-user=\"joeashworth\">See the Pen <a href=\"https:\/\/codepen.io\/joeashworth\/pen\/PXvRzb\"> rounded side border radius<\/a> by Joe (<a href=\"https:\/\/codepen.io\/joeashworth\">@joeashworth<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/neutraltone\/pen\/pqmxjb\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure gauche anim\u00e9e et color\u00e9e<\/a><\/h2>\n<p>Parfois les animations les plus discr\u00e8tes sont les meilleures. L&#8217;apparition de cette fine bordure color\u00e9e ne d\u00e9range absolument pas la lecture, elle met au contraire en valeur le conteneur.<\/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=\"pqmxjb\" data-user=\"neutraltone\">See the Pen <a href=\"https:\/\/codepen.io\/neutraltone\/pen\/pqmxjb\"> Card with animated left border on hover<\/a> by Tony Phipps (<a href=\"https:\/\/codepen.io\/neutraltone\">@neutraltone<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/realjameal\/pen\/jPxXGY\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e avec fermeture verticale<\/a><\/h2>\n<p>Avez-vous remarqu\u00e9 que plus la bordure est fine, plus le r\u00e9sultat renvoie une image professionnelle, voire de luxe&nbsp;? La couleur dor\u00e9e et la vitesse adapt\u00e9e accentuent encore plus cet effet.<\/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=\"jPxXGY\" data-user=\"realjameal\">See the Pen <a href=\"https:\/\/codepen.io\/realjameal\/pen\/jPxXGY\"> Animated border tracing<\/a> by Jameal G (<a href=\"https:\/\/codepen.io\/realjameal\">@realjameal<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/antares\/pen\/myPVPW\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e avec fermeture horizontale<\/a><\/h2>\n<p>Pour faire comprendre qu&#8217;un texte est en fait un bouton permettant une action, il est essentiel de lui donner une bordure.<\/p>\n<p>L&#8217;apparition de celle-ci au survol de la souris est un choix risqu\u00e9, mais en respectant les r\u00e8gles de l&#8217;UX Writing les utilisateurs n&#8217;auront aucun mal \u00e0 comprendre qu&#8217;il s&#8217;agit d&#8217;un call-to-action.<\/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=\"myPVPW\" data-user=\"antares\">See the Pen <a href=\"https:\/\/codepen.io\/antares\/pen\/myPVPW\"> Double border animation<\/a> by Antares (<a href=\"https:\/\/codepen.io\/antares\">@antares<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/felipevegners\/pen\/LePJMz\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e \u00e9largie<\/a><\/h2>\n<p>Faites comprendre \u00e0 votre utilisateur qu&#8217;il s&#8217;appr\u00eate \u00e0 cliquer sur un bouton en \u00e9largissant la bordure de ce dernier. Cette animation CSS peut facilement \u00eatre personnalis\u00e9e pour correspondre \u00e0 votre charte graphique.<\/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=\"LePJMz\" data-user=\"felipevegners\">See the Pen <a href=\"https:\/\/codepen.io\/felipevegners\/pen\/LePJMz\"> Border Animation CSS (Box-Shadow)<\/a> by Felipe Vegners (<a href=\"https:\/\/codepen.io\/felipevegners\">@felipevegners<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/fdaniel\/pen\/BpMLEW\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e g\u00e9om\u00e9trique<\/a><\/h2>\n<p>Cette animation CSS est id\u00e9ale pour les sites web d&#8217;architecture ou pour apporter une touche de cr\u00e9ativit\u00e9 surprenante&nbsp;\ud83d\ude42<\/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=\"BpMLEW\" data-user=\"lycanone\">See the Pen <a href=\"https:\/\/codepen.io\/lycanone\/pen\/BpMLEW\"> CSS Border Animation<\/a> by LycanOne (<a href=\"https:\/\/codepen.io\/lycanone\">@lycanone<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2><a href=\"https:\/\/codepen.io\/nedimtas\/pen\/GxWYGy\" target=\"_blank\" rel=\"noopener noreferrer\">Bordure anim\u00e9e avec apparition et disparition<\/a><\/h2>\n<p>Nous terminons cette s\u00e9lection par cette simple animation CSS qui laisse appara\u00eetre puis dispara\u00eetre la bordure de l&#8217;\u00e9l\u00e9ment.<\/p>\n<p>Comme pour la premi\u00e8re, elle est parfaite pour attirer le regard, surtout si la vitesse de l&#8217;animation n&#8217;est pas trop rapide.<\/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=\"GxWYGy\" data-user=\"nedimtas\">See the Pen <a href=\"https:\/\/codepen.io\/nedimtas\/pen\/GxWYGy\"> Css Border Animation<\/a> by Nedim (<a href=\"https:\/\/codepen.io\/nedimtas\">@nedimtas<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/web-design-guide-complet-animation\">Web Design&nbsp;: Le guide complet sur l&#8217;animation<\/a><\/p><\/blockquote>\n<h2>Notre astuce pour cr\u00e9er une bordure en CSS<\/h2>\n<p>Pour cr\u00e9er des bordures en CSS uniques pour votre site, vous pouvez vous inspirer de ces ressources et les adapter au style de votre site internet.<\/p>\n<p>Vous pouvez \u00e9galement faire appel \u00e0 un <a href=\"https:\/\/graphiste.com\/categories\/webdesign\/users\">webdesigner freelance<\/a> sur Graphiste.com en d\u00e9posant un projet gratuitement&nbsp;! Comparez les propositions des freelances et s\u00e9lectionnez le prestataire avec la meilleure proposition.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les animations CSS sont id\u00e9ales pour dynamiser votre site web et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits&nbsp;: sur votre texte, vos call-to-action, les transitions entre vos pages, le loader, etc. Dans cet article, vous allez d\u00e9couvrir 12 superbes animations de bordure que vous pourrez appliquer \u00e0 vos boutons, mais aussi \u00e0 vos images ou [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":11303,"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-11292","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>12 animations CSS pour les bordures de vos \u00e9l\u00e9ments - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Les animations CSS sont id\u00e9ales pour dynamiser votre site web et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits : sur votre texte, vos call-to-action, les\" \/>\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-bordures\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Les animations CSS sont id\u00e9ales pour dynamiser votre site web et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits : sur votre texte, vos call-to-action, les\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/\" \/>\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-05-31T08:30:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:17:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-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=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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-bordures\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments\",\"datePublished\":\"2019-05-31T08:30:05+00:00\",\"dateModified\":\"2025-08-20T15:17:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/\"},\"wordCount\":800,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg\",\"articleSection\":[\"HTML &amp; CSS\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/\",\"url\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/\",\"name\":\"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg\",\"datePublished\":\"2019-05-31T08:30:05+00:00\",\"dateModified\":\"2025-08-20T15:17:18+00:00\",\"description\":\"Les animations CSS sont id\u00e9ales pour dynamiser votre site web et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits : sur votre texte, vos call-to-action, les\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"Animation CSS bordure\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#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\":\"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments\"}]},{\"@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\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments - Graphiste Blog","description":"Les animations CSS sont id\u00e9ales pour dynamiser votre site web et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits : sur votre texte, vos call-to-action, les","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-bordures\/","og_locale":"fr_FR","og_type":"article","og_title":"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments - Graphiste Blog","og_description":"Les animations CSS sont id\u00e9ales pour dynamiser votre site web et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits : sur votre texte, vos call-to-action, les","og_url":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2019-05-31T08:30:05+00:00","article_modified_time":"2025-08-20T15:17:18+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg","type":"image\/jpeg"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments","datePublished":"2019-05-31T08:30:05+00:00","dateModified":"2025-08-20T15:17:18+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/"},"wordCount":800,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg","articleSection":["HTML &amp; CSS"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/animations-css-bordures\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/","url":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/","name":"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg","datePublished":"2019-05-31T08:30:05+00:00","dateModified":"2025-08-20T15:17:18+00:00","description":"Les animations CSS sont id\u00e9ales pour dynamiser votre site web et peuvent \u00eatre appliqu\u00e9es \u00e0 de nombreux endroits : sur votre texte, vos call-to-action, les","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/animations-css-bordures\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/05\/animation-css-bordure-1.jpg","width":850,"height":423,"caption":"Animation CSS bordure"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/animations-css-bordures\/#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":"12 animations CSS pour les bordures de vos \u00e9l\u00e9ments"}]},{"@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\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/11292","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=11292"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/11292\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/11303"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=11292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=11292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=11292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}