I find myself in many situations where writing CSS animations becomes a major pain in the ass. The syntax is long, the math is confusing, and browser support is all over the map.

That’s why I was super excited to find Dan Eden’s Animate.css a couple of years ago. It packages up a metric ton of animations and simplifies what is traditionally a complicated process.

But Animate.css has its limitations. For one, it’s a massive library that will add another 56kb to your stylesheets. Sure, you can download a custom build to bring that down, but then it’s a pain to go back in and add back animations later if you want them. Secondly, it’s vanilla CSS. I’ve made the full transition to SASS and having to maintain both feels like a burden.

Introducing Animate.scss

That’s why I created Animate.scss. This is the exact same library of animations included in Animate.css but ported for SASS.

Download on Github →

Yes, there are other SASS ports of Animate out there. A simple search on Google will bring up at least a dozen. I just couldn’t find one that was as easy or flexible as I wanted it to be. In other words, I wanted something that could give me as few or as many as the animations as needed for my projects while allowing me to apply my animations with a simple mixin.

Installing Animate.scss

There are no dependencies to use Animate.scss. If you are already set up to use SASS on your project, then this will fit right in.

The simplest way to get started is to drop the Animate directory into your project where your other SASS files are located. Then, @import the library in your master stylesheet.

{!{code class="language-scss"}!}czoyMzpcIkBpbXBvcnQgXCJhbmltYXRlLnNjc3NcIjtcIjt7WyYqJl19{!{/code}!}

That will give you the full library of animations. If you want to pick and choose the animations that get imported into your project, then comment out the ones you don’t need in the animate.scss file.

{!{code class="language-scss"}!}czo0NTU6XCIvLyBJbXBvcnQgdGhlIGFuaW1hdGlvbnMNCkBpbXBvcnQgDQogIC8vIFwiX2F0dGVudGlvbi9hdHRlbnRpb24uc2Nzc1wiLHtbJiomXX0gLy8gVGhpcyB3aWxsIG5vdCBpbXBvcnQNCiAgXCJfYm91bmNpbmctZW50cmFuY2VzL2JvdW5jaW5nLWVudHJhbmNlcy5zY3NzXCIsDQp7WyYqJl19ICBcIl9ib3VuY2luZy1leGl0cy9ib3VuY2luZy1leGl0cy5zY3NzXCIsDQogIFwiX2ZhZGluZy1lbnRyYW5jZXMvZmFkaW5nLWVudHJhbntbJiomXX1jZXMuc2Nzc1wiLA0KICBcIl9mYWRpbmctZXhpdHMvZmFkaW5nLWV4aXRzLnNjc3NcIiwNCiAgXCJfZmxpcHBlcnMvZmxpcHBlcnMuc2Nzc3tbJiomXX1cIiwNCiAgXCJfbGlnaHRzcGVlZC9saWdodHNwZWVkLnNjc3NcIiwNCiAgXCJfcm90YXRpbmctZW50cmFuY2VzL3JvdGF0aW5nLWVudHJhbntbJiomXX1jZXMuc2Nzc1wiLA0KICBcIl9yb3RhdGluZy1leGl0cy9yb3RhdGluZy1leGl0cy5zY3NzXCIsDQogIFwiX3NwZWNpYWxzL3NwZWNpYWxzLntbJiomXX1zY3NzXCI7XCI7e1smKiZdfQ=={!{/code}!}

Want to import specific animations rather than full sets? Comment out everything in animate.scss and use @import to pull in the exact ones you need.

{!{code class="language-scss"}!}czo2NDpcIi8vIEltcG9ydCBzcGVjaWZpYyBhbmltYXRpb25zDQpAaW1wb3J0IFwiX2F0dGVudGlvbi9ib3VuY2Uuc2Nzc1wiO1wiO3tbJiomXX0={!{/code}!}

Using Animations

Now that Animate.scss is all hooked up into your project, let’s start using some animations. Each animation is a SASS mixin, so you can apply them directly to your own class names.

{!{code class="language-scss"}!}czo0NTpcIi55b3VyLWNsYXNzLW5hbWUgew0KICBAaW5jbHVkZSBib3VuY2VJbigpOw0KfVwiO3tbJiomXX0={!{/code}!}

Furthermore, the mixin offers some variables you can use to customize the animation.

{!{code class="language-scss"}!}czoxMzI6XCIueW91ci1jbGFzcy1uYW1lIHsNCiAgQGluY2x1ZGUgYm91bmNlSW4oDQogICAgJGR1cmF0aW9uOiAxcywNCiAgICAkZGV7WyYqJl19bGF5OiAuMnMsDQogICAgJGZ1bmN0aW9uOiBlYXNlLCANCiAgICAkZmlsbC1tb2RlOiBib3RoDQogICk7DQp9XCI7e1smKiZdfQ=={!{/code}!}

Get Animate.scss

Animate.scss is available on Github. It’s not something I plan on actively maintaining, but am definitely open to contributions. Please submit a pull request if you have ideas to make this a better resource.

Download on Github →

Handwritten by Geoff Graham on January 16, 2014


  1. Kurt
    # July 27, 2014


  2. # December 12, 2014

    Thanks so much for this!

  3. Fahad Ur Rehman
    # April 2, 2015

    There is an issue. I am using singularitygs. created a plugins directory in my sass directory and cloned the animate.scss through git in that. in my main styles scss file I have imported @import “plugins/**/*”; also I tried import it like @import “plugins/animate.scss”; but when I am trying to use it like @include bounceIn(); it gives error that undefined mixin.

    can you please help me resolve this issue

    • # April 2, 2015

      Everything seems to import correctly for me in my local setup, so it sounds like there’s an issue with the way your master sass file is importing the files. I’d suggest double-checking that the import URLs point to the proper source of where the plugins exist.

  4. # June 16, 2015

    Love this Geoff, absolutely great. Exactly what I was looking for.

  5. Jasvinder Singh
    # July 30, 2015

    i have done exactly as said in the article, and there no error… but didn’t get animation effects on element.

    • # August 4, 2015

      Hey Jasvinder! You might want to check out the GitHub repo for the latest install and instructions — there have been a number of updates since this post was published and may not reflect what is current.


  6. # August 4, 2016

    Thanks so much for this! It works with compass??

    • # August 4, 2016

      Hey César! Yeah, that should be no problem at all. You’ll want to make sure your Compass config file includes the path of the Animate repo so everything compiles together. :)

    • Reza Riyadhi
      # November 17, 2016

      Hi, It’s nice mixin, so easy to use.
      I tried install it with compass-sass, but I think there is conflict mixin with compass (transform and keyframe).

    • # November 18, 2016

      Interesting! I admittedly have not used Compass on a project in some time. If you spot the source of the conflict, definitely report it and contribute a pull request in the repo and I’d be happy to merge it in.

Leave a Reply

Markdown supported