{"id":3556,"date":"2015-01-24T17:19:19","date_gmt":"2015-01-24T16:19:19","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=3556"},"modified":"2015-10-06T23:18:45","modified_gmt":"2015-10-06T21:18:45","slug":"delighting-users-css-animation-techniques-conveyux-slides-et-demos","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/","title":{"rendered":"Delighting Users Through CSS Animation Techniques, ConveyUX &#8211; slides et demos"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 9 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Pour ceux qui me suivent un peu sur les r\u00e9seaux sociaux, vous savez sans doute que je suis actuellement \u00e0 Seattle pour donner une conf\u00e9rence \u00e0 ConveyUX sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur.<\/p>\n<p>Ces deux journ\u00e9es ont \u00e9t\u00e9 tr\u00e8s enrichissantes, j&rsquo;ai pu assister \u00e0 d&rsquo;excellentes conf\u00e9rence (et voir Karen MacGrane sur sc\u00e8ne, c&rsquo;est mon c\u00f4t\u00e9 fangirl). J&rsquo;ai pris pas mal de notes en anglais qui seront peut-\u00eatre publi\u00e9es sur la partie anglaise du blog quand j&rsquo;aurai un moment.<\/p>\n<p>Pour ceux qui sont curieux de savoir de quoi j&rsquo;ai parl\u00e9, vous pouvez trouver les slides en ligne ainsi que les exemples de code sous forme de d\u00e9mo codepen. Comme je ne peux pas inclure de vid\u00e9os dans un PDF g\u00e9n\u00e9r\u00e9 depuis Keynote c&rsquo;est assez statique, je vous conseille donc je suivre les d\u00e9mos en m\u00eame temps que le code sur les slides.<\/p>\n<h2>Les slides<\/h2>\n<p><a href=\"https:\/\/speakerdeck.com\/stephaniewalter\/ux-css-animation-techniques\">Les slides sont disponibles ici.<\/a><\/p>\n<p><script class=\"speakerdeck-embed\" src=\"\/\/speakerdeck.com\/assets\/embed.js\" async=\"\" data-id=\"d4cfb9c082f9013226a63a08fdd3fd20\" data-ratio=\"1.33333333333333\"><\/script><br \/>\n<small>Les slides Delighting Users Through CSS Animation Techniques\u00a0par\u00a0<a href=\"http:\/\/www.stephaniewalter.fr\" rel=\"cc:attributionURL\">Walter St\u00e9phanie<\/a>\u00a0sont\u00a0mis \u00e0 disposition selon les termes de <a href=\"http:\/\/creativecommons.org\/licenses\/by\/4.0\/deed.fr\" rel=\"license\">la Licence Creative Commons Attribution &#8211; Pas d\u2019Utilisation Commerciale &#8211; Partage dans les M\u00eames Conditions 4.0 International.<\/a><\/small><\/p>\n<p><small>Vous ne pouvez pas les utiliser \u00e0 des fins commerciales, mais vous pouvez les partager\u00a0en citez la source et respectant le partage dans les conditions initiales. N&rsquo;h\u00e9sitez pas \u00e0 partager votre utilisation dans les commentaires. Vous ne pouvez pas les t\u00e9l\u00e9charger et les reposter sur d&rsquo;autres supports en ligne (slideshare) en votre propre nom.<\/small><\/p>\n<h2 style=\"text-align: left;\"><a href=\"http:\/\/codepen.io\/collection\/nkNNpo\/\">Les d\u00e9mos codepen des exemples cit\u00e9s dans la conf\u00e9rence<\/a><\/h2>\n<p><a href=\"http:\/\/codepen.io\/collection\/nkNNpo\/\" class=\"link-on-image\" ><img decoding=\"async\" class=\"aligncenter wp-image-1236\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2015\/01\/css-animations-demo.jpg\" alt=\"css-animations-demo\" width=\"780\" height=\"581\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 9 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Pour ceux qui me suivent un peu sur les r\u00e9seaux sociaux, vous savez sans doute que je suis actuellement \u00e0 Seattle pour donner une conf\u00e9rence \u00e0 ConveyUX sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Ces deux journ\u00e9es ont \u00e9t\u00e9 tr\u00e8s enrichissantes, j&rsquo;ai pu assister \u00e0 d&rsquo;excellentes conf\u00e9rence (et voir Karen MacGrane sur sc\u00e8ne, c&rsquo;est mon c\u00f4t\u00e9 fangirl). &hellip;<\/p>\n","protected":false},"author":3,"featured_media":3557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[216],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<meta name=\"description\" content=\"Slides de ma conf\u00e9rence ConveyUX \u00e0 Seattle sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l&#039;exp\u00e9rience utilisateur.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Slides de ma conf\u00e9rence ConveyUX \u00e0 Seattle sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l&#039;exp\u00e9rience utilisateur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-24T16:19:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-10-06T21:18:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2015\/01\/css-animations-techniques.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/\",\"name\":\"Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2015\/01\/css-animations-techniques.jpg\",\"datePublished\":\"2015-01-24T16:19:19+00:00\",\"dateModified\":\"2015-10-06T21:18:45+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Slides de ma conf\u00e9rence ConveyUX \u00e0 Seattle sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l'exp\u00e9rience utilisateur.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2015\/01\/css-animations-techniques.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2015\/01\/css-animations-techniques.jpg\",\"width\":850,\"height\":350,\"caption\":\"Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/twitter.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Slides de ma conf\u00e9rence ConveyUX \u00e0 Seattle sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l'exp\u00e9rience utilisateur.","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:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/","og_locale":"fr_FR","og_type":"article","og_title":"Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Slides de ma conf\u00e9rence ConveyUX \u00e0 Seattle sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l'exp\u00e9rience utilisateur.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2015-01-24T16:19:19+00:00","article_modified_time":"2015-10-06T21:18:45+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2015\/01\/css-animations-techniques.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/","name":"Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2015\/01\/css-animations-techniques.jpg","datePublished":"2015-01-24T16:19:19+00:00","dateModified":"2015-10-06T21:18:45+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Slides de ma conf\u00e9rence ConveyUX \u00e0 Seattle sur les animations CSS et comment elles participent \u00e0 am\u00e9liorer l'exp\u00e9rience utilisateur.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/delighting-users-css-animation-techniques-conveyux-slides-et-demos\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2015\/01\/css-animations-techniques.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2015\/01\/css-animations-techniques.jpg","width":850,"height":350,"caption":"Delighting Users Through CSS Animation Techniques, ConveyUX - slides et demos"},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/twitter.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/3556"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=3556"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/3556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/3557"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=3556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=3556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=3556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}