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.

@import "animate.scss";

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.

// Import the animations
@import 
  // "_attention/attention.scss", // This will not import
  "_bouncing-entrances/bouncing-entrances.scss",
  "_bouncing-exits/bouncing-exits.scss",
  "_fading-entrances/fading-entrances.scss",
  "_fading-exits/fading-exits.scss",
  "_flippers/flippers.scss",
  "_lightspeed/lightspeed.scss",
  "_rotating-entrances/rotating-entrances.scss",
  "_rotating-exits/rotating-exits.scss",
  "_specials/specials.scss";

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.

// Import specific animations
@import "_attention/bounce.scss";

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.

.your-class-name {
  @include bounceIn();
}

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

.your-class-name {
  @include bounceIn(
    $duration: 1s,
    $delay: .2s,
    $function: ease, 
    $fill-mode: both
  );
}

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 →

CSSResourceSASS

  • Kurt

    NICE!

  • Thanks so much for this!

  • Fahad Ur Rehman

    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

    • 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.

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

  • Jasvinder Singh

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

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

    • 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

        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).

        • 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.

Subscribe to Devigner Digest

I read a lot of crap about design and development and 90% really is crap. Subscribe and I will send links to the other 10% about once a month.