@mixin hinge($prefix) {
	0% {
    @include animation-timing-function(ease-in-out, $prefix);
    @include transform(rotate(0), $prefix);
    @include transform-origin(top left, $prefix);
  }	
	20%, 60% {
	  @include animation-timing-function(ease-in-out, $prefix);
	  @include transform(rotate(80deg), $prefix);
	  @include transform-origin(top left, $prefix);
	}
	40% {
	  @include transform(rotate(60deg), $prefix);
	  @include transform-origin(top left, $prefix);
	  @include animation-timing-function(ease-in-out, $prefix);
	}
	80% {
	  opacity: 1;
	  @include animation-timing-function(ease-in-out, $prefix);
	  @include transform(rotate(60deg) translateY(0), $prefix);
	  @include transform-origin(top left, $prefix);
	}
	100% {
	  @include transform(translateY(700px), $prefix);
	  opacity: 0;
	}
}

@if $experimental-support-for-webkit {
  @-webkit-keyframes hinge { @include hinge(webkit); }
}
@if $experimental-support-for-khtml {
  @-khtml-keyframes hinge { @include hinge(khtml); }
}
@if $experimental-support-for-mozilla {
  @-moz-keyframes hinge { @include hinge(moz); }
}
@if $experimental-support-for-microsoft {
  @-ms-keyframes hinge { @include hinge(ms); }
}
@if $experimental-support-for-opera {
  @-o-keyframes hinge { @include hinge(o); }
}
@keyframes hinge { @include hinge(none); }

.hinge {
  @include animation-name(hinge);
}