Contents

// ---------------------------------------------------------------------------
// hinge

@mixin animate-hinge($class: $default-animation-class-mode) {
  $name: hinge;
  @include keyframes($name) {
    0% {
      @include rotate(0);
      @include transform-origin(top, left);
      @include animation-timing-function(ease-in-out); 
    }
    20%, 60% {
      @include rotate(80deg);
      @include transform-origin(top, left);
      @include animation-timing-function(ease-in-out); 
    }
    40% {
      @include rotate(60deg);
      @include transform-origin(top, left);
      @include animation-timing-function(ease-in-out); 
    }
    80% {
      @include transform(rotate(60deg) translateY(0));
      @include opacity(1);
      @include transform-origin(top, left);
      @include animation-timing-function(ease-in-out); 
    }
    100% {
      @include translateY(700px);
      @include opacity(0); 
    }
  }
  
  @include animation-class($name, $class) {
    $selector: if($class == 'silent', '%animated', '.animated');
    &#{$selector} { @include animation(2s ease both); }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
animate-0.1.alpha.0	stylesheets/animate/special/_hinge.scss