@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }

  @-moz-keyframes #{$animation-name} {
    @content;
  }

  @-ms-keyframes #{$animation-name} {
    @content;
  }

  @-o-keyframes #{$animation-name} {
    @content;
  }

  @keyframes #{$animation-name} {
    @content;
  }
}

@include keyframes(animation-clouds) {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-$bg-width, $bg-height, 0);
  }
}

@mixin animation-fade-in() {
  &.ng-hide-remove {
    opacity: 0;
    transition: opacity 0.2s ease-in;

    &.ng-hide-remove-active {
      opacity: 1;
    }
  }

  &.ng-enter {
    opacity: 0;
    transition: opacity 0.2s ease-in;

    &.ng-enter-active {
      opacity: 1;
    }
  }
}

.animate-fade-in {
  @include animation-fade-in();
}

@mixin animation-fade-out() {
  &.ng-hide-add {
    transition: opacity 0.2s ease-in;

    &.ng-hide-add-active {
      opacity: 0;
    }
  }
}

.animate-fade-out {
  @include animation-fade-out();
}