Intro and Getting Started

Some very interesting CSS3 animations can be created using the Sass preprocessor, as this short but fun tutorial explains. You can preview the final result on Plunker
In order to use Sass, you first need to install Ruby on Rails. Only Windows users need to bother about installing Ruby since MacOS comes with this already installed.
Getting started with Sass is quite easy, this simple tutorial will get you up and running quickly.
Once you have Sass installed, you will need a task runner like Grunt or Gulp to compile your Sass (.scss) files to CSS automatically. There are several online tutorials to help get you started. Fortunately, some IDEs like WebStorm have built-in support for Sass, making your web development experience much easier.

Getting Sassy

In this example there are four primary Mixins, listed below, which need to be defined first because they are required in subsequent Mixins. It may seem confusing at first, but Mixins can be re-used, just like variables, in other Mixins .

  1. prefixer – adds the browser specific CSS prefixes
  2. rotate – takes the degree amount variable as argument and applies the CSS rotate transformation
  3. translate – takes the x and y coordinate variables as arguments and applies the CSS translate transformation
  4. transform – takes the type of transformation as argument and creates the browser specific CSS transformations
@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    }
    @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    }
    @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    }
    @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    }
    @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    }
    @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

@mixin scale ($x,$y) {
  @include transform(scale(#{$x,$y}));
}

@mixin translate ($x,$y) {
  @include transform(translate(#{$x,$y}));
}

Getting even Sassier

The primary Mixins can then be used to create CSS3 animation delay rules, using variables, logical operations and conditional loops. Sass can be used to produce repetitive CSS3 code that would be tedious to write manually. By using the $times variable in a @for loop the animation delay timing can be manipulated to great effect. The @mixin(s) take in the $times argument which represents time delay in seconds. And then call the @for loop to to loop each HTML child element in sequence while applying an increasing or decreasing value to the variable.


@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}

@mixin animation-delay ($times...) {
  @include prefixer(animation-delay, $times, webkit moz spec);
}

@mixin reverse-delay($start, $end, $divisor) {
  @for $i from $start through $end {
    &:nth-child(#{$end - $i}) { @include transition-delay(#{$i/$divisor}s); }
  }
}

@mixin staging-delay($start, $end, $divisor) {
  @for $i from $start through $end {
    &:nth-child(#{$end - $i}) { @include animation-delay(#{$i/$divisor}s); }
  }
}

@mixin scale-delay($from, $to, $divisor) {
  @for $i from $from through $to {
    &:nth-child(#{$to - $i}) { @include animation-delay(#{$i/$divisor}s); }
  }
}

Sassy Keyframes

Finally, you get to apply the Mixins to CSS3 animation Keyframes which control how and when the HTML elements are animated across the page. Keyframes are usually defined from start: 0% to end: 100% with “tween” values in between, over the animation-duration length of time.

@mixin animate-sprite($animation-name) {

  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}
@include animate-sprite(turn-around){
  from{@include rotate(0);@include scale(0,0);}
  to{@include rotate(360);@include scale (1.0,1.0);}
}
@include animate-sprite(turn-around2){
  from{@include rotate(0); }
  to{@include rotate(60); }
}

@include animate-sprite(upscale){
  from{@include scale(0,0);}
  to{@include scale (1.0,1.0);}
}

@include animate-sprite(downscale){
  from{@include scale(1.0,1.0);}
  to{@include scale (0,0);}
}
@include animate-sprite(move-around){
  from{ @include translate(2px, 4px);}
  to{ @include translate(100px, 140px);}
}