SASS partial for fading in page elements or grid rows

_fade-in.scss

//@include fade-in($number: 10, $anime-time: .3s, $delay-time: .15s);
@mixin fade-in($number, $anime-time, $delay-time) {
   
    @for $i from 1 through $number{
        .fade-item:nth-of-type(#{$i}) { 
        -webkit-animation-duration: $anime-time;
        animation-duration: $anime-time;
        -webkit-animation-delay: ($delay-time * $i);
        animation-delay:($delay-time * $i);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        }
        .fade-item-#{$i} { 
        -webkit-animation-duration: $anime-time;
        animation-duration: $anime-time;
        -webkit-animation-delay: ($delay-time * $i);
        animation-delay:($delay-time * $i);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        }
    }
    
}
/*.grid-fade-in{
     @include grid-fade-in($number: 10, $anime-time: .3s, $delay-time: .15s);
}*/
@mixin grid-fade-in($number, $anime-time, $delay-time) {
    @for $i from 1 through $number{
        .mx-datagrid-body tr:nth-of-type(#{$i}) td { 
        -webkit-animation-duration: $anime-time;
        animation-duration: $anime-time;
        -webkit-animation-delay: ($delay-time * $i);
        animation-delay:($delay-time * $i);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        }
    }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
      transform: translateY(10px);
  }

  to {
    opacity: 1;
       transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
       transform: translateY(10px);
  }

  to {
    opacity: 1;
       transform: translateY(0);
  }
}