// Animation
.animate{
  visibility: hidden;
}
.done{
  visibility: visible;
}
.animate-vis{
  visibility: visible;
}
// Delay

$i: 20;
@while $i > 0 {
  .delay-#{$i} {
    $time : $i / 10;
    @include animation-delay(#{$time}s);
  }
  $i: $i - 1;
}

// slideInLeft

@include keyframes(slideInLeft){
  0% {
    opacity: 0;
    @include translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    @include translate(0px, 0px);
  }
}

.slideinleft.done {
  @include animation-name(slideInLeft);
  @include animation-iteration-count(1);
  @include animation-duration(0.5s);
  @include animation-fill-mode(both);
}

// slideInRight

@include keyframes(slideInRight){
  0% {
    opacity: 0;
    @include translate(100px, 0px);
  }

  100% {
    opacity: 1;
    @include translate(0px, 0px);
  }
}

.slideinright.done {
  @include animation-name(slideInRight);
  @include animation-iteration-count(1);
  @include animation-duration(.6s);
  @include animation-fill-mode(both);
}

// slideInDown
@include keyframes(slideInDown){
  0% {
    opacity: 0;
    @include translate(0px, -100px);
  }

  100% {
    opacity: 1;
    @include translate(0px, 0px);
  }
}

.slideindown.done {
  @include animation-name(slideInDown);
  @include animation-iteration-count(1);
  @include animation-duration(.5s);
  @include animation-fill-mode(both);
}
// slideInUp

@include keyframes(slideInUp){
  0% {
    opacity: 0;
    @include translate(0px, 100px);
  }

  100% {
    opacity: 1;
    @include translate(0px, 0px);
  }
}

.slideinup.done {
  @include animation-name(slideInUp);
  @include animation-iteration-count(1);
  @include animation-duration(.5s);
  @include animation-fill-mode(both);
}


// zoomIn

@include keyframes(zoomIn){
  0% {
    opacity: 0;
    @include scale(.3);
  }
  100% {
    opacity: 1;
    @include scale(1);
  }
}

.zoomin.done {
  @include animation-name (zoomIn);
  @include animation-iteration-count(1);
  @include animation-duration (.5s);
  @include animation-fill-mode (both);
}


// flipInX

@include keyframes(flipInX){
  0% {
    @include perspective(400px);
    @include rotateX(90deg);
  }

  40% {
    @include perspective(400px);
    @include rotateX(-10deg);
  }

  70% {
    @include perspective(400px);
    @include rotateX(10deg);
  }

  100% {
    @include perspective(400px);
    @include rotateX(0deg);
  }
}

.flipinx.done {
  @include animation-name (flipInX);
  @include animation-iteration-count(1);
  @include animation-duration (3s);
  @include animation-fill-mode (both);
}

// flipInY

@include keyframes(flipInY){
  0% {
    @include perspective(400px);
    @include rotateY(90deg);
  }

  40% {
    @include perspective(400px);
    @include rotateY(-10deg);
  }

  70% {
    @include perspective(400px);
    @include rotateY(10deg);
  }

  100% {
    @include perspective(400px);
    @include rotateY(0deg);
  }
}

.flipiny.done {
  @include animation-name (flipInY);
  @include animation-iteration-count(1);
  @include animation-duration (3s);
  @include animation-fill-mode (both);
}

// hinge

@include keyframes(hinge){
  0% {
    @include rotate(0deg);
    @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%{
    opacity:1;
    @include rotate(60deg);
    @include translate(0px, 0px);
    @include transform-origin(top left);
    @include animation-timing-function(ease-in-out);
  }

  100% {
    @include translate(0px, 700px);
    opacity:1;
  }
}

.hinge.done {
  @include animation(hinge);
  @include animation-iteration-count(1);
  @include animation-duration(3s);
  @include animation-fill-mode(both);
}

@include keyframes(rotatingPlane){
    0% {
      @include perspective(350px);
      @include rotateX(0deg);
      @include rotateY(0deg);
      background-color: $brand-blue;
    }
    25%{
      background-color: $brand-green;
    }
    50%{
      @include perspective(350px);
      @include rotateX(0deg);
      @include rotateY(180.01deg);
      background-color: $brand-blue;
    }
    75%{
      background-color: $brand-green;
    }
    100% {
      @include perspective(350px);
      @include rotateX(179.9deg);
      @include rotateY(180deg);
      background-color: $brand-blue;
    }
}


// lightEffect

@include keyframes(lightEffect) {
  100% {
    transform: rotateZ(60deg) translate(2em, -9em);
  }
}


// FadeIn
@include keyframes(fadeIn){
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn.done {
  @include animation-name(fadeIn);
  @include animation-iteration-count(1);
  @include animation-duration(.5s);
  @include animation-fill-mode(both);
}

// Dasharray
@include keyframes(dasharray){
  0% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.dasharray.done {
  @include animation-name(dasharray);
  @include animation-iteration-count(1);
  @include animation-duration(.5s);
  @include animation-fill-mode(both);
}