ehmorris/cardslap

%animation-slide-entry {
  @include animation(slide-entry 0.5s ease);
  @include animation-fill-mode(both);
}
@include keyframes(slide-entry) {
  0% {
    @include transform(translate(-100%, 0));
  }
  100% {
    @include transform(translate(0%, 0));
  }
}


%animation-fade-in {
  @include animation(fade-in .3s $ease-out-sine);
  @include animation-fill-mode(backwards);
}
@include keyframes(fade-in) {
  0% {
    opacity: 0;
    @include transform(translateY(-50px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0px));
  }
}


%animation-background-cycle {
  @include animation(background-cycle 100s $ease-out-sine);
  @include animation-fill-mode(both);
  @include animation-iteration-count(infinite);
}
@include keyframes(background-cycle) {
  0% {
    color: darken($melongreen, 5%);
  }
  10% {
    color: lighten($melongreen, 5%);
  }
  20% {
    color: $melongreen;
  }
  30% {
    color: darken($blue, 10%);
  }
  40% {
    color: lighten($melongreen, 5%);
  }
  50% {
    color: $pink;
  }
  60% {
    color: lighten($pink, 5%);
  }
  70% {
    color: lighten($melongreen, 5%);
  }
  80% {
    color: $blue;
  }
  90% {
    color: lighten($blue, 5%);
  }
  100% {
    color: darken($melongreen, 5%);
  }
}