@charset "UTF-8";

//-----------------------------------------------------
// animate.scss
// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out
//-----------------------------------------------------

%animation-basic {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

// fade in/out
//-----------------------------------------------------

@mixin animation-fade-in($className: fade, $from: 0) {
  $name: str-insert(In, $className, 0);

  .#{$className}-in {
    animation-name: $name;
    @extend %animation-basic;
  }
  @include animation-fade($name: $name, $from: $from);
}

@mixin animation-fade-out($className: fade, $to: 0) {
  $name: str-insert(Out, $className, 0);

  .#{$className}-out {
    animation-name: $name;
    @extend %animation-basic;
  }

  @include animation-fade($name: $name, $from: 1, $to: $to);
}

// shrink in/out
//-----------------------------------------------------

@mixin animation-shrink-in($className: shrink, $from: 0.815) {
  $name: str-insert(In, $className, 0);
  
  .#{$className}-in {
    animation-name: $name;
    @extend %animation-basic;
  }
  @keyframes #{$name} {
    0% {
      opacity: 0;
      transform: scale($from);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@mixin animation-shrink-out($className: shrink, $to: 1.185) {
  $name: str-insert(Out, $className, 0);

  .#{$className}-out {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale($to);
    }
  }
}

// down in/out
//-----------------------------------------------------

@mixin animation-down-in($className: down, $value: 100%) {
  $name: str-insert(In, $className, 0);
  
  .#{$className}-in {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 0;
      transform: translate(0, $value);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
}

@mixin animation-down-out($className: down, $value: 100%) {
  $name: str-insert(Out, $className, 0);

  .#{$className}-out {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(0, $value);
    }
  }
}

// up in/out
//-----------------------------------------------------

@mixin animation-up-in($className: up, $value: -100%) {
  $name: str-insert(In, $className, 0);
  
  .#{$className}-in {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 0;
      transform: translate(0, $value);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
}

@mixin animation-up-out($className: up, $value: -100%) {
  $name: str-insert(Out, $className, 0);

  .#{$className}-out {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(0, $value);
    }
  }
}

// left in/out
//-----------------------------------------------------

@mixin animation-left-in($className: left, $value: -100%) {
  $name: str-insert(In, $className, 0);
  
  .#{$className}-in {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 0;
      transform: translate($value, 0);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
}

@mixin animation-left-out($className: left, $value: -100%) {
  $name: str-insert(Out, $className, 0);

  .#{$className}-out {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate($value, 0);
    }
  }
}

// right in/out
//-----------------------------------------------------

@mixin animation-right-in($className: right, $value: 100%) {
  $name: str-insert(In, $className, 0);
  
  .#{$className}-in {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 0;
      transform: translate($value, 0);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
}

@mixin animation-right-out($className: right, $value: 100%) {
  $name: str-insert(Out, $className, 0);

  .#{$className}-out {
    animation-name: $name;
    @extend %animation-basic;
  }

  @keyframes #{$name} {
    0% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate($value, 0);
    }
  }
}

%anmCommon {
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

@keyframes leftIn {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(333px, 0);
  }
}

@keyframes leftOut {
  from {
    transform: translate(333px, 0);
  }
  to {
    transform: translate(0, 0);
  }
}

%anmLeftIn {
  @extend %anmCommon;
  animation-name: leftIn;
}

%anmLeftOut {
  @extend %anmCommon;
  animation-name: leftOut;
}

@keyframes smallLeftIn {
  from {
    transform: translate(0, 0);
    opacity: 0;
  }
  to {
    transform: translate(300px, 0);
    opacity: 1;
  }
}

@keyframes smallleftOut {
  from {
    transform: translate(300px, 0);
    opacity: 1;
  }
  to {
    transform: translate(0, 0);
    opacity: 0;
  }
}

%anmSmallLeftIn {
  @extend %anmCommon;
  animation-name: smallLeftIn;
}

%anmSmallLeftOut {
  @extend %anmCommon;
  animation-name: smallleftOut;
}

// 头像旋转动画
@keyframes profilepic {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
%picRotate {
  animation: profilepic 5s linear infinite;
}