SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS How Compass 0.13 is Going to Make CSS Animations Easy

How Compass 0.13 is Going to Make CSS Animations Easy

ChrisYoung HTML and CSS Oct 23, 2013

CSS animations are great as they make it relatively easy to animate transitions from one configuration to another. They can be used to make anything from subtle effects to impressive animated films but writing them can be a laborious task.

For example, if you were to take this piece of code that scales an element:

@keyframes scale {
0% {
transform: none;
}
100% {
transform: scale(1.5);
}
}

Now you probably think that doesn't look too bad, but if you want to use it in production and make it available to multiple browsers, then the short piece of code becomes a monster:

@-ms-keyframes scale {
0% {
-ms-transform: none;
transform: none;
}
100% {
-ms-transform: scale(1.5);
transform: scale(1.5);
}
}

@-webkit-keyframes scale {
0% {
-webkit-transform: none;
transform: none;
}
100% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}

@-moz-keyframes scale {
0% {
-moz-transform: none;
transform: none;
}
100% {
-moz-transform: scale(1.5);
transform: scale(1.5);
}
}

@-o-keyframes scale {
0% {
-o-transform: none;
transform: none;
}
100% {
-o-transform: scale(1.5);
transform: scale(1.5);
}
}

@keyframes scale {
0% {
-ms-transform: none;
-webkit-transform: none;
-o-transform: none;
-moz-transform: none;
transform: none;
}

100% {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
}

You can see that it's not feasible to write that much code by hand and maintain it; this is just a simple example as well. Thankfully there is a way for you to handle these complex situations with Compass 0.13.

What is Compass?

Compass is a framework built on top of Sass to make CSS authoring easier.

Ok so what is Sass?

Sass is a CSS pre-compiler that makes CSS more useful with features such as variables and nested rules. The idea is you run some software locally while you are developing that watches your Sass files and when it sees a change it generates a new CSS file for you.

Compass 0.13

Compass 0.13 is currently in alpha so is not quite ready for prime time use but it should be available in the near future and is available to use right now by running:

gem install compass -pre

Compass 0.13 is of particular interest because it includes an animation plugin which is a life saver when it comes to writing and using CSS animations.

At the moment, you could write your own mixin to generate the keyframe CSS, but the tricky part is getting the code to cover all browsers yet not be redundant, i.e. -moz-transform is not needed inside @-webkit-keyframes as the keyframes are only applied to webkit browsers.

Compass handles all of that for you. So our code from above becomes:

@include keyframes (scale) {
0% {
@include transform(none);
}
100% {
@include transform(1.5);
}
}

Compass handles all the advanced logic behind the scenes for you and outputs the exact amount of code necessary while keeping your own work to a minimum. It also includes shorthand for the actual animation declaration, which is another handy time saver:

@include animation(scale 10s infinite);

In both of these cases the Sass code closely follows the official CSS specification so there is not a steep learning curve if you already know how CSS animations work.

Animation Libraries

There are already a few CSS animation libraries out in the wild that include pre-made animations to do basic animations such as slide elements in and out and fade elements. Of particular note are Effeckt.css and Dan Eden's animate.css.

But the killer library is the Compass port of animate.css by Eric Meyer which includes the same great animations but uses a Compass friendly loading system.

You can easily add the whole set of animations to your CSS file with @import "animate"; or you can use the fantastic option to just add specific animations to your CSS file: @include animate-fadeIn;.

This is the fastest, cleanest and easiest to quickly get up and running with some fairly advanced animations.

The great thing with this method is that it only includes what you need without any cutting and chopping of CSS files. To give you an idea the default animate.css file is 3492 lines of CSS. But if you only need a couple of animations then over 3000 lines of that code is wasted space.

Further Reading

Sass

  • The Official Sass Website - has a lot of documentation and instructions on Sass
  • The Sass Way - contains more advanced guides, particularly around structuring Sass projects and best practices

Compass

CSS Animations

ABOUT THE AUTHOR

Chris Young

Chris Young works for WhoIsHostingThis, a free tool you can use to find who is hosting your favourite websites and features a wide range of web hosting reviews.

subscribe to newsletter