Placeholder animate - Sass mixin

index.html

<input type="text" placeholder="It's here" />

style.scss

body{
  padding:15px;
}

@mixin placeholder-animate($property, $interval, $time: 0.3s, $time-function: ease-out){
  
  &::placeholder{
    #{$property}: nth($interval, 1);
    transition: #{$property} $time linear;
  }
  
  &:focus{
    &::placeholder{
      #{$property}: nth($interval, 2);
    }
  }
  
}

input{
  display: inline-block;
  padding:15px 10px;
  $interval: #333 #eee;
  @include placeholder-animate(color, $interval);
}