Cacher is the code snippet organizer for pro developers

<input type="email" placeholder="example@gmail.com" class="input">

.input {
  padding: .5rem;
}

.input::-webkit-input-placeholder {
  color: #aaa;
  text-indent: 0px;
  transition: text-indent 300ms;
}

.input:-moz-placeholder {
  color: #aaa;
  text-indent: 0px;
  transition: text-indent 300ms;
}

.input::-moz-placeholder {
  color: #aaa;
  text-indent: 0px;
  transition: text-indent 300ms;
}

.input:-ms-input-placeholder {
  color: #aaa;
  text-indent: 0px;
  transition: text-indent 300ms;
}

.input:focus::-webkit-input-placeholder {
  text-indent: 500px;
}

.input:focus:-moz-placeholder {
  text-indent: 500px;
}

.input:focus::-moz-placeholder {
  text-indent: 500px;
}

.input:focus:-ms-input-placeholder {
  text-indent: 500px;
}

// ----
// libsass (v3.3.2)
// ----

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

.input {
  padding: .5rem;
  
  @include placeholder {
    color: #aaa;
    text-indent: 0px;
    transition: text-indent 300ms;
  }
  
  &:focus {
    @include placeholder {
      text-indent: 500px;
    }
  }
}

<input type="email" placeholder="example@gmail.com" class="input">