css/scss animations

[wuyuedefeng]

animations

• fade-in、fade-out

  
  @mixin keyframes-animation-fade-in($from: 0, $to: 1) {
  @keyframes animation-fade-in {
  from {
    opacity: $from;
  }
  to {
    opacity: $to;
  }
  }
  }

@mixin keyframes-animation-fade-out($from: 1, $to: 0) { @keyframes animation-fade-out { from { opacity: $from; } to { opacity: $to; } } }

@mixin animation-fade-in ($opacity-from: 0, $opacity-end: 1, $speed-time: .12s) { @include keyframes-animation-fade-in($opacity-from, $opacity-end); animation: animation-fade-in $speed-time linear forwards; }

@mixin animation-fade-out ($opacity-from: 0, $opacity-end: 1, $speed-time: .12s) { @include keyframes-animation-fade-out($opacity-from, $opacity-end); animation: animation-fade-out $speed-time linear forwards; }

```scss
// usage
.fade-in {
  @include animation-fade-in(0, .82, .12s);
}
.fade-out {
  @include animation-fade-out(.82, 0, .12s);
}

[wuyuedefeng]

动画延迟 classes: delay-100ms, delay-200ms, delay-300ms, delay-400ms, delay-500ms

@for $i from 1 through 5 {
  .delay-#{$i*100}ms {
    animation-delay: ($i*100) + ms;
  }
}