To be used with Bourbon @include animation(hinge 20s 1);

hinge-animation.scss

// *************** //
// HINGE ANIMATION //
// *************** //

// Timings
$hingefirst:      0;
$hingesecond:     80deg;
$hingethird:      60deg;
$hingefouth:      700px;

// Controls
$hingedirection:  top left;
$hingetiming:     ease-in-out;


@include keyframes(hinge) {
  0% { @include transform(rotate($hingefirst)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  10% { @include transform(rotate($hingesecond)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  20% { @include transform(rotate($hingethird)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  30% { @include transform(rotate($hingesecond)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  40% { @include transform(rotate($hingethird)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  50% { @include transform(rotate($hingesecond)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  60% { @include transform(rotate($hingethird)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  70% { @include transform(rotate($hingesecond)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  80% { @include transform(rotate($hingethird)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  90% { @include transform(rotate($hingesecond) translateY($hingefirst)); @include transform-origin($hingedirection); @include animation-timing-function($hingetiming); }  
  100% { @include transform(translateY($hingefouth)); }