
// projects fade in
//************************************************************************//

.animation-tilefill {
  @include animation(tilefill 0.5s $ease-out-sine);
  @include animation-fill-mode(both);
}

@mixin tilefill {
  0% {
    opacity: 0;
    @include transform(scale(0.1));
    @include transform-origin(left top);
  }
  80% {
    @include transform(scale(1));
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes tilefill { @include tilefill; }
   @-moz-keyframes tilefill { @include tilefill; }
        @keyframes tilefill { @include tilefill; }

// add @extend .animation-tilefill; to all animated elements
// all animated elements also have @include transition


// tagline appear animation
//************************************************************************//

.animation-tagline-enter {
  @include animation(tagline-enter 1s $ease-out-sine);
  @include animation-fill-mode(both);
  @include animation-delay(1s);
}

@mixin tagline-enter-keyframes {
  0% {
    opacity: 0;
    @include transform(scale(0.1));
  }
  60% {
    @include transform(scale(1.05));
  }
  80% {
    @include transform(scale(1));
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes tagline-enter { @include tagline-enter-keyframes; }
   @-moz-keyframes tagline-enter { @include tagline-enter-keyframes; }
        @keyframes tagline-enter { @include tagline-enter-keyframes; }

// tagline appear animation
//************************************************************************//

.animation-content-appear {
  @include animation(content-appear 1.3s $ease-out-sine);
  @include animation-fill-mode(both);
  @include animation-delay(3s);
}

@mixin content-appear-keyframes {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes content-appear { @include content-appear-keyframes; }
   @-moz-keyframes content-appear { @include content-appear-keyframes; }
        @keyframes content-appear { @include content-appear-keyframes; }

// logo wiggle animation
//************************************************************************//

.animation-logo-wiggle {
  @include animation(logo-wiggle 0.4s linear);
  @include animation-fill-mode(both);
}

@mixin logo-wiggle-keyframes {
  0% {
    @include transform(rotate(-10deg));
  }
  25% {
    @include transform(rotate(10deg));
  }
  50% {
    @include transform(rotate(-10deg));
  }
  75% {
    @include transform(rotate(10deg));
  }
  100% {
    @include transform(rotate(0deg));
  }
}

@-webkit-keyframes logo-wiggle { @include logo-wiggle-keyframes; }
   @-moz-keyframes logo-wiggle { @include logo-wiggle-keyframes; }
        @keyframes logo-wiggle { @include logo-wiggle-keyframes; }
