{"id":2412,"date":"2014-01-15T08:54:19","date_gmt":"2014-01-15T07:54:19","guid":{"rendered":"http:\/\/codeur.com\/blog\/?p=2412"},"modified":"2025-08-28T12:28:03","modified_gmt":"2025-08-28T10:28:03","slug":"10-animation-css","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/10-animation-css\/","title":{"rendered":"9 ressources pour cr\u00e9er des animations CSS"},"content":{"rendered":"<p>Cr\u00e9er des animations CSS n&#8217;est pas t\u00e2che ais\u00e9e lorsqu&#8217;on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C&#8217;est pourquoi il existe de nombreux sites qui vous permettent de copier directement l&#8217;animation que vous souhaitez dans votre style, ou m\u00eame de cr\u00e9er votre animation personnalis\u00e9e gr\u00e2ce \u00e0 une interface graphique.<br \/>\nNous avons s\u00e9lectionn\u00e9 pour vous 9 ressources qui vous aideront \u00e0 g\u00e9rer vos animations CSS.<\/p>\n<h2>Animate<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-38484\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animate-1.jpg\" alt=\"Animate.css\" width=\"700\" height=\"338\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animate-1.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animate-1-300x145.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animate-1-370x179.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animate-1-270x130.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animate-1-570x275.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\nComme son nom l&#8217;indique, <a href=\"https:\/\/daneden.me\/animate\/\" target=\"_blank\" rel=\"noopener noreferrer\">Animate<\/a> vous propose tous types d&#8217;animations CSS&nbsp;: rebonds, fondus, clignotements, zooms, secousses, rotations&#8230; Il y en a pour tous les go\u00fbts&nbsp;! Son interface tr\u00e8s claire vous permet de s\u00e9lectionner l&#8217;animation que vous souhaitez et de la visualiser imm\u00e9diatement, gr\u00e2ce \u00e0 l&#8217;animation du logo du site.<\/p>\n<h2>Animista<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-38485\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animista.jpg\" alt=\"Animista cr\u00e9ation animations CSS\" width=\"700\" height=\"320\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animista.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animista-300x137.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animista-370x169.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animista-270x123.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animista-570x261.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<a href=\"https:\/\/animista.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Animista<\/a> est une bibilioth\u00e8que d&#8217;animations CSS, qui vous permet de les visualiser et de les ajuster pour obtenir votre animation personnalis\u00e9e.<\/p>\n<h2>Ceaser<\/h2>\n<p><img decoding=\"async\" class=\"size-full wp-image-2418 aligncenter\" src=\"https:\/\/codeur.com\/blog\/wp-content\/uploads\/2014\/01\/Ceaser.jpg\" alt=\"Ceaser\" width=\"700\" height=\"381\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/Ceaser.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/Ceaser-300x163.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/Ceaser-370x201.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/Ceaser-270x147.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/Ceaser-570x310.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\nTr\u00e8s simple \u00e0 prendre en main, <a title=\"ceaser\" href=\"http:\/\/matthewlein.com\/ceaser\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ceaser<\/a> vous permet de cr\u00e9er pr\u00e9cis\u00e9ment l&#8217;animation CSS que vous souhaitez.<\/p>\n<h2>CSS3 Animation Cheat Sheet<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-38486\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/css3.jpg\" alt=\"CSS3 Animate Sheet animations CSS\" width=\"700\" height=\"380\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/css3.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/css3-300x163.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/css3-370x201.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/css3-270x147.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/css3-570x309.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<a href=\"http:\/\/www.justinaguilar.com\/animations\/index.html#\" target=\"_blank\" rel=\"noopener noreferrer\">CSS3 Animation Cheat Sheet<\/a> est un outil d&#8217;animations CSS3 tr\u00e8s simple d&#8217;utilisation. Ajoutez la feuille de style \u00e0 votre site, choisissez votre animation et appliquez la classe CSS correspodante \u00e0 l&#8217;\u00e9l\u00e9ment que vous souhaitez animer. Un jeu d&#8217;enfants&nbsp;!<\/p>\n<h2>Mantra<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-38488\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/mantra.jpg\" alt=\"Mantra animations CSS\" width=\"700\" height=\"338\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/mantra.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/mantra-300x145.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/mantra-370x179.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/mantra-270x130.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/mantra-570x275.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<a href=\"https:\/\/jeremyckahn.github.io\/mantra\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mantra<\/a> est un outil d&#8217;\u00e9dition d&#8217;animations CSS. Son interface permet d&#8217;ajouter, supprimer, modifier chaque plan d&#8217;une animation, vous permettant d&#8217;obtenir un r\u00e9sultat pr\u00e9cis.<\/p>\n<h2>Spinkit<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-38489 size-full\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/spinkit-1.jpg\" alt=\"Spinkit animations CSS chargement\" width=\"700\" height=\"337\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/spinkit-1.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/spinkit-1-300x144.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/spinkit-1-370x178.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/spinkit-1-270x130.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/spinkit-1-570x274.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<a href=\"https:\/\/tobiasahlin.com\/spinkit\/\" target=\"_blank\" rel=\"noopener noreferrer\">SpinKit<\/a>\u00a0vous propose une librairie d\u2019animation de chargement en CSS, fluides et facilement personnalisables.<\/p>\n<h2>Stylie<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-38490\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/stylie-1.jpg\" alt=\"Stylie animations CSS\" width=\"700\" height=\"342\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/stylie-1.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/stylie-1-300x147.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/stylie-1-370x181.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/stylie-1-270x132.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/stylie-1-570x278.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<a title=\"stylie\" href=\"http:\/\/jeremyckahn.github.io\/stylie\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stylie <\/a>est un outil simplifi\u00e9 issu de Mantra, qui permet de cr\u00e9er des animations CSS complexes. Designez votre animation graphiquement, puis copiez le code g\u00e9n\u00e9r\u00e9 pour le coller directement sur votre site.<\/p>\n<h2>Tridiv<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-38491\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/tridiv-1.jpg\" alt=\"Tridiv animations CSS\" width=\"700\" height=\"307\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/tridiv-1.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/tridiv-1-300x132.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/tridiv-1-370x162.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/tridiv-1-270x118.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/tridiv-1-570x250.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<a href=\"https:\/\/tridiv.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tridiv<\/a> est un logiciel permettant de cr\u00e9er des animations 3D en CSS.<\/p>\n<h2>Vivify<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-38492\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/vivify.jpg\" alt=\"Vivfy animations CSS\" width=\"700\" height=\"304\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/vivify.jpg 700w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/vivify-300x130.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/vivify-370x161.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/vivify-270x117.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/vivify-570x248.jpg 570w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<a href=\"http:\/\/vivify.mkcreative.cz\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vivify<\/a> est une biblioth\u00e8que gratuite d&#8217;animations CSS3. S\u00e9lectionnez l&#8217;animation dans la liste d\u00e9roulante, et cliquez sur &#8220;Animate&#8221;&nbsp;: le petit smiley s&#8217;anime pour illustrer en direct l&#8217;animation s\u00e9lectionn\u00e9e.<\/p>\n<p>Vous avez d\u00e9sormais le choix pour s\u00e9lectionner l&#8217;animation CSS qui vous convient&nbsp;! Faites vous accompagner par un webdesigner freelance en postant votre projet sur <a href=\"https:\/\/www.codeur.com\/fonctionnement-codeur\">Codeur.com<\/a> pour r\u00e9aliser le design de votre site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er des animations CSS n&#8217;est pas t\u00e2che ais\u00e9e lorsqu&#8217;on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C&#8217;est pourquoi il existe de nombreux sites qui vous permettent de copier directement l&#8217;animation que vous souhaitez dans votre style, ou m\u00eame de cr\u00e9er votre animation personnalis\u00e9e gr\u00e2ce \u00e0 une interface graphique. Nous avons s\u00e9lectionn\u00e9 pour vous [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":38496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[131],"tags":[79],"class_list":["post-2412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-ressources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>9 ressources pour cr\u00e9er des animations CSS<\/title>\n<meta name=\"description\" content=\"Cr\u00e9er des animations CSS n&#039;est pas t\u00e2che ais\u00e9e lorsqu&#039;on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C&#039;est pourquoi il existe de nombreux sites\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeur.com\/blog\/10-animation-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 ressources pour cr\u00e9er des animations CSS\" \/>\n<meta property=\"og:description\" content=\"Cr\u00e9er des animations CSS n&#039;est pas t\u00e2che ais\u00e9e lorsqu&#039;on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C&#039;est pourquoi il existe de nombreux sites\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeur.com\/blog\/10-animation-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Codeur.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-15T07:54:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-28T10:28:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animations-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\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=\"@codeur\" \/>\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:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/person\\\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"9 ressources pour cr\u00e9er des animations CSS\",\"datePublished\":\"2014-01-15T07:54:19+00:00\",\"dateModified\":\"2025-08-28T10:28:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/\"},\"wordCount\":406,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/animations-css.jpg\",\"keywords\":[\"Ressources\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/\",\"name\":\"9 ressources pour cr\u00e9er des animations CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/animations-css.jpg\",\"datePublished\":\"2014-01-15T07:54:19+00:00\",\"dateModified\":\"2025-08-28T10:28:03+00:00\",\"description\":\"Cr\u00e9er des animations CSS n'est pas t\u00e2che ais\u00e9e lorsqu'on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C'est pourquoi il existe de nombreux sites\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/animations-css.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/01\\\/animations-css.jpg\",\"width\":1024,\"height\":618,\"caption\":\"biblioth\u00e8ques animations CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/10-animation-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement\",\"item\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/developpement\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Langages\",\"item\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/developpement\\\/langages\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/developpement\\\/langages\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"9 ressources pour cr\u00e9er des animations CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/\",\"name\":\"Codeur.com\",\"description\":\"codeur\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#organization\",\"name\":\"Codeur.com\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/logo-codeur-com.png\",\"contentUrl\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/logo-codeur-com.png\",\"width\":2560,\"height\":465,\"caption\":\"Codeur.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/fr-fr.facebook.com\\\/codeurfreelance\\\/\",\"https:\\\/\\\/x.com\\\/codeur\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codeur\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCgj9ySM9xy3gdL8qBafl9Uw\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codeur.com\\\/blog\\\/#\\\/schema\\\/person\\\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"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:\\\/\\\/www.codeur.com\\\/blog\\\/author\\\/thomas\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"9 ressources pour cr\u00e9er des animations CSS","description":"Cr\u00e9er des animations CSS n'est pas t\u00e2che ais\u00e9e lorsqu'on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C'est pourquoi il existe de nombreux sites","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:\/\/www.codeur.com\/blog\/10-animation-css\/","og_locale":"fr_FR","og_type":"article","og_title":"9 ressources pour cr\u00e9er des animations CSS","og_description":"Cr\u00e9er des animations CSS n'est pas t\u00e2che ais\u00e9e lorsqu'on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C'est pourquoi il existe de nombreux sites","og_url":"https:\/\/www.codeur.com\/blog\/10-animation-css\/","og_site_name":"Codeur.com","article_publisher":"https:\/\/fr-fr.facebook.com\/codeurfreelance\/","article_published_time":"2014-01-15T07:54:19+00:00","article_modified_time":"2025-08-28T10:28:03+00:00","og_image":[{"width":1024,"height":618,"url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animations-css.jpg","type":"image\/jpeg"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@codeur","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/#article","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"9 ressources pour cr\u00e9er des animations CSS","datePublished":"2014-01-15T07:54:19+00:00","dateModified":"2025-08-28T10:28:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/"},"wordCount":406,"commentCount":0,"publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animations-css.jpg","keywords":["Ressources"],"articleSection":["CSS"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeur.com\/blog\/10-animation-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/","url":"https:\/\/www.codeur.com\/blog\/10-animation-css\/","name":"9 ressources pour cr\u00e9er des animations CSS","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animations-css.jpg","datePublished":"2014-01-15T07:54:19+00:00","dateModified":"2025-08-28T10:28:03+00:00","description":"Cr\u00e9er des animations CSS n'est pas t\u00e2che ais\u00e9e lorsqu'on ne ma\u00eetrise pas toutes les subtilit\u00e9s de ce langage. C'est pourquoi il existe de nombreux sites","breadcrumb":{"@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeur.com\/blog\/10-animation-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/#primaryimage","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animations-css.jpg","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2014\/01\/animations-css.jpg","width":1024,"height":618,"caption":"biblioth\u00e8ques animations CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeur.com\/blog\/10-animation-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.codeur.com\/blog\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement","item":"https:\/\/www.codeur.com\/blog\/developpement\/"},{"@type":"ListItem","position":3,"name":"Langages","item":"https:\/\/www.codeur.com\/blog\/developpement\/langages\/"},{"@type":"ListItem","position":4,"name":"CSS","item":"https:\/\/www.codeur.com\/blog\/developpement\/langages\/css\/"},{"@type":"ListItem","position":5,"name":"9 ressources pour cr\u00e9er des animations CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codeur.com\/blog\/#website","url":"https:\/\/www.codeur.com\/blog\/","name":"Codeur.com","description":"codeur","publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeur.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.codeur.com\/blog\/#organization","name":"Codeur.com","url":"https:\/\/www.codeur.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","width":2560,"height":465,"caption":"Codeur.com"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/fr-fr.facebook.com\/codeurfreelance\/","https:\/\/x.com\/codeur","https:\/\/www.linkedin.com\/company\/codeur\/","https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw"]},{"@type":"Person","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","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:\/\/www.codeur.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/2412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/comments?post=2412"}],"version-history":[{"count":0,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/2412\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media\/38496"}],"wp:attachment":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media?parent=2412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/categories?post=2412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/tags?post=2412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}