How to add CSS animations with CSS Writer

Juan Maguid
Published in
2 min readJun 23, 2022

Since the release of our new 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 combined with App Builder.

Let’s go!

AnimatiSS is nice! 😊
  1. Find a nice animation library, we’re going to use this one today.
  2. Find a enjoyable animation, I’m really fond of the Blur animations.
  1. Try out the animations by pressing the Play button on each one. You can also change the duration. When you found one you like, just copy the code to clipboard.
Easy peasy ✅
  1. Open Sketch and our CSS Writer plugin.
  2. Select the artboard you want to add your animation, we choose Start.
  3. Paste the animation into CSS Writer and make sure to Save inside the plugin, that big blue button needs to be pressed or nothing will get added.
CSS Writer is an excellent addition for Marcode
  1. Select the component you would like to add your CSS animation into. Open App Builder plugin and add blur-in to the CSS Classnames field.
  1. 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.
  2. Voilà, you are done!

Marcode for Mac bundle

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




Juan Maguid

Creative Technologist. Co-founder of Team Sketch2React.