{"id":2115,"date":"2022-06-23T12:44:54","date_gmt":"2022-06-23T10:44:54","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=2115"},"modified":"2022-06-23T12:44:54","modified_gmt":"2022-06-23T10:44:54","slug":"how-to-add-css-animations-with-css-writer","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/","title":{"rendered":"How to add CSS animations with CSS Writer"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

Since the release of our new free Sketch plugin for Marcode, App Builder<\/a>, it has never ever been easier to build real code prototypes, or simple apps, straight from inside Sketch app.<\/p>\r\n

Let me show you how easy it is to add a custom CSS animation using our CSS Writer plugin for Sketch<\/a>.<\/p>\r\n

\"\"<\/a><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n

\r\n
\r\n
\r\n
\r\n
    \r\n
  1. Find a nice animation library, we\u2019re going to use this one<\/a> today.<\/li>\r\n
  2. Find a enjoyable animation, I\u2019m really fond of the Blur animations.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
    \r\n
    \r\n
    \r\n
    \r\n
      \r\n
    1. Try out the animations by pressing the Play button<\/strong> on each one. You can also change the duration. When you found one you like, just copy the code to clipboard.

      \"\"<\/a><\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n
      \r\n
      <\/div>\r\n<\/div>\r\n
      \r\n
      \r\n
      \r\n
      \r\n
        \r\n
      1. Open Sketch<\/strong> and our CSS Writer plugin<\/em>.<\/li>\r\n
      2. Select the artboard you want to add your animation, we choose Start<\/em>.<\/li>\r\n
      3. Paste the animation into CSS Writer and make sure to Save<\/strong> inside the plugin, that big blue button needs to be pressed or nothing will get added.

        \"\"<\/a>\r\n

         <\/p>\r\n<\/li>\r\n

      4. Select the component you would like to add your CSS animation into. Open App Builder<\/a> plugin and add blur-in <\/em>to the CSS Classnames field.

        \"\"<\/a>\r\n

         <\/p>\r\n<\/li>\r\n

      5. Open up Marcode and link to the very same Sketch file you are building with. A rapid way of reloading the animations is to switch between the Design and HTML view icons up in the top-right corner of Marcode.<\/li>\r\n
      6. Voil\u00e0, you are done!<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n
        \r\n
        \r\n
        \r\n
        \r\n
        https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animation-looksie-marcode01.mp4<\/a><\/video><\/div>\r\n

        Marcode for Mac bundle<\/h2>\r\n

        Now that you have learned how easy it is to use our new plugins for Marcode and Sketch, we have a very nice bundle<\/a> where you get CSS Writer 100% for free.<\/p>\r\n

        Neato.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"

        Since the release of our new free Sketch plugin for Marcode, App Builder, it has never ever been easier to build real code prototypes, or simple apps, straight from inside Sketch app. Let me show you how easy it is to add a custom CSS animation using our CSS Writer plugin for Sketch. Find a… Read More »How to add CSS animations with CSS Writer<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":2127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":70,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[4,88,206,228,18,9],"class_list":["post-2115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-animation","tag-css","tag-marcode","tag-plugins","tag-sketch-app","tag-tutorial"],"yoast_head":"\nHow to add CSS animations with CSS Writer | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add CSS animations with CSS Writer - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Since the release of our new free Sketch plugin for Marcode, App Builder, it has never ever been easier to build real code prototypes, or simple apps, straight from inside Sketch app. Let me show you how easy it is to add a custom CSS animation using our CSS Writer plugin for Sketch. Find a… Read More »How to add CSS animations with CSS Writer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-23T10:44:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to add CSS animations with CSS Writer\",\"datePublished\":\"2022-06-23T10:44:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/\"},\"wordCount\":282,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png\",\"keywords\":[\"Animation\",\"CSS\",\"Marcode\",\"Plugins\",\"Sketch App\",\"Tutorial\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/\",\"name\":\"How to add CSS animations with CSS Writer - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png\",\"datePublished\":\"2022-06-23T10:44:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add CSS animations with CSS Writer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips & tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add CSS animations with CSS Writer | Sketch2React Blog","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:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/","og_locale":"en_US","og_type":"article","og_title":"How to add CSS animations with CSS Writer - Sketch2React Blog","og_description":"Since the release of our new free Sketch plugin for Marcode, App Builder, it has never ever been easier to build real code prototypes, or simple apps, straight from inside Sketch app. Let me show you how easy it is to add a custom CSS animation using our CSS Writer plugin for Sketch. Find a… Read More »How to add CSS animations with CSS Writer","og_url":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/","og_site_name":"Sketch2React Blog","article_published_time":"2022-06-23T10:44:54+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to add CSS animations with CSS Writer","datePublished":"2022-06-23T10:44:54+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/"},"wordCount":282,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png","keywords":["Animation","CSS","Marcode","Plugins","Sketch App","Tutorial"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/","url":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/","name":"How to add CSS animations with CSS Writer - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png","datePublished":"2022-06-23T10:44:54+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/css-animations-writer.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-add-css-animations-with-css-writer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add CSS animations with CSS Writer"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips & tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=2115"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2115\/revisions"}],"predecessor-version":[{"id":2131,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2115\/revisions\/2131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/2127"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=2115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=2115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}