@import "mixins";
@import "compass/css3";


.animated {
  @include prefixed(animation, 1s ease);
  @include prefixed(animation-fill-mode, both);
}

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

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

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

  100% {
    @include transform(perspective(400px) rotateX(0deg));
    opacity: 1;
  }
}

@include keyframes(fadeInLeftMiddle) {
  0% {
    opacity: 0.5;
    @include transform(translateX(-400px));
  }

  100% {
    @include transform(translateX(0));
    opacity: 1;
  }
}

@include keyframes(wobble) {
    0% { @include transform(translateX(0%)); }
  15% { @include transform(translateX(-25%) rotate(-5deg)); }
  30% { @include transform(translateX(20%) rotate(3deg)); }
  45% { @include transform(translateX(-15%) rotate(-3deg)); }
  60% { @include transform(translateX(10%) rotate(2deg)); }
  75% { @include transform(translateX(-5%) rotate(-1deg)); }
  100% { @include transform(translateX(0%)); }
}
.flipInX {
  @include prefixed(backface-visibility, visible !important);
  @include prefixed(animation-name, flipInX);
}

.wobble {
  @include prefixed(animation-name, wobble);
}

.fadeInLeftMiddle {
  @include prefixed(animation-name, fadeInLeftMiddle);
}

.fast {
  @include prefixed(animation-duration, 0.8s);
}

